feat: add skeleton loading states for initial data load

- Add loading signal to DashboardContext
- Update Skeleton component to accept style prop
- Add skeleton UI to HomeRoute, LedgerRoute, and BalancesRoute
- Use Switch/Match pattern for three-state handling (loading/empty/content)

apps/miniapp/src/components/ui/skeleton.tsx

@@ -1,9 +1,11 @@
+import { JSX } from 'solid-js'
 import { cn } from '../../lib/cn'
 
 type SkeletonProps = {
   class?: string
   width?: string
   height?: string
+  style?: JSX.CSSProperties
 }
 
 export function Skeleton(props: SkeletonProps) {
@@ -12,7 +14,8 @@ export function Skeleton(props: SkeletonProps) {
       class={cn('ui-skeleton', props.class)}
       style={{
         width: props.width,
-        height: props.height
+        height: props.height,
+        ...props.style
       }}
     />
   )

apps/miniapp/src/contexts/dashboard-context.tsx

@@ -72,6 +72,7 @@ type DashboardContextValue = {
   setDashboard: (
     value: MiniAppDashboard | null | ((prev: MiniAppDashboard | null) => MiniAppDashboard | null)
   ) => void
+  loading: () => boolean
   adminSettings: () => MiniAppAdminSettingsPayload | null
   setAdminSettings: (
     value:
@@ -246,6 +247,7 @@ export function DashboardProvider(props: ParentProps) {
   const { copy } = useI18n()
 
   const [dashboard, setDashboard] = createSignal<MiniAppDashboard | null>(null)
+  const [loading, setLoading] = createSignal(true)
   const [adminSettings, setAdminSettings] = createSignal<MiniAppAdminSettingsPayload | null>(null)
   const [cycleState, setCycleState] = createSignal<MiniAppAdminCycleState | null>(null)
   const [pendingMembers, setPendingMembers] = createSignal<readonly MiniAppPendingMember[]>([])
@@ -299,9 +301,11 @@ export function DashboardProvider(props: ParentProps) {
   onCleanup(unregisterDashboardRefreshListener)
 
   async function loadDashboardData(initData: string, isAdmin: boolean) {
-    // In demo mode, use demo data
+    setLoading(true)
+
     if (!initData) {
       applyDemoState()
+      setLoading(false)
       return
     }
 
@@ -331,6 +335,8 @@ export function DashboardProvider(props: ParentProps) {
         }
       }
     }
+
+    setLoading(false)
   }
 
   function applyDemoState() {
@@ -345,6 +351,7 @@ export function DashboardProvider(props: ParentProps) {
       value={{
         dashboard,
         setDashboard,
+        loading,
         adminSettings,
         setAdminSettings,
         cycleState,

apps/miniapp/src/routes/balances.tsx

@@ -1,25 +1,42 @@
-import { Show, For } from 'solid-js'
+import { Show, For, Switch, Match } from 'solid-js'
 import { BarChart3 } from 'lucide-solid'
 
 import { useI18n } from '../contexts/i18n-context'
 import { useDashboard } from '../contexts/dashboard-context'
 import { Card } from '../components/ui/card'
+import { Skeleton } from '../components/ui/skeleton'
 import { memberRemainingClass } from '../lib/ledger-helpers'
 
 export default function BalancesRoute() {
   const { copy } = useI18n()
-  const { dashboard, memberBalanceVisuals, purchaseInvestmentChart } = useDashboard()
+  const { dashboard, loading, memberBalanceVisuals, purchaseInvestmentChart } = useDashboard()
 
   return (
     <div class="route route--balances">
-      <Show
-        when={dashboard()}
-        fallback={
+      <Switch>
+        <Match when={loading()}>
+          <Card>
+            <div class="section-header">
+              <Skeleton style={{ width: '180px', height: '20px' }} />
+              <Skeleton style={{ width: '100%', height: '16px', 'margin-top': '8px' }} />
+            </div>
+            <div style={{ 'margin-top': '16px' }}>
+              <Skeleton style={{ width: '100%', height: '120px' }} />
+            </div>
+          </Card>
+          <Card>
+            <Skeleton style={{ width: '200px', height: '20px' }} />
+            <Skeleton style={{ width: '100%', height: '80px', 'margin-top': '16px' }} />
+          </Card>
+        </Match>
+
+        <Match when={!dashboard()}>
           <Card>
             <p class="empty-state">{copy().balancesEmpty}</p>
           </Card>
-        }
-      >
+        </Match>
+
+        <Match when={dashboard()}>
           {(data) => (
             <>
               {/* ── Household balances ─────────────────── */}
@@ -145,7 +162,8 @@ export default function BalancesRoute() {
               </Card>
             </>
           )}
-      </Show>
+        </Match>
+      </Switch>
     </div>
   )
 }

apps/miniapp/src/routes/home.tsx

@@ -1,4 +1,4 @@
-import { Show, For, createMemo, createSignal } from 'solid-js'
+import { Show, For, createMemo, createSignal, Switch, Match } from 'solid-js'
 import { Clock, ChevronDown, ChevronUp, Copy, Check, CreditCard } from 'lucide-solid'
 import { useNavigate } from '@solidjs/router'
 
@@ -12,6 +12,7 @@ import { Field } from '../components/ui/field'
 import { Input } from '../components/ui/input'
 import { Modal } from '../components/ui/dialog'
 import { Toast } from '../components/ui/toast'
+import { Skeleton } from '../components/ui/skeleton'
 import { memberRemainingClass, ledgerPrimaryAmount } from '../lib/ledger-helpers'
 import { majorStringToMinor, minorToMajorString } from '../lib/money'
 import {
@@ -29,6 +30,7 @@ export default function HomeRoute() {
   const { copy, locale } = useI18n()
   const {
     dashboard,
+    loading,
     currentMemberLine,
     utilityLedger,
     utilityTotalMajor,
@@ -269,14 +271,43 @@ export default function HomeRoute() {
       </div>
 
       {/* ── Dashboard stats ─────────────────────────── */}
-      <Show
-        when={dashboard()}
-        fallback={
+      <Switch>
+        <Match when={loading()}>
+          <Card>
+            <div class="balance-card">
+              <div class="balance-card__header">
+                <Skeleton style={{ width: '140px', height: '20px' }} />
+              </div>
+              <div class="balance-card__amounts" style={{ 'margin-top': '16px' }}>
+                <Skeleton style={{ width: '100%', height: '48px' }} />
+                <div style={{ height: '12px' }} />
+                <Skeleton style={{ width: '80%', height: '24px' }} />
+                <div style={{ height: '8px' }} />
+                <Skeleton style={{ width: '60%', height: '24px' }} />
+              </div>
+            </div>
+          </Card>
+          <Card>
+            <div class="balance-card">
+              <div class="balance-card__header">
+                <Skeleton style={{ width: '120px', height: '20px' }} />
+              </div>
+              <div class="balance-card__amounts" style={{ 'margin-top': '16px' }}>
+                <Skeleton style={{ width: '70%', height: '24px' }} />
+                <div style={{ height: '8px' }} />
+                <Skeleton style={{ width: '50%', height: '24px' }} />
+              </div>
+            </div>
+          </Card>
+        </Match>
+
+        <Match when={!dashboard()}>
           <Card>
             <p class="empty-state">{copy().emptyDashboard}</p>
           </Card>
-        }
-      >
+        </Match>
+
+        <Match when={dashboard()}>
           {(data) => (
             <>
               <Show when={currentMemberLine()}>
@@ -300,7 +331,10 @@ export default function HomeRoute() {
                   const period = () => effectivePeriod() ?? data().period
                   const today = () => todayOverride()
 
-                function upcomingDay(day: number): { dateLabel: string; daysUntil: number | null } {
+                  function upcomingDay(day: number): {
+                    dateLabel: string
+                    daysUntil: number | null
+                  } {
                     const withinPeriodDays = daysUntilPeriodDay(period(), day, timezone(), today())
                     if (withinPeriodDays === null) {
                       return { dateLabel: '—', daysUntil: null }
@@ -315,7 +349,10 @@ export default function HomeRoute() {
 
                     const next = nextCyclePeriod(period())
                     if (!next) {
-                    return { dateLabel: formatPeriodDay(period(), day, locale()), daysUntil: null }
+                      return {
+                        dateLabel: formatPeriodDay(period(), day, locale()),
+                        daysUntil: null
+                      }
                     }
 
                     return {
@@ -379,7 +416,9 @@ export default function HomeRoute() {
                                 </strong>
                               </div>
                               <div class="balance-card__row">
-                              <span>{copy().dueOnLabel.replace('{date}', utilitiesDueDate())}</span>
+                                <span>
+                                  {copy().dueOnLabel.replace('{date}', utilitiesDueDate())}
+                                </span>
                                 {dueBadge(utilitiesDaysUntilDue())}
                               </div>
                               <div class="balance-card__row">
@@ -512,7 +551,9 @@ export default function HomeRoute() {
                         <Card>
                           <div class="balance-card">
                             <div class="balance-card__header">
-                            <span class="balance-card__label">{copy().homeFillUtilitiesTitle}</span>
+                              <span class="balance-card__label">
+                                {copy().homeFillUtilitiesTitle}
+                              </span>
                             </div>
                             <p class="empty-state">{copy().homeFillUtilitiesBody}</p>
                             <div class="editor-grid">
@@ -862,7 +903,8 @@ export default function HomeRoute() {
               </Card>
             </>
           )}
-      </Show>
+        </Match>
+      </Switch>
 
       {/* Quick Payment Modal */}
       <Modal

apps/miniapp/src/routes/ledger.tsx

@@ -1,4 +1,4 @@
-import { Show, For, Index, createSignal, createMemo } from 'solid-js'
+import { Show, For, Index, createSignal, createMemo, Switch, Match } from 'solid-js'
 import { produce } from 'solid-js/store'
 import { Plus } from 'lucide-solid'
 
@@ -13,6 +13,7 @@ import { Select } from '../components/ui/select'
 import { Field } from '../components/ui/field'
 import { Collapsible } from '../components/ui/collapsible'
 import { Toggle } from '../components/ui/toggle'
+import { Skeleton } from '../components/ui/skeleton'
 import {
   ledgerPrimaryAmount,
   ledgerSecondaryAmount,
@@ -203,7 +204,7 @@ function ParticipantSplitInputs(props: ParticipantSplitInputsProps) {
 export default function LedgerRoute() {
   const { initData, refreshHouseholdData } = useSession()
   const { copy } = useI18n()
-  const { dashboard, effectiveIsAdmin, purchaseLedger, utilityLedger, paymentLedger } =
+  const { dashboard, loading, effectiveIsAdmin, purchaseLedger, utilityLedger, paymentLedger } =
     useDashboard()
 
   // ── Purchase editor ──────────────────────────────
@@ -542,18 +543,33 @@ export default function LedgerRoute() {
 
   return (
     <div class="route route--ledger">
-      <Show
-        when={dashboard()}
-        fallback={
+      <Switch>
+        <Match when={loading()}>
+          <Card>
+            <Skeleton style={{ width: '100%', height: '24px', 'margin-bottom': '12px' }} />
+            <Skeleton style={{ width: '80%', height: '48px' }} />
+          </Card>
+          <Card>
+            <Skeleton style={{ width: '100%', height: '24px', 'margin-bottom': '12px' }} />
+            <Skeleton style={{ width: '80%', height: '48px' }} />
+          </Card>
+        </Match>
+
+        <Match when={!dashboard()}>
           <Card>
             <p class="empty-state">{copy().ledgerEmpty}</p>
           </Card>
-        }
-      >
+        </Match>
+
+        <Match when={dashboard()}>
           {(_data) => (
             <>
               {/* ── Purchases ──────────────────────────── */}
-            <Collapsible title={copy().purchasesTitle} body={copy().purchaseReviewBody} defaultOpen>
+              <Collapsible
+                title={copy().purchasesTitle}
+                body={copy().purchaseReviewBody}
+                defaultOpen
+              >
                 <Show when={effectiveIsAdmin()}>
                   <div class="ledger-actions">
                     <Button
@@ -696,7 +712,8 @@ export default function LedgerRoute() {
               </Collapsible>
             </>
           )}
-      </Show>
+        </Match>
+      </Switch>
 
       {/* ──────── Add Purchase Modal (Bug #4 fix) ──── */}
       <Modal