skeleton loader for home screen

src/components/App.tsx

@@ -1,5 +1,5 @@
 import logo from '~/assets/icons/mutiny-logo.svg';
-import { DefaultMain, MutinyWalletGuard, SafeArea, VStack, Card } from "~/components/layout";
+import { DefaultMain, SafeArea, VStack, Card, FullscreenLoader } from "~/components/layout";
 import BalanceBox from "~/components/BalanceBox";
 import NavBar from "~/components/NavBar";
 import ReloadPrompt from "~/components/Reload";
@@ -7,30 +7,36 @@ import { A } from 'solid-start';
 import { OnboardWarning } from '~/components/OnboardWarning';
 import { CombinedActivity } from './Activity';
 import userClock from '~/assets/icons/user-clock.svg';
+import { useMegaStore } from '~/state/megaStore';
+import { Show } from 'solid-js';
 
 export default function App() {
+    const [state, _actions] = useMegaStore();
+
     return (
-        <MutinyWalletGuard>
-            <SafeArea>
-                <DefaultMain>
-                    <header class="w-full flex justify-between items-center mt-4 mb-2">
-                        <img src={logo} class="h-10" alt="logo" />
-                        <A class="md:hidden p-2 hover:bg-white/5 rounded-lg active:bg-m-blue" href="/activity"><img src={userClock} alt="Activity" /></A>
-                    </header>
+        <SafeArea>
+            <DefaultMain>
+                <header class="w-full flex justify-between items-center mt-4 mb-2">
+                    <img src={logo} class="h-10" alt="logo" />
+                    <A class="md:hidden p-2 hover:bg-white/5 rounded-lg active:bg-m-blue" href="/activity"><img src={userClock} alt="Activity" /></A>
+                </header>
+                <Show when={!state.wallet_loading}>
                     <OnboardWarning />
                     <ReloadPrompt />
-                    <BalanceBox />
-                    <Card title="Activity">
-                        <div class="p-1" />
-                        <VStack>
+                </Show>
+                <BalanceBox loading={state.wallet_loading} />
+                <Card title="Activity">
+                    <div class="p-1" />
+                    <VStack>
+                        <Show when={!state.wallet_loading} fallback={<FullscreenLoader />}>
                             <CombinedActivity limit={3} />
-                            {/* <ButtonLink href="/activity">View All</ButtonLink> */}
-                        </VStack>
-                        <A href="/activity" class="text-m-red active:text-m-red/80 text-xl font-semibold no-underline self-center">View All</A>
-                    </Card>
-                </DefaultMain>
-                <NavBar activeTab="home" />
-            </SafeArea>
-        </MutinyWalletGuard>
+                        </Show>
+                        {/* <ButtonLink href="/activity">View All</ButtonLink> */}
+                    </VStack>
+                    <A href="/activity" class="text-m-red active:text-m-red/80 text-xl font-semibold no-underline self-center">View All</A>
+                </Card>
+            </DefaultMain>
+            <NavBar activeTab="home" />
+        </SafeArea>
     );
 }

src/components/BalanceBox.tsx

@@ -1,7 +1,8 @@
 import { Show, Suspense } from "solid-js";
-import { ButtonLink, FancyCard, Indicator } from "~/components/layout";
+import { Button, ButtonLink, FancyCard, Indicator } from "~/components/layout";
 import { useMegaStore } from "~/state/megaStore";
 import { Amount } from "./Amount";
+import { useNavigate } from "solid-start";
 
 function prettyPrintAmount(n?: number | bigint): string {
     if (!n || n.valueOf() === 0) {
@@ -10,19 +11,38 @@ function prettyPrintAmount(n?: number | bigint): string {
     return n.toLocaleString()
 }
 
-export default function BalanceBox() {
+function LoadingShimmer() {
+    return (<div class="flex flex-col gap-2 animate-pulse">
+        <h1 class="text-4xl font-light">
+            <div class="w-[12rem] rounded bg-neutral-700 h-[2.5rem]"></div>
+        </h1>
+        <h2 class="text-xl font-light text-white/70" >
+            <div class="w-[8rem] rounded bg-neutral-700 h-[1.75rem]"></div>
+        </h2>
+    </div>)
+}
+
+export default function BalanceBox(props: { loading?: boolean }) {
     const [state, actions] = useMegaStore();
 
+    const emptyBalance = () => (state.balance?.confirmed || 0n) === 0n && (state.balance?.lightning || 0n) === 0n
+
+    const navigate = useNavigate()
+
     return (
         <>
             <FancyCard title="Lightning">
-                <Amount amountSats={state.balance?.lightning || 0} showFiat />
+                <Show when={!props.loading} fallback={<LoadingShimmer />}>
+                    <Amount amountSats={state.balance?.lightning || 0} showFiat />
+                </Show>
             </FancyCard>
 
             <FancyCard title="On-Chain" tag={state.is_syncing && <Indicator>Syncing</Indicator>}>
-                <div onClick={actions.sync}>
-                    <Amount amountSats={state.balance?.confirmed} showFiat />
-                </div>
+                <Show when={!props.loading} fallback={<LoadingShimmer />}>
+                    <div onClick={actions.sync}>
+                        <Amount amountSats={state.balance?.confirmed} showFiat />
+                    </div>
+                </Show>
                 <Suspense>
                     <Show when={state.balance?.unconfirmed}>
                         <div class="flex flex-col gap-2">
@@ -37,8 +57,8 @@ export default function BalanceBox() {
                 </Suspense>
             </FancyCard>
             <div class="flex gap-2 py-4">
-                <ButtonLink href="/send" intent="green">Send</ButtonLink>
-                <ButtonLink href="/receive" intent="blue">Receive</ButtonLink>
+                <Button onClick={() => navigate("/send")} disabled={emptyBalance() || props.loading} intent="green">Send</Button>
+                <Button onClick={() => navigate("/receive")} disabled={props.loading} intent="blue">Receive</Button>
             </div>
         </>
     )

src/components/layout/Button.tsx

@@ -4,7 +4,7 @@ import { Dynamic } from "solid-js/web";
 import { A } from "solid-start";
 import { LoadingSpinner } from ".";
 
-const button = cva("p-3 rounded-xl  font-semibold disabled:opacity-50 disabled:grayscale transition", {
+const button = cva("p-3 rounded-xl font-semibold disabled:opacity-50 disabled:grayscale transition", {
     variants: {
         // TODO: button hover has to work different than buttonlinks (like disabled state)
         intent: {
@@ -32,7 +32,8 @@ const button = cva("p-3 rounded-xl  font-semibold disabled:opacity-50 disabled:g
 
 type StyleProps = VariantProps<typeof button>
 interface ButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement>, StyleProps {
-    loading?: boolean
+    loading?: boolean,
+    disabled?: boolean,
 }
 
 export const Button: ParentComponent<ButtonProps> = props => {
@@ -42,6 +43,7 @@ export const Button: ParentComponent<ButtonProps> = props => {
     return (
         <button
             {...attrs}
+            disabled={props.disabled || props.loading}
             class={button({
                 class: local.class || "",
                 intent: local.intent,