From 6ca4dee75d10ce87142f13d083e08fc63bddfa30 Mon Sep 17 00:00:00 2001
From: Paul Miller <paul@paul.lol>
Date: Thu, 6 Apr 2023 16:01:30 -0500
Subject: [PATCH] don't block, use suspense

---
 src/components/App.tsx        |  2 +-
 src/components/BalanceBox.tsx | 12 +++++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 2fda47e..569dbe3 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -37,7 +37,7 @@ export default function App() {
                     <header class='text-sm font-semibold uppercase'>
                         Activity
                     </header>
-                    <For each={[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]}>
+                    <For each={[1, 2, 3, 4]}>
                         {() =>
                             <Presence>
                                 <Motion
diff --git a/src/components/BalanceBox.tsx b/src/components/BalanceBox.tsx
index f087d2e..cd0f4ae 100644
--- a/src/components/BalanceBox.tsx
+++ b/src/components/BalanceBox.tsx
@@ -1,6 +1,6 @@
 import { Motion, Presence } from "@motionone/solid";
 import { MutinyBalance } from "@mutinywallet/node-manager";
-import { createResource, Show } from "solid-js";
+import { createResource, Show, Suspense } from "solid-js";
 
 import { useNodeManager } from "~/state/nodeManagerState";
 import { ButtonLink } from "./Button";
@@ -42,10 +42,12 @@ export default function BalanceBox() {
                     </header>
                     <div onClick={refetchBalance}>
                         <h1 class='text-4xl font-light'>
-                            <Show when={balance()}>
-                                {/* TODO: no-non-null-asssertion but type narrowing just isn't working */}
-                                {prettyPrintBalance(balance()!)} <span class='text-xl'>SAT</span>
-                            </Show>
+                            <Suspense fallback={"..."}>
+                                <Show when={balance()}>
+                                    {/* TODO: no-non-null-asssertion but type narrowing just isn't working */}
+                                    {prettyPrintBalance(balance()!)} <span class='text-xl'>SAT</span>
+                                </Show>
+                            </Suspense>
                         </h1>
                     </div>
                     <div class="flex gap-2 py-4">