From 7a443f6a5d166693368e7f952f534ae157c10bef Mon Sep 17 00:00:00 2001
From: Gerard Burns <Ghrehh@users.noreply.github.com>
Date: Tue, 7 Feb 2023 14:47:46 +0000
Subject: [PATCH] New Onboarding Loading States (#9519)

* New Onboarding Loading States

* Pr Feedback
---
 .../portal/apps/onboarding/index.svelte       | 72 ++++++++++++-------
 1 file changed, 45 insertions(+), 27 deletions(-)

diff --git a/packages/builder/src/pages/builder/portal/apps/onboarding/index.svelte b/packages/builder/src/pages/builder/portal/apps/onboarding/index.svelte
index b8e64ccbab..1fa64526da 100644
--- a/packages/builder/src/pages/builder/portal/apps/onboarding/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/onboarding/index.svelte
@@ -16,6 +16,7 @@
   import CreateTableModal from "components/backend/TableNavigator/modals/CreateTableModal.svelte"
   import createFromScratchScreen from "builderStore/store/screenTemplates/createFromScratchScreen"
   import { Roles } from "constants/backend"
+  import Spinner from "components/common/Spinner.svelte"
 
   let name = "My first app"
   let url = "my-first-app"
@@ -25,39 +26,46 @@
   let plusIntegrations = {}
   let integrationsLoading = true
   $: getIntegrations()
+  let creationLoading = false
 
   let uploadModal
 
   const createApp = async useSampleData => {
+    creationLoading = true
     // Create form data to create app
     // This is form based and not JSON
-    let data = new FormData()
-    data.append("name", name.trim())
-    data.append("url", url.trim())
-    data.append("useTemplate", false)
+    try {
+      let data = new FormData()
+      data.append("name", name.trim())
+      data.append("url", url.trim())
+      data.append("useTemplate", false)
 
-    if (useSampleData) {
-      data.append("sampleData", true)
+      if (useSampleData) {
+        data.append("sampleData", true)
+      }
+
+      const createdApp = await API.createApp(data)
+
+      // Select Correct Application/DB in prep for creating user
+      const pkg = await API.fetchAppPackage(createdApp.instance._id)
+      await store.actions.initialise(pkg)
+      await automationStore.actions.fetch()
+      // Update checklist - in case first app
+      await admin.init()
+
+      // Create user
+      await auth.setInitInfo({})
+
+      let defaultScreenTemplate = createFromScratchScreen.create()
+      defaultScreenTemplate.routing.route = "/home"
+      defaultScreenTemplate.routing.roldId = Roles.BASIC
+      await store.actions.screens.save(defaultScreenTemplate)
+
+      appId = createdApp.instance._id
+    } catch (e) {
+      creationLoading = false
+      throw e
     }
-
-    const createdApp = await API.createApp(data)
-
-    // Select Correct Application/DB in prep for creating user
-    const pkg = await API.fetchAppPackage(createdApp.instance._id)
-    await store.actions.initialise(pkg)
-    await automationStore.actions.fetch()
-    // Update checklist - in case first app
-    await admin.init()
-
-    // Create user
-    await auth.setInitInfo({})
-
-    let defaultScreenTemplate = createFromScratchScreen.create()
-    defaultScreenTemplate.routing.route = "/home"
-    defaultScreenTemplate.routing.roldId = Roles.BASIC
-    await store.actions.screens.save(defaultScreenTemplate)
-
-    appId = createdApp.instance._id
   }
 
   const getIntegrations = async () => {
@@ -102,6 +110,7 @@
       goToApp()
     } catch (e) {
       console.log(e)
+      creationLoading = false
       notifications.error("There was a problem creating your app")
     }
   }
@@ -118,8 +127,10 @@
 <SplitPage>
   {#if stage === "name"}
     <NamePanel bind:name bind:url onNext={() => (stage = "data")} />
-  {:else if integrationsLoading}
-    <p>loading...</p>
+  {:else if integrationsLoading || creationLoading}
+    <div class="spinner">
+      <Spinner />
+    </div>
   {:else if stage === "data"}
     <DataPanel onBack={() => (stage = "name")}>
       <div class="dataButton">
@@ -175,6 +186,13 @@
 </SplitPage>
 
 <style>
+  .spinner {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 400px;
+  }
+
   .dataButton {
     margin-bottom: 12px;
   }