diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 0dfd385a8a..f8a245b4f3 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -119,140 +119,142 @@
   {/if}
 </svelte:head>
 
-<div
-  id="spectrum-root"
-  lang="en"
-  dir="ltr"
-  class="spectrum spectrum--medium {$themeStore.baseTheme} {$themeStore.theme}"
-  class:builder={$builderStore.inBuilder}
-  class:show={fontsLoaded && dataLoaded}
->
-  {#if $environmentStore.maintenance.length > 0}
-    <MaintenanceScreen maintenanceList={$environmentStore.maintenance} />
-  {:else}
-    <DeviceBindingsProvider>
-      <UserBindingsProvider>
-        <StateBindingsProvider>
-          <RowSelectionProvider>
-            <QueryParamsProvider>
-              <SnippetsProvider>
-                <!-- Settings bar can be rendered outside of device preview -->
-                <!-- Key block needs to be outside the if statement or it breaks -->
-                {#key $builderStore.selectedComponentId}
-                  {#if $builderStore.inBuilder}
-                    <SettingsBar />
-                  {/if}
-                {/key}
-
-                <!-- Clip boundary for selection indicators -->
-                <div
-                  id="clip-root"
-                  class:preview={$builderStore.inBuilder}
-                  class:tablet-preview={$builderStore.previewDevice ===
-                    "tablet"}
-                  class:mobile-preview={$builderStore.previewDevice ===
-                    "mobile"}
-                >
-                  <!-- Actual app -->
-                  <div id="app-root">
-                    {#if showDevTools}
-                      <DevToolsHeader />
+{#if dataLoaded}
+  <div
+    id="spectrum-root"
+    lang="en"
+    dir="ltr"
+    class="spectrum spectrum--medium {$themeStore.baseTheme} {$themeStore.theme}"
+    class:builder={$builderStore.inBuilder}
+    class:show={fontsLoaded && dataLoaded}
+  >
+    {#if $environmentStore.maintenance.length > 0}
+      <MaintenanceScreen maintenanceList={$environmentStore.maintenance} />
+    {:else}
+      <DeviceBindingsProvider>
+        <UserBindingsProvider>
+          <StateBindingsProvider>
+            <RowSelectionProvider>
+              <QueryParamsProvider>
+                <SnippetsProvider>
+                  <!-- Settings bar can be rendered outside of device preview -->
+                  <!-- Key block needs to be outside the if statement or it breaks -->
+                  {#key $builderStore.selectedComponentId}
+                    {#if $builderStore.inBuilder}
+                      <SettingsBar />
                     {/if}
+                  {/key}
 
-                    <div id="app-body">
-                      {#if permissionError}
-                        <div class="error">
-                          <Layout justifyItems="center" gap="S">
-                            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-                            {@html ErrorSVG}
-                            <Heading size="L">
-                              You don't have permission to use this app
-                            </Heading>
-                            <Body size="S">
-                              Ask your administrator to grant you access
-                            </Body>
-                          </Layout>
-                        </div>
-                      {:else if !$screenStore.activeLayout}
-                        <div class="error">
-                          <Layout justifyItems="center" gap="S">
-                            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-                            {@html ErrorSVG}
-                            <Heading size="L">
-                              Something went wrong rendering your app
-                            </Heading>
-                            <Body size="S">
-                              Get in touch with support if this issue persists
-                            </Body>
-                          </Layout>
-                        </div>
-                      {:else if embedNoScreens}
-                        <div class="error">
-                          <Layout justifyItems="center" gap="S">
-                            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-                            {@html ErrorSVG}
-                            <Heading size="L">
-                              This Budibase app is not publicly accessible
-                            </Heading>
-                          </Layout>
-                        </div>
-                      {:else}
-                        <CustomThemeWrapper>
-                          {#key $screenStore.activeLayout._id}
-                            <Component
-                              isLayout
-                              instance={$screenStore.activeLayout.props}
-                            />
-                          {/key}
+                  <!-- Clip boundary for selection indicators -->
+                  <div
+                    id="clip-root"
+                    class:preview={$builderStore.inBuilder}
+                    class:tablet-preview={$builderStore.previewDevice ===
+                      "tablet"}
+                    class:mobile-preview={$builderStore.previewDevice ===
+                      "mobile"}
+                  >
+                    <!-- Actual app -->
+                    <div id="app-root">
+                      {#if showDevTools}
+                        <DevToolsHeader />
+                      {/if}
 
-                          <!--
+                      <div id="app-body">
+                        {#if permissionError}
+                          <div class="error">
+                            <Layout justifyItems="center" gap="S">
+                              <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                              {@html ErrorSVG}
+                              <Heading size="L">
+                                You don't have permission to use this app
+                              </Heading>
+                              <Body size="S">
+                                Ask your administrator to grant you access
+                              </Body>
+                            </Layout>
+                          </div>
+                        {:else if !$screenStore.activeLayout}
+                          <div class="error">
+                            <Layout justifyItems="center" gap="S">
+                              <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                              {@html ErrorSVG}
+                              <Heading size="L">
+                                Something went wrong rendering your app
+                              </Heading>
+                              <Body size="S">
+                                Get in touch with support if this issue persists
+                              </Body>
+                            </Layout>
+                          </div>
+                        {:else if embedNoScreens}
+                          <div class="error">
+                            <Layout justifyItems="center" gap="S">
+                              <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                              {@html ErrorSVG}
+                              <Heading size="L">
+                                This Budibase app is not publicly accessible
+                              </Heading>
+                            </Layout>
+                          </div>
+                        {:else}
+                          <CustomThemeWrapper>
+                            {#key $screenStore.activeLayout._id}
+                              <Component
+                                isLayout
+                                instance={$screenStore.activeLayout.props}
+                              />
+                            {/key}
+
+                            <!--
                         Flatpickr needs to be inside the theme wrapper.
                         It also needs its own container because otherwise it hijacks
                         key events on the whole page. It is painful to work with.
                       -->
-                          <div id="flatpickr-root" />
+                            <div id="flatpickr-root" />
 
-                          <!-- Modal container to ensure they sit on top -->
-                          <div class="modal-container" />
+                            <!-- Modal container to ensure they sit on top -->
+                            <div class="modal-container" />
 
-                          <!-- Layers on top of app -->
-                          <NotificationDisplay />
-                          <ConfirmationDisplay />
-                          <PeekScreenDisplay />
-                        </CustomThemeWrapper>
-                      {/if}
+                            <!-- Layers on top of app -->
+                            <NotificationDisplay />
+                            <ConfirmationDisplay />
+                            <PeekScreenDisplay />
+                          </CustomThemeWrapper>
+                        {/if}
 
-                      {#if showDevTools}
-                        <DevTools />
+                        {#if showDevTools}
+                          <DevTools />
+                        {/if}
+                      </div>
+
+                      {#if !$builderStore.inBuilder && $featuresStore.logoEnabled}
+                        <FreeFooter />
                       {/if}
                     </div>
 
-                    {#if !$builderStore.inBuilder && $featuresStore.logoEnabled}
-                      <FreeFooter />
+                    <!-- Preview and dev tools utilities  -->
+                    {#if $appStore.isDevApp}
+                      <SelectionIndicator />
+                    {/if}
+                    {#if $builderStore.inBuilder || $devToolsStore.allowSelection}
+                      <HoverIndicator />
+                    {/if}
+                    {#if $builderStore.inBuilder}
+                      <DNDHandler />
+                      <GridDNDHandler />
                     {/if}
                   </div>
-
-                  <!-- Preview and dev tools utilities  -->
-                  {#if $appStore.isDevApp}
-                    <SelectionIndicator />
-                  {/if}
-                  {#if $builderStore.inBuilder || $devToolsStore.allowSelection}
-                    <HoverIndicator />
-                  {/if}
-                  {#if $builderStore.inBuilder}
-                    <DNDHandler />
-                    <GridDNDHandler />
-                  {/if}
-                </div>
-              </SnippetsProvider>
-            </QueryParamsProvider>
-          </RowSelectionProvider>
-        </StateBindingsProvider>
-      </UserBindingsProvider>
-    </DeviceBindingsProvider>
-  {/if}
-</div>
-<KeyboardManager />
+                </SnippetsProvider>
+              </QueryParamsProvider>
+            </RowSelectionProvider>
+          </StateBindingsProvider>
+        </UserBindingsProvider>
+      </DeviceBindingsProvider>
+    {/if}
+  </div>
+  <KeyboardManager />
+{/if}
 
 <style>
   #spectrum-root {
