fix(miniapp): make dashboard screens react to initial load

apps/miniapp/src/screens/balances-screen.tsx

@@ -39,15 +39,16 @@ type Props = {
 }
 
 export function BalancesScreen(props: Props) {
-  if (!props.dashboard) {
   return (
+    <Show
+      when={props.dashboard}
+      fallback={
         <div class="balance-list">
           <p>{props.copy.emptyDashboard ?? ''}</p>
         </div>
-    )
       }
-
+    >
-  return (
+      {(dashboard) => (
         <div class="balance-list">
           <Show when={props.currentMemberLine}>
             {(member) => (
@@ -55,7 +56,7 @@ export function BalancesScreen(props: Props) {
                 <header>
                   <strong>{props.copy.yourBalanceTitle ?? ''}</strong>
                   <span>
-                {member().netDueMajor} {props.dashboard!.currency}
+                    {member().netDueMajor} {dashboard().currency}
                   </span>
                 </header>
                 <p>{props.copy.yourBalanceBody ?? ''}</p>
@@ -63,31 +64,31 @@ export function BalancesScreen(props: Props) {
                   <article class="stat-card">
                     <span>{props.copy.baseDue ?? ''}</span>
                     <strong>
-                  {props.memberBaseDueMajor(member())} {props.dashboard!.currency}
+                      {props.memberBaseDueMajor(member())} {dashboard().currency}
                     </strong>
                   </article>
                   <article class="stat-card">
                     <span>{props.copy.shareOffset ?? ''}</span>
                     <strong>
-                  {member().purchaseOffsetMajor} {props.dashboard!.currency}
+                      {member().purchaseOffsetMajor} {dashboard().currency}
                     </strong>
                   </article>
                   <article class="stat-card">
                     <span>{props.copy.finalDue ?? ''}</span>
                     <strong>
-                  {member().netDueMajor} {props.dashboard!.currency}
+                      {member().netDueMajor} {dashboard().currency}
                     </strong>
                   </article>
                   <article class="stat-card">
                     <span>{props.copy.paidLabel ?? ''}</span>
                     <strong>
-                  {member().paidMajor} {props.dashboard!.currency}
+                      {member().paidMajor} {dashboard().currency}
                     </strong>
                   </article>
                   <article class="stat-card">
                     <span>{props.copy.remainingLabel ?? ''}</span>
                     <strong>
-                  {member().remainingMajor} {props.dashboard!.currency}
+                      {member().remainingMajor} {dashboard().currency}
                     </strong>
                   </article>
                 </div>
@@ -96,7 +97,7 @@ export function BalancesScreen(props: Props) {
           </Show>
           <div class="summary-card-grid">
             <FinanceSummaryCards
-          dashboard={props.dashboard}
+              dashboard={dashboard()}
               utilityTotalMajor={props.utilityTotalMajor}
               purchaseTotalMajor={props.purchaseTotalMajor}
               labels={{
@@ -108,7 +109,7 @@ export function BalancesScreen(props: Props) {
             />
           </div>
           <FinanceVisuals
-        dashboard={props.dashboard}
+            dashboard={dashboard()}
             memberVisuals={props.memberBalanceVisuals}
             purchaseChart={props.purchaseChart}
             remainingClass={props.memberRemainingClass}
@@ -129,39 +130,41 @@ export function BalancesScreen(props: Props) {
             </header>
             <p>{props.copy.householdBalancesBody ?? ''}</p>
           </article>
-      <For each={props.dashboard.members}>
+          <For each={dashboard().members}>
             {(member) => (
               <article class="balance-item">
                 <header>
                   <strong>{member.displayName}</strong>
                   <span>
-                {member.remainingMajor} {props.dashboard!.currency}
+                    {member.remainingMajor} {dashboard().currency}
                   </span>
                 </header>
                 <p>
                   {props.copy.baseDue ?? ''}: {props.memberBaseDueMajor(member)}{' '}
-              {props.dashboard!.currency}
+                  {dashboard().currency}
                 </p>
                 <p>
-              {props.copy.shareRent ?? ''}: {member.rentShareMajor} {props.dashboard!.currency}
+                  {props.copy.shareRent ?? ''}: {member.rentShareMajor} {dashboard().currency}
                 </p>
                 <p>
                   {props.copy.shareUtilities ?? ''}: {member.utilityShareMajor}{' '}
-              {props.dashboard!.currency}
+                  {dashboard().currency}
                 </p>
                 <p>
                   {props.copy.shareOffset ?? ''}: {member.purchaseOffsetMajor}{' '}
-              {props.dashboard!.currency}
+                  {dashboard().currency}
                 </p>
                 <p>
-              {props.copy.paidLabel ?? ''}: {member.paidMajor} {props.dashboard!.currency}
+                  {props.copy.paidLabel ?? ''}: {member.paidMajor} {dashboard().currency}
                 </p>
                 <p class={`balance-status ${props.memberRemainingClass(member)}`}>
-              {props.copy.remainingLabel ?? ''}: {member.remainingMajor} {props.dashboard!.currency}
+                  {props.copy.remainingLabel ?? ''}: {member.remainingMajor} {dashboard().currency}
                 </p>
               </article>
             )}
           </For>
         </div>
+      )}
+    </Show>
   )
 }

apps/miniapp/src/screens/home-screen.tsx

@@ -18,8 +18,10 @@ type Props = {
 }
 
 export function HomeScreen(props: Props) {
-  if (!props.dashboard) {
   return (
+    <Show
+      when={props.dashboard}
+      fallback={
         <div class="home-grid">
           <div class="summary-card-grid">
             <article class="stat-card">
@@ -40,14 +42,13 @@ export function HomeScreen(props: Props) {
             </article>
           </div>
         </div>
-    )
       }
-
+    >
-  return (
+      {(dashboard) => (
         <div class="home-grid">
           <div class="summary-card-grid">
             <FinanceSummaryCards
-          dashboard={props.dashboard}
+              dashboard={dashboard()}
               utilityTotalMajor={props.utilityTotalMajor}
               purchaseTotalMajor={props.purchaseTotalMajor}
               labels={{
@@ -71,45 +72,45 @@ export function HomeScreen(props: Props) {
                 <header>
                   <strong>{props.copy.yourBalanceTitle ?? ''}</strong>
                   <span>
-                {member().remainingMajor} {props.dashboard!.currency}
+                    {member().remainingMajor} {dashboard().currency}
                   </span>
                 </header>
                 <p>
-              {props.copy.shareRent ?? ''}: {props.dashboard!.rentSourceAmountMajor}{' '}
+                  {props.copy.shareRent ?? ''}: {dashboard().rentSourceAmountMajor}{' '}
-              {props.dashboard!.rentSourceCurrency}
+                  {dashboard().rentSourceCurrency}
-              {props.dashboard!.rentSourceCurrency !== props.dashboard!.currency
+                  {dashboard().rentSourceCurrency !== dashboard().currency
-                ? ` -> ${props.dashboard!.rentDisplayAmountMajor} ${props.dashboard!.currency}`
+                    ? ` -> ${dashboard().rentDisplayAmountMajor} ${dashboard().currency}`
                     : ''}
                 </p>
                 <div class="balance-breakdown">
                   <article class="stat-card">
                     <span>{props.copy.baseDue ?? ''}</span>
                     <strong>
-                  {props.memberBaseDueMajor(member())} {props.dashboard!.currency}
+                      {props.memberBaseDueMajor(member())} {dashboard().currency}
                     </strong>
                   </article>
                   <article class="stat-card">
                     <span>{props.copy.shareOffset ?? ''}</span>
                     <strong>
-                  {member().purchaseOffsetMajor} {props.dashboard!.currency}
+                      {member().purchaseOffsetMajor} {dashboard().currency}
                     </strong>
                   </article>
                   <article class="stat-card">
                     <span>{props.copy.finalDue ?? ''}</span>
                     <strong>
-                  {member().netDueMajor} {props.dashboard!.currency}
+                      {member().netDueMajor} {dashboard().currency}
                     </strong>
                   </article>
                   <article class="stat-card">
                     <span>{props.copy.paidLabel ?? ''}</span>
                     <strong>
-                  {member().paidMajor} {props.dashboard!.currency}
+                      {member().paidMajor} {dashboard().currency}
                     </strong>
                   </article>
                   <article class="stat-card">
                     <span>{props.copy.remainingLabel ?? ''}</span>
                     <strong>
-                  {member().remainingMajor} {props.dashboard!.currency}
+                      {member().remainingMajor} {dashboard().currency}
                     </strong>
                   </article>
                 </div>
@@ -121,11 +122,11 @@ export function HomeScreen(props: Props) {
             <header>
               <strong>{props.copy.latestActivityTitle ?? ''}</strong>
             </header>
-        {props.dashboard.ledger.length === 0 ? (
+            {dashboard().ledger.length === 0 ? (
               <p>{props.copy.latestActivityEmpty ?? ''}</p>
             ) : (
               <div class="activity-list">
-            <For each={props.dashboard.ledger.slice(0, 3)}>
+                <For each={dashboard().ledger.slice(0, 3)}>
                   {(entry) => (
                     <article class="activity-row">
                       <header>
@@ -143,5 +144,7 @@ export function HomeScreen(props: Props) {
             )}
           </article>
         </div>
+      )}
+    </Show>
   )
 }

apps/miniapp/src/screens/ledger-screen.tsx

@@ -118,15 +118,15 @@ type Props = {
 }
 
 export function LedgerScreen(props: Props) {
-  if (!props.dashboard) {
   return (
+    <Show
+      when={props.dashboard}
+      fallback={
         <div class="ledger-list">
           <p>{props.copy.emptyDashboard ?? ''}</p>
         </div>
-    )
       }
-
+    >
-  return (
       <div class="ledger-list">
         <article class="balance-item">
           <header>
@@ -233,7 +233,11 @@ export function LedgerScreen(props: Props) {
                     <input
                       value={draft.description}
                       onInput={(event) =>
-                      props.onPurchaseDescriptionChange(entry.id, entry, event.currentTarget.value)
+                        props.onPurchaseDescriptionChange(
+                          entry.id,
+                          entry,
+                          event.currentTarget.value
+                        )
                       }
                     />
                   </Field>
@@ -284,7 +288,9 @@ export function LedgerScreen(props: Props) {
                         }
                       >
                         <option value="equal">{props.copy.purchaseSplitEqual ?? ''}</option>
-                      <option value="custom_amounts">{props.copy.purchaseSplitCustom ?? ''}</option>
+                        <option value="custom_amounts">
+                          {props.copy.purchaseSplitCustom ?? ''}
+                        </option>
                       </select>
                     </Field>
                   </div>
@@ -596,5 +602,6 @@ export function LedgerScreen(props: Props) {
           })()}
         </Modal>
       </div>
+    </Show>
   )
 }