Fix building loading settings modal before app package call finishes

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

@@ -45,65 +45,71 @@
   }
 </script>
 
-<div class="root">
+{#await promise}
-  <div class="top-nav">
+  <!-- This should probably be some kind of loading state? -->
-    <div class="topleftnav">
+  <div class="loading" />
-      <button class="home-logo">
+{:then _}
-        <img
+  <div class="root">
-          src={Logo}
+    <div class="top-nav">
-          alt="budibase icon"
+      <div class="topleftnav">
-          on:click={() => $goto(`/builder/`)} />
+        <button class="home-logo">
-      </button>
+          <img
-
+            src={Logo}
-      <!-- This gets all indexable subroutes and sticks them in the top nav. -->
+            alt="budibase icon"
-      {#each $layout.children as { path, title }}
+            on:click={() => $goto(`/builder/`)} />
-        <span
+        </button>
-          class:active={$isActive(path)}
+
-          class="topnavitem"
+        <!-- This gets all indexable subroutes and sticks them in the top nav. -->
-          on:click={topItemNavigate(path)}>
+        {#each $layout.children as { path, title }}
-          {title}
+          <span
-        </span>
+            class:active={$isActive(path)}
-      {/each}
+            class="topnavitem"
-    </div>
+            on:click={topItemNavigate(path)}>
-    <div class="toprightnav">
+            {title}
-      <ThemeEditorDropdown />
+          </span>
-      <FeedbackNavLink />
+        {/each}
-      <div class="topnavitemright">
+      </div>
-        <a
+      <div class="toprightnav">
-          target="_blank"
+        <ThemeEditorDropdown />
-          href="https://github.com/Budibase/budibase/discussions">
+        <FeedbackNavLink />
-          <i class="ri-github-fill" />
+        <div class="topnavitemright">
-        </a>
+          <a
+            target="_blank"
+            href="https://github.com/Budibase/budibase/discussions">
+            <i class="ri-github-fill" />
+          </a>
+        </div>
+        <SettingsLink />
+        <Button
+          secondary
+          on:click={() => {
+            window.open(`/${application}`)
+          }}>
+          Preview
+        </Button>
       </div>
-      <SettingsLink />
+    </div>
+    <div class="beta">
       <Button
         secondary
-        on:click={() => {
+        href="https://github.com/Budibase/budibase/discussions/categories/ideas">
-          window.open(`/${application}`)
+        Request feature
-        }}>
-        Preview
       </Button>
     </div>
-  </div>
-  <div class="beta">
-    <Button
-      secondary
-      href="https://github.com/Budibase/budibase/discussions/categories/ideas">
-      Request feature
-    </Button>
-  </div>
-
-  {#await promise}
-    <!-- This should probably be some kind of loading state? -->
-    <div />
-  {:then _}
     <slot />
-  {:catch error}
+  </div>
-    <p>Something went wrong: {error.message}</p>
+{:catch error}
-  {/await}
+  <p>Something went wrong: {error.message}</p>
-</div>
+{/await}
 
 <style>
+  .loading {
+    min-height: 100%;
+    height: 100%;
+    width: 100%;
+    background: var(--background);
+  }
+
   .root {
     min-height: 100%;
     height: 100%;