New Onboarding Loading States (#9519)

* New Onboarding Loading States

* Pr Feedback

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,12 +26,15 @@
   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
+    try {
       let data = new FormData()
       data.append("name", name.trim())
       data.append("url", url.trim())
@@ -58,6 +62,10 @@
       await store.actions.screens.save(defaultScreenTemplate)
 
       appId = createdApp.instance._id
+    } catch (e) {
+      creationLoading = false
+      throw e
+    }
   }
 
   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}
+  {:else if integrationsLoading || creationLoading}
-    <p>loading...</p>
+    <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;
   }