From 3a72eddd78c2159f964a8ab4dbb162faedd34df8 Mon Sep 17 00:00:00 2001
From: kevmodrome <kevin@kevmodro.me>
Date: Wed, 27 May 2020 12:54:53 +0200
Subject: [PATCH] add loading state

---
 packages/builder/src/App.svelte               |   4 +-
 .../components/start/CreateAppModal.svelte    |  93 ++++++---
 .../src/pages/[application]/_reset.svelte     |  92 ++++-----
 packages/builder/src/pages/_layout.svelte     | 187 +++++++++---------
 packages/builder/src/pages/index.svelte       |  13 +-
 5 files changed, 207 insertions(+), 182 deletions(-)

diff --git a/packages/builder/src/App.svelte b/packages/builder/src/App.svelte
index c6b76090f9..000c5c0e16 100644
--- a/packages/builder/src/App.svelte
+++ b/packages/builder/src/App.svelte
@@ -26,6 +26,4 @@
 
 <AppNotification />
 
-<Modal>
-  <Router {routes} />
-</Modal>
+<Router {routes} />
diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte
index f3faee047b..77e31a5823 100644
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/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 { open, close } = getContext("simple-modal")
 
-  const { close } = getContext("simple-modal")
-  
   let name = ""
   let description = ""
-  
+  let loading = false
+
   const createNewApp = async () => {
-    const data = { name, description}    
-    
+    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
-      });
+        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,22 +67,28 @@
       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;
-}
+  .container {
+    position: relative;
+  }
 
   .close-button {
     cursor: pointer;
@@ -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>
diff --git a/packages/builder/src/pages/[application]/_reset.svelte b/packages/builder/src/pages/[application]/_reset.svelte
index e21518f9f0..edaed8c967 100644
--- a/packages/builder/src/pages/[application]/_reset.svelte
+++ b/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,62 +21,63 @@
       await store.setPackage(pkg)
       return pkg
     } else {
-      console.log(pkg)
       throw new Error(pkg)
     }
   }
 </script>
 
-<div class="root">
+<Modal>
+  <div class="root">
 
-  <div class="top-nav">
-    <div class="topleftnav">
-      <button class="home-logo">
-        <img
-          src="/_builder/assets/bb-logo.svg"
-          alt="budibase icon"
-          on:click={() => $goto(`/`)} />
-      </button>
+    <div class="top-nav">
+      <div class="topleftnav">
+        <button class="home-logo">
+          <img
+            src="/_builder/assets/bb-logo.svg"
+            alt="budibase icon"
+            on:click={() => $goto(`/`)} />
+        </button>
 
-      <!-- This gets all indexable subroutes and sticks them in the top nav. -->
-      {#each $layout.children as { path, title }}
-        <span
-          class:active={$isActive(path)}
-          class="topnavitem"
-          on:click={() => $goto(path)}>
-          {title}
-        </span>
-      {/each}
-      <!-- <IconButton icon="home"
+        <!-- This gets all indexable subroutes and sticks them in the top nav. -->
+        {#each $layout.children as { path, title }}
+          <span
+            class:active={$isActive(path)}
+            class="topnavitem"
+            on:click={() => $goto(path)}>
+            {title}
+          </span>
+        {/each}
+        <!-- <IconButton icon="home"
                       color="var(--slate)"
                       hoverColor="var(--secondary75)"/> -->
+      </div>
+      <div class="toprightnav">
+        <span
+          class:active={$isActive(`/settings`)}
+          class="topnavitemright"
+          on:click={() => $goto(`/settings`)}>
+          <SettingsIcon />
+        </span>
+        <span
+          class:active={false}
+          class="topnavitemright"
+          on:click={() => (location = `/${application}`)}>
+          <PreviewIcon />
+        </span>
+      </div>
     </div>
-    <div class="toprightnav">
-      <span
-        class:active={$isActive(`/settings`)}
-        class="topnavitemright"
-        on:click={() => $goto(`/settings`)}>
-        <SettingsIcon />
-      </span>
-      <span
-        class:active={false}
-        class="topnavitemright"
-        on:click={() => (location = `/${application}`)}>
-        <PreviewIcon />
-      </span>
-    </div>
+
+    {#await promise}
+      <!-- This should probably be some kind of loading state? -->
+      <div />
+    {:then}
+      <slot />
+    {:catch error}
+      <p>Something went wrong: {error.message}</p>
+    {/await}
+
   </div>
-
-  {#await promise}
-    <!-- This should probably be some kind of loading state? -->
-    <div />
-  {:then}
-    <slot />
-  {:catch error}
-    <p>Something went wrong: {error.message}</p>
-  {/await}
-
-</div>
+</Modal>
 
 <style>
   .root {
diff --git a/packages/builder/src/pages/_layout.svelte b/packages/builder/src/pages/_layout.svelte
index 98bae8aa7d..363efcf619 100644
--- a/packages/builder/src/pages/_layout.svelte
+++ b/packages/builder/src/pages/_layout.svelte
@@ -1,4 +1,5 @@
 <script>
+  import Modal from "svelte-simple-modal"
   import {
     SettingsIcon,
     AppsIcon,
@@ -14,104 +15,106 @@
   } from "components/common/Icons/"
 </script>
 
-<div class="root">
-  <div class="ui-nav">
-    <div class="home-logo">
-      <img src="/_builder/assets/bb-logo.svg" alt="Budibase icon" />
-    </div>
-
-    <div class="nav-section">
-      <div class="nav-section-title">Build</div>
-      <div class="nav-item-home">
-        <span class="nav-item-icon">
-          <AppsIcon />
-        </span>
-        <div class="nav-item-title">Apps</div>
+<Modal>
+  <div class="root">
+    <div class="ui-nav">
+      <div class="home-logo">
+        <img src="/_builder/assets/bb-logo.svg" alt="Budibase icon" />
       </div>
-      <div class="nav-item">
-        <span class="nav-item-icon">
-          <SettingsIcon />
-        </span>
-        <div class="nav-item-title">Settings</div>
+
+      <div class="nav-section">
+        <div class="nav-section-title">Build</div>
+        <div class="nav-item-home">
+          <span class="nav-item-icon">
+            <AppsIcon />
+          </span>
+          <div class="nav-item-title">Apps</div>
+        </div>
+        <div class="nav-item">
+          <span class="nav-item-icon">
+            <SettingsIcon />
+          </span>
+          <div class="nav-item-title">Settings</div>
+        </div>
+        <a href="https://budibase.con/login" target="_blank" class="nav-item">
+          <span class="nav-item-icon">
+            <UpdatesIcon />
+          </span>
+          <div class="nav-item-title">Updates</div>
+        </a>
+        <a href="https://budibase.con/login" target="_blank" class="nav-item">
+          <span class="nav-item-icon">
+            <HostingIcon />
+          </span>
+          <div class="nav-item-title">Hosting</div>
+        </a>
+      </div>
+
+      <div class="nav-section">
+        <div class="nav-section-title">Learn</div>
+        <a href="https://docs.budibase.com/" target="_blank" class="nav-item">
+          <span class="nav-item-icon">
+            <DocumentationIcon />
+          </span>
+          <div class="nav-item-title">Documentation</div>
+        </a>
+        <a
+          href="https://docs.budibase.com/tutorial/quick-start"
+          target="_blank"
+          class="nav-item">
+          <span class="nav-item-icon">
+            <TutorialsIcon />
+          </span>
+          <div class="nav-item-title">Tutorials</div>
+        </a>
+        <a href="https://forum.budibase.com/" target="_blank" class="nav-item">
+          <span class="nav-item-icon">
+            <CommunityIcon />
+          </span>
+          <div class="nav-item-title">Community</div>
+        </a>
+      </div>
+
+      <div class="nav-section">
+        <div class="nav-section-title">Contact</div>
+        <a
+          href="https://github.com/Budibase/budibase/blob/master/CONTRIBUTING.md"
+          target="_blank"
+          class="nav-item">
+          <span class="nav-item-icon">
+            <ContributionIcon />
+          </span>
+          <div class="nav-item-title">Contribute to our product</div>
+        </a>
+        <a
+          href="https://github.com/Budibase/budibase/issues"
+          target="_blank"
+          class="nav-item">
+          <span class="nav-item-icon">
+            <BugIcon />
+          </span>
+          <div class="nav-item-title">Report bug</div>
+        </a>
+        <a href="mailto:support@budibase.com" target="_blank" class="nav-item">
+          <span class="nav-item-icon">
+            <EmailIcon />
+          </span>
+          <div class="nav-item-title">Email</div>
+        </a>
+        <a href="https://twitter.com/budibase" target="_blank" class="nav-item">
+          <span class="nav-item-icon">
+            <TwitterIcon />
+          </span>
+          <div class="nav-item-title">Twitter</div>
+        </a>
       </div>
-      <a href="https://budibase.con/login" target="_blank" class="nav-item">
-        <span class="nav-item-icon">
-          <UpdatesIcon />
-        </span>
-        <div class="nav-item-title">Updates</div>
-      </a>
-      <a href="https://budibase.con/login" target="_blank" class="nav-item">
-        <span class="nav-item-icon">
-          <HostingIcon />
-        </span>
-        <div class="nav-item-title">Hosting</div>
-      </a>
     </div>
 
-    <div class="nav-section">
-      <div class="nav-section-title">Learn</div>
-      <a href="https://docs.budibase.com/" target="_blank" class="nav-item">
-        <span class="nav-item-icon">
-          <DocumentationIcon />
-        </span>
-        <div class="nav-item-title">Documentation</div>
-      </a>
-      <a
-        href="https://docs.budibase.com/tutorial/quick-start"
-        target="_blank"
-        class="nav-item">
-        <span class="nav-item-icon">
-          <TutorialsIcon />
-        </span>
-        <div class="nav-item-title">Tutorials</div>
-      </a>
-      <a href="https://forum.budibase.com/" target="_blank" class="nav-item">
-        <span class="nav-item-icon">
-          <CommunityIcon />
-        </span>
-        <div class="nav-item-title">Community</div>
-      </a>
-    </div>
-
-    <div class="nav-section">
-      <div class="nav-section-title">Contact</div>
-      <a
-        href="https://github.com/Budibase/budibase/blob/master/CONTRIBUTING.md"
-        target="_blank"
-        class="nav-item">
-        <span class="nav-item-icon">
-          <ContributionIcon />
-        </span>
-        <div class="nav-item-title">Contribute to our product</div>
-      </a>
-      <a
-        href="https://github.com/Budibase/budibase/issues"
-        target="_blank"
-        class="nav-item">
-        <span class="nav-item-icon">
-          <BugIcon />
-        </span>
-        <div class="nav-item-title">Report bug</div>
-      </a>
-      <a href="mailto:support@budibase.com" target="_blank" class="nav-item">
-        <span class="nav-item-icon">
-          <EmailIcon />
-        </span>
-        <div class="nav-item-title">Email</div>
-      </a>
-      <a href="https://twitter.com/budibase" target="_blank" class="nav-item">
-        <span class="nav-item-icon">
-          <TwitterIcon />
-        </span>
-        <div class="nav-item-title">Twitter</div>
-      </a>
+    <div class="main">
+      <slot />
     </div>
   </div>
-
-  <div class="main">
-    <slot />
-  </div>
-</div>
+</Modal>
 
 <style>
   .root {
diff --git a/packages/builder/src/pages/index.svelte b/packages/builder/src/pages/index.svelte
index 1e6b46355e..97df61ebb0 100644
--- a/packages/builder/src/pages/index.svelte
+++ b/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,
       }
     )
   }