From e18e941449fa260d64b7ec8179934b9a016b030d Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 8 Aug 2022 12:25:49 +0100
Subject: [PATCH] Optimise loading in overview tab and add transition to dash
 card header

---
 .../src/components/common/DashCard.svelte     |  1 +
 .../overview/_components/OverviewTab.svelte   | 48 +++++++++----------
 2 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/packages/builder/src/components/common/DashCard.svelte b/packages/builder/src/components/common/DashCard.svelte
index d5d9d2ff37..f4e562859f 100644
--- a/packages/builder/src/components/common/DashCard.svelte
+++ b/packages/builder/src/components/common/DashCard.svelte
@@ -37,6 +37,7 @@
     border-bottom: 1px solid var(--spectrum-global-color-gray-300);
     display: flex;
     justify-content: space-between;
+    transition: background-color 130ms ease-out;
   }
   .dash-card-body {
     padding: var(--spacing-xl) calc(var(--spacing-xl) * 2);
diff --git a/packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte b/packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte
index a0067df157..695f48a9e2 100644
--- a/packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte
+++ b/packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte
@@ -27,22 +27,26 @@
     },
   })
 
-  let appEditor, appEditorPromise
+  let appEditor
 
   $: updateAvailable = clientPackage.version !== $store.version
-  $: isPublished = app && app?.status === AppStatus.DEPLOYED
+  $: isPublished = app?.status === AppStatus.DEPLOYED
   $: appEditorId = !app?.updatedBy ? $auth.user._id : app?.updatedBy
   $: appEditorText = appEditor?.firstName || appEditor?.email
   $: fetchAppEditor(appEditorId)
   $: appUsers = $appUsersFetch.rows || []
+  $: appUsersFetch.update({
+    query: {
+      appId: apps.getProdAppID(app.devId),
+    },
+  })
 
   const unpublishApp = () => {
     dispatch("unpublish", app)
   }
 
   async function fetchAppEditor(editorId) {
-    appEditorPromise = users.get(editorId)
-    appEditor = await appEditorPromise
+    appEditor = await users.get(editorId)
   }
 
   const getInitials = user => {
@@ -89,11 +93,9 @@
           </div>
         </div>
       </DashCard>
-      <DashCard title={"Last Edited"} dataCy={"edited-by"}>
-        <div class="last-edited-content">
-          {#await appEditorPromise}
-            <Avatar size="M" initials={"-"} />
-          {:then _}
+      {#if appEditor}
+        <DashCard title={"Last Edited"} dataCy={"edited-by"}>
+          <div class="last-edited-content">
             <div class="updated-by">
               {#if appEditor}
                 <Avatar size="M" initials={getInitials(appEditor)} />
@@ -102,22 +104,20 @@
                 </div>
               {/if}
             </div>
-          {:catch error}
-            <p>Could not fetch user: {error.message}</p>
-          {/await}
-          <div class="last-edit-text">
-            {#if app}
-              {processStringSync(
-                "Last edited {{ duration time 'millisecond' }} ago",
-                {
-                  time:
-                    new Date().getTime() - new Date(app?.updatedAt).getTime(),
-                }
-              )}
-            {/if}
+            <div class="last-edit-text">
+              {#if app}
+                {processStringSync(
+                  "Last edited {{ duration time 'millisecond' }} ago",
+                  {
+                    time:
+                      new Date().getTime() - new Date(app?.updatedAt).getTime(),
+                  }
+                )}
+              {/if}
+            </div>
           </div>
-        </div>
-      </DashCard>
+        </DashCard>
+      {/if}
       <DashCard
         title={"App Version"}
         showIcon={true}