add loading state

packages/builder/src/App.svelte

@@ -26,6 +26,4 @@
 
 <AppNotification />
 
-<Modal>
 <Router {routes} />
-</Modal>

packages/builder/src/components/start/CreateAppModal.svelte

@@ -1,30 +1,36 @@
 <script>
+  import Spinner from "components/common/Spinner.svelte"
   import { Input, TextArea, Button } from "@budibase/bbui"
+  import { goto } from "@sveltech/routify"
   import { AppsIcon, InfoIcon, CloseIcon } from "components/common/Icons/"
   import { getContext } from "svelte"
-  export let onCancel = () => {}
-  export let onOkay = () => {}
+  import { fade } from "svelte/transition"
 
-  const { close } = getContext("simple-modal")
+  const { open, close } = getContext("simple-modal")
 
   let name = ""
   let description = ""
+  let loading = false
 
   const createNewApp = async () => {
     const data = { name, description }
-    
+    loading = true
     try {
-      const response = await fetch('/api/applications', {
-        method: 'POST', // *GET, POST, PUT, DELETE, etc.
-        credentials: 'same-origin', // include, *same-origin, omit
+      const response = await fetch("/api/applications", {
+        method: "POST", // *GET, POST, PUT, DELETE, etc.
+        credentials: "same-origin", // include, *same-origin, omit
         headers: {
-          'Content-Type': 'application/json'
+          "Content-Type": "application/json",
           // 'Content-Type': 'application/x-www-form-urlencoded',
         },
-        body: JSON.stringify(data) // body data type must match "Content-Type" header
-      });
-    } catch (error) {
+        body: JSON.stringify(data), // body data type must match "Content-Type" header
+      })
 
+      const res = await response.json()
+
+      $goto(`./${res._id}`)
+    } catch (error) {
+      console.error(error)
     }
   }
 
@@ -32,23 +38,28 @@
   let onChange = () => {}
 
   function _onCancel() {
-    onCancel()
     close()
   }
 
   async function _onOkay() {
     await createNewApp()
-    close()
   }
 </script>
 
 <div class="container">
   <div class="body">
     <div class="heading">
-      <span class="icon"><AppsIcon /></span>
+      <span class="icon">
+        <AppsIcon />
+      </span>
       <h3>Create new web app</h3>
     </div>
-    <Input name="name" label="Name" placeholder="Enter application name" on:change={(e) => name = e.target.value} on:input={(e) => name = e.target.value} />
+    <Input
+      name="name"
+      label="Name"
+      placeholder="Enter application name"
+      on:change={e => (name = e.target.value)}
+      on:input={e => (name = e.target.value)} />
     <TextArea
       bind:value={description}
       name="description"
@@ -56,19 +67,25 @@
       placeholder="Describe your application" />
   </div>
   <div class="footer">
-    <a href="./#" class="info"><InfoIcon />How to get started</a>
-    <Button outline thin on:click={_onCancel}>
-      Cancel
-    </Button>
-    <Button primary thin on:click={_onOkay}>
-      Save
-    </Button>
+    <a href="./#" class="info">
+      <InfoIcon />
+      How to get started
+    </a>
+    <Button outline thin on:click={_onCancel}>Cancel</Button>
+    <Button primary thin on:click={_onOkay}>Save</Button>
   </div>
-  <div class="close-button" on:click={_onCancel}><CloseIcon /></div>
+  <div class="close-button" on:click={_onCancel}>
+    <CloseIcon />
+  </div>
+  {#if loading}
+    <div in:fade class="spinner-container">
+      <Spinner />
+      <span class="spinner-text">Creating your app...</span>
+    </div>
+  {/if}
 </div>
 
 <style>
-
   .container {
     position: relative;
   }
@@ -130,4 +147,20 @@
     border-bottom-right-radius: 50px;
     background-color: var(--grey-light);
   }
+  .spinner-container {
+    background: white;
+    position: absolute;
+    border-radius: 5px;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    display: grid;
+    justify-items: center;
+    align-content: center;
+    grid-gap: 50px;
+  }
+  .spinner-text {
+    font-size: 2em;
+  }
 </style>

packages/builder/src/pages/[application]/_reset.svelte

@@ -1,4 +1,5 @@
 <script>
+  import Modal from "svelte-simple-modal"
   import { store } from "builderStore"
 
   import { fade } from "svelte/transition"
@@ -20,12 +21,12 @@
       await store.setPackage(pkg)
       return pkg
     } else {
-      console.log(pkg)
       throw new Error(pkg)
     }
   }
 </script>
 
+<Modal>
   <div class="root">
 
     <div class="top-nav">
@@ -76,6 +77,7 @@
     {/await}
 
   </div>
+</Modal>
 
 <style>
   .root {

packages/builder/src/pages/_layout.svelte

@@ -1,4 +1,5 @@
 <script>
+  import Modal from "svelte-simple-modal"
   import {
     SettingsIcon,
     AppsIcon,
@@ -14,6 +15,7 @@
   } from "components/common/Icons/"
 </script>
 
+<Modal>
   <div class="root">
     <div class="ui-nav">
       <div class="home-logo">
@@ -112,6 +114,7 @@
       <slot />
     </div>
   </div>
+</Modal>
 
 <style>
   .root {

packages/builder/src/pages/index.svelte

@@ -24,15 +24,6 @@
 
   // Handle create app modal
   const { open } = getContext("simple-modal")
-  const onCancel = text => {
-    name = ""
-    status = -1
-  }
-
-  const onOkay = text => {
-    name = text
-    status = 1
-  }
 
   const showCreateAppModal = () => {
     open(
@@ -40,15 +31,13 @@
       {
         message: "What is your name?",
         hasForm: true,
-        onCancel,
-        onOkay,
       },
       {
         closeButton: false,
         closeOnEsc: false,
         closeOnOuterClick: false,
         styleContent: { padding: 0 },
-        closeOnOuterClick: true
+        closeOnOuterClick: true,
       }
     )
   }