Fix loading states and issues with overview tab

packages/builder/src/pages/builder/portal/overview/[application]/index.svelte

@@ -34,15 +34,19 @@
 
   export let application
 
-  let promise = getPackage()
   let loaded = false
   let deletionModal
   let unpublishModal
   let appName = ""
+  let deployments = []
 
   // App
   $: filteredApps = $apps.filter(app => app.devId === application)
   $: selectedApp = filteredApps?.length ? filteredApps[0] : null
+  $: loaded && !selectedApp && backToAppList()
+  $: isPublished =
+    selectedApp?.status === AppStatus.DEPLOYED && latestDeployments?.length > 0
+  $: appUrl = `${window.origin}/app${selectedApp?.url}`
 
   // Locking
   $: lockedBy = selectedApp?.lockedBy
@@ -54,18 +58,11 @@
   }`
 
   // App deployments
-  $: deployments = []
   $: latestDeployments = deployments
-    .filter(
-      deployment =>
-        deployment.status === "SUCCESS" && application === deployment.appId
-    )
+    .filter(x => x.status === "SUCCESS" && application === x.appId)
     .sort((a, b) => a.updatedAt > b.updatedAt)
 
-  $: isPublished =
-    selectedApp?.status === AppStatus.DEPLOYED && latestDeployments?.length > 0
-
-  $: appUrl = `${window.origin}/app${selectedApp?.url}`
+  // Tabs
   $: tabs = ["Overview", "Automation History", "Backups", "Settings", "Access"]
   $: selectedTab = "Overview"
 
@@ -83,17 +80,6 @@
     }
   }
 
-  async function getPackage() {
-    try {
-      const pkg = await API.fetchAppPackage(application)
-      await store.actions.initialise(pkg)
-      loaded = true
-      return pkg
-    } catch (error) {
-      notifications.error(`Error initialising app: ${error?.message}`)
-    }
-  }
-
   const reviewPendingDeployments = (deployments, newDeployments) => {
     if (deployments.length > 0) {
       const pending = checkIncomingDeploymentStatus(deployments, newDeployments)
@@ -185,35 +171,46 @@
     appName = null
   }
 
-  onDestroy(() => {
-    store.actions.reset()
-  })
-
   onMount(async () => {
     const params = new URLSearchParams(window.location.search)
     if (params.get("tab")) {
       selectedTab = params.get("tab")
     }
+
+    // Check app exists
     try {
+      const pkg = await API.fetchAppPackage(application)
+      await store.actions.initialise(pkg)
+    } catch (error) {
+      // Swallow
+      backToAppList()
+    }
+
+    // Initialise application
+    try {
+      await API.syncApp(application)
+      deployments = await fetchDeployments()
       if (!apps.length) {
         await apps.load()
       }
-      await API.syncApp(application)
-      deployments = await fetchDeployments()
     } catch (error) {
       notifications.error("Error initialising app overview")
     }
+    loaded = true
+  })
+
+  onDestroy(() => {
+    store.actions.reset()
   })
 </script>
 
-{#if selectedApp}
-  <span class="overview-wrap">
+<span class="overview-wrap">
   <Page wide noPadding>
-      {#await promise}
+    {#if !loaded || !selectedApp}
       <div class="loading">
         <ProgressCircle size="XL" />
       </div>
-      {:then _}
+    {:else}
       <Layout paddingX="XXL" paddingY="XL" gap="L">
         <span class="page-header" class:loaded>
           <ActionButton secondary icon={"ArrowLeft"} on:click={backToAppList}>
@@ -287,10 +284,7 @@
                 </MenuItem>
               {/if}
               {#if !isPublished}
-                  <MenuItem
-                    on:click={() => deleteApp(selectedApp)}
-                    icon="Delete"
-                  >
+                <MenuItem on:click={() => deleteApp(selectedApp)} icon="Delete">
                   Delete
                 </MenuItem>
               {/if}
@@ -358,12 +352,9 @@
       >
         Are you sure you want to unpublish the app <b>{selectedApp?.name}</b>?
       </ConfirmDialog>
-      {:catch error}
-        <p>Something went wrong: {error.message}</p>
-      {/await}
+    {/if}
   </Page>
-  </span>
-{/if}
+</span>
 
 <style>
   .app-url {

packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte

@@ -6,17 +6,26 @@
   import clientPackage from "@budibase/client/package.json"
   import { processStringSync } from "@budibase/string-templates"
   import { users, auth, apps } from "stores/portal"
-  import { createEventDispatcher, onMount } from "svelte"
+  import { createEventDispatcher } from "svelte"
+  import { fetchData } from "@budibase/frontend-core"
+  import { API } from "api"
 
   export let app
   export let deployments
   export let navigateTab
-  let userCount
-  const dispatch = createEventDispatcher()
 
-  const unpublishApp = () => {
-    dispatch("unpublish", app)
-  }
+  const dispatch = createEventDispatcher()
+  const appUsersFetch = fetchData({
+    API,
+    datasource: {
+      type: "user",
+    },
+    options: {
+      query: {
+        appId: apps.getProdAppID(app.devId),
+      },
+    },
+  })
 
   let appEditor, appEditorPromise
 
@@ -25,6 +34,11 @@
   $: appEditorId = !app?.updatedBy ? $auth.user._id : app?.updatedBy
   $: appEditorText = appEditor?.firstName || appEditor?.email
   $: fetchAppEditor(appEditorId)
+  $: appUsers = $appUsersFetch.rows || []
+
+  const unpublishApp = () => {
+    dispatch("unpublish", app)
+  }
 
   async function fetchAppEditor(editorId) {
     appEditorPromise = users.get(editorId)
@@ -36,16 +50,8 @@
     initials += user.firstName ? user.firstName[0] : ""
     initials += user.lastName ? user.lastName[0] : ""
 
-    return initials == "" ? user.email[0] : initials
+    return initials === "" ? user.email[0] : initials
   }
-
-  onMount(async () => {
-    let resp = await users.getUserCountByApp({
-      appId: apps.getProdAppID(app.devId),
-    })
-    userCount = resp.userCount
-    await users.search({ appId: apps.getProdAppID(app.devId), limit: 4 })
-  })
 </script>
 
 <div class="overview-tab">
@@ -141,6 +147,7 @@
           {/if}
         </div>
       </DashCard>
+      {#if $appUsersFetch.loaded}
         <DashCard
           title={"Access"}
           showIcon={true}
@@ -150,17 +157,18 @@
           dataCy={"access"}
         >
           <div class="last-edited-content">
-          {#if $users?.data?.length}
+            {#if appUsers.length}
               <Layout noPadding gap="S">
                 <div class="users-tab">
-                {#each $users?.data as user}
+                  {#each appUsers.slice(0, 4) as user}
                     <Avatar size="M" initials={getInitials(user)} />
                   {/each}
                 </div>
 
                 <div class="users-text">
-                {userCount}
-                {userCount > 1 ? `users have` : `user has`} access to this app
+                  {appUsers.length}
+                  {appUsers.length > 1 ? `users have` : `user has`} access to this
+                  app
                 </div>
               </Layout>
             {:else}
@@ -173,6 +181,7 @@
             {/if}
           </div>
         </DashCard>
+      {/if}
     </div>
     {#if false}
       <div class="bottom">
@@ -229,7 +238,7 @@
 
   .users-tab {
     display: flex;
-    gap: var(--spacing-m);
+    gap: var(--spacing-s);
   }
 
   .users-text {