From d9033b2636476e943a19f786532583f004586671 Mon Sep 17 00:00:00 2001
From: Gerard Burns <Ghrehh@users.noreply.github.com>
Date: Mon, 25 Mar 2024 16:39:42 +0000
Subject: [PATCH] Un-revert Skeleton Loader PR (#13180)

* wip

* wip

* wip

* client versions init

* wip

* wip

* wip

* wip

* wip

* linting

* remove log

* comment client version script

* lint

* skeleton loader type fix

* fix types

* lint

* fix types again

* fix manifest not being served locally

* remove preinstalled old client version

* add constant for dev client version

* linting

* Dean PR Feedback

* linting

* pr feedback

* wip

* wip

* clientVersions empty array

* delete from git

* empty array again

* fix tests

* pr feedback

---------

Co-authored-by: Andrew Kingston <andrew@kingston.dev>
---
 .eslintignore                                 |   3 +-
 .gitignore                                    |   3 +
 package.json                                  |   1 +
 .../deploy/RevertModalVersionSelect.svelte    |  33 +++
 .../src/components/deploy/VersionModal.svelte |  18 +-
 .../src/components/deploy/clientVersions.json |   1 +
 .../[screenId]/_components/AppPreview.svelte  |  43 ++-
 .../builder/portal/apps/[appId]/index.svelte  |  63 +++-
 packages/client/manifest.json                 |   3 +-
 .../client/src/components/ClientApp.svelte    | 276 ++++++++++--------
 .../client/src/components/FreeFooter.svelte   |   1 +
 packages/client/src/licensing/features.js     |   5 -
 packages/client/src/licensing/index.js        |   7 -
 packages/client/src/licensing/utils.js        |  32 --
 packages/client/src/stores/features.js        |  42 +++
 packages/client/src/stores/index.js           |   1 +
 packages/frontend-core/src/api/app.js         |   9 +
 .../src/components/ClientAppSkeleton.svelte   | 244 ++++++++++++++++
 .../frontend-core/src/components/index.js     |   1 +
 .../frontend-core/src/themes/midnight.css     |   1 -
 packages/server/package.json                  |   1 +
 .../server/src/api/controllers/application.ts |  30 +-
 .../src/api/controllers/static/index.ts       |  34 ++-
 .../static/templates/BudibaseApp.svelte       |  10 +
 .../api/controllers/static/templates/app.hbs  |   8 +-
 packages/server/src/api/routes/application.ts |   5 +
 packages/server/src/api/routes/static.ts      |   2 +-
 packages/server/src/constants/index.ts        |   2 +
 packages/server/src/constants/themes.ts       |  54 ++++
 .../server/src/utilities/fileSystem/app.ts    |  33 ++-
 .../src/utilities/fileSystem/clientLibrary.ts |  56 +++-
 packages/types/src/documents/app/app.ts       |   1 +
 scripts/build.js                              |  28 +-
 scripts/getPastClientVersion.js               |  45 +++
 34 files changed, 850 insertions(+), 246 deletions(-)
 create mode 100644 packages/builder/src/components/deploy/RevertModalVersionSelect.svelte
 create mode 100644 packages/builder/src/components/deploy/clientVersions.json
 delete mode 100644 packages/client/src/licensing/features.js
 delete mode 100644 packages/client/src/licensing/index.js
 delete mode 100644 packages/client/src/licensing/utils.js
 create mode 100644 packages/client/src/stores/features.js
 create mode 100644 packages/frontend-core/src/components/ClientAppSkeleton.svelte
 create mode 100644 packages/server/src/constants/themes.ts
 create mode 100644 scripts/getPastClientVersion.js

diff --git a/.eslintignore b/.eslintignore
index f2c53c2fdc..94984a446f 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -12,4 +12,5 @@ packages/sdk/sdk
 packages/account-portal/packages/server/build
 packages/account-portal/packages/ui/.routify
 packages/account-portal/packages/ui/build
-**/*.ivm.bundle.js
\ No newline at end of file
+**/*.ivm.bundle.js
+packages/server/build/oldClientVersions/**/**
diff --git a/.gitignore b/.gitignore
index 8861a14d20..661c60e95e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,6 +5,9 @@ packages/server/runtime_apps/
 bb-airgapped.tar.gz
 *.iml
 
+packages/server/build/oldClientVersions/**/*
+packages/builder/src/components/deploy/clientVersions.json
+
 # Logs
 logs
 *.log
diff --git a/package.json b/package.json
index 7de22ab456..79a7b06eff 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
   },
   "scripts": {
     "preinstall": "node scripts/syncProPackage.js",
+    "get-past-client-version": "node scripts/getPastClientVersion.js",
     "setup": "git config submodule.recurse true && git submodule update && node ./hosting/scripts/setup.js && yarn && yarn build && yarn dev",
     "build": "NODE_OPTIONS=--max-old-space-size=1500 lerna run build --stream",
     "build:dev": "lerna run --stream prebuild && yarn nx run-many --target=build --output-style=dynamic --watch --preserveWatchOutput",
diff --git a/packages/builder/src/components/deploy/RevertModalVersionSelect.svelte b/packages/builder/src/components/deploy/RevertModalVersionSelect.svelte
new file mode 100644
index 0000000000..ed40a101d0
--- /dev/null
+++ b/packages/builder/src/components/deploy/RevertModalVersionSelect.svelte
@@ -0,0 +1,33 @@
+<script>
+  import { API } from "api"
+  import clientVersions from "./clientVersions.json"
+  import { appStore } from "stores/builder"
+  import { Select } from "@budibase/bbui"
+
+  export let revertableVersion
+  $: appId = $appStore.appId
+
+  const handleChange = e => {
+    const value = e.detail
+    if (value == null) return
+
+    API.setRevertableVersion(appId, value)
+  }
+</script>
+
+<div class="select">
+  <Select
+    autoWidth
+    value={revertableVersion}
+    options={clientVersions}
+    on:change={handleChange}
+    footer={"Older versions of the Budibase client can be acquired using `yarn get-past-client-version x.x.x`. This toggle is only available in dev mode."}
+  />
+</div>
+
+<style>
+  .select {
+    width: 120px;
+    display: inline-block;
+  }
+</style>
diff --git a/packages/builder/src/components/deploy/VersionModal.svelte b/packages/builder/src/components/deploy/VersionModal.svelte
index 0944512fe8..316a981325 100644
--- a/packages/builder/src/components/deploy/VersionModal.svelte
+++ b/packages/builder/src/components/deploy/VersionModal.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { admin } from "stores/portal"
   import {
     Modal,
     notifications,
@@ -9,6 +10,7 @@
   } from "@budibase/bbui"
   import { appStore, initialise } from "stores/builder"
   import { API } from "api"
+  import RevertModalVersionSelect from "./RevertModalVersionSelect.svelte"
 
   export function show() {
     updateModal.show()
@@ -28,7 +30,9 @@
     $appStore.upgradableVersion &&
     $appStore.version &&
     $appStore.upgradableVersion !== $appStore.version
-  $: revertAvailable = $appStore.revertableVersion != null
+  $: revertAvailable =
+    $appStore.revertableVersion != null ||
+    ($admin.isDev && $appStore.version === "0.0.0")
 
   const refreshAppPackage = async () => {
     try {
@@ -62,7 +66,9 @@
       // Don't wait for the async refresh, since this causes modal flashing
       refreshAppPackage()
       notifications.success(
-        `App reverted successfully to version ${$appStore.revertableVersion}`
+        $appStore.revertableVersion
+          ? `App reverted successfully to version ${$appStore.revertableVersion}`
+          : "App reverted successfully"
       )
     } catch (err) {
       notifications.error(`Error reverting app: ${err}`)
@@ -103,7 +109,13 @@
     {#if revertAvailable}
       <Body size="S">
         You can revert this app to version
-        <b>{$appStore.revertableVersion}</b>
+        {#if $admin.isDev}
+          <RevertModalVersionSelect
+            revertableVersion={$appStore.revertableVersion}
+          />
+        {:else}
+          <b>{$appStore.revertableVersion}</b>
+        {/if}
         if you're experiencing issues with the current version.
       </Body>
     {/if}
diff --git a/packages/builder/src/components/deploy/clientVersions.json b/packages/builder/src/components/deploy/clientVersions.json
new file mode 100644
index 0000000000..fe51488c70
--- /dev/null
+++ b/packages/builder/src/components/deploy/clientVersions.json
@@ -0,0 +1 @@
+[]
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
index e74a05ff99..12d572ecc4 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
@@ -14,17 +14,11 @@
     snippets,
   } from "stores/builder"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import {
-    ProgressCircle,
-    Layout,
-    Heading,
-    Body,
-    Icon,
-    notifications,
-  } from "@budibase/bbui"
+  import { Layout, Heading, Body, Icon, notifications } from "@budibase/bbui"
   import ErrorSVG from "@budibase/frontend-core/assets/error.svg?raw"
   import { findComponent, findComponentPath } from "helpers/components"
   import { isActive, goto } from "@roxi/routify"
+  import { ClientAppSkeleton } from "@budibase/frontend-core"
 
   let iframe
   let layout
@@ -254,8 +248,16 @@
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div class="component-container">
   {#if loading}
-    <div class="center">
-      <ProgressCircle />
+    <div
+      class={`loading ${$themeStore.theme}`}
+      class:tablet={$previewStore.previewDevice === "tablet"}
+      class:mobile={$previewStore.previewDevice === "mobile"}
+    >
+      <ClientAppSkeleton
+        sideNav={$navigationStore?.navigation === "Left"}
+        hideFooter
+        hideDevTools
+      />
     </div>
   {:else if error}
     <div class="center error">
@@ -272,8 +274,6 @@
     bind:this={iframe}
     src="/app/preview"
     class:hidden={loading || error}
-    class:tablet={$previewStore.previewDevice === "tablet"}
-    class:mobile={$previewStore.previewDevice === "mobile"}
   />
   <div
     class="add-component"
@@ -293,6 +293,25 @@
 />
 
 <style>
+  .loading {
+    position: absolute;
+    container-type: inline-size;
+    width: 100%;
+    height: 100%;
+    border: 2px solid transparent;
+    box-sizing: border-box;
+  }
+
+  .loading.tablet {
+    width: calc(1024px + 6px);
+    max-height: calc(768px + 6px);
+  }
+
+  .loading.mobile {
+    width: calc(390px + 6px);
+    max-height: calc(844px + 6px);
+  }
+
   .component-container {
     grid-row-start: middle;
     grid-column-start: middle;
diff --git a/packages/builder/src/pages/builder/portal/apps/[appId]/index.svelte b/packages/builder/src/pages/builder/portal/apps/[appId]/index.svelte
index 3f8e9e7545..a08189a400 100644
--- a/packages/builder/src/pages/builder/portal/apps/[appId]/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/[appId]/index.svelte
@@ -1,6 +1,12 @@
 <script>
+  import { onMount, onDestroy } from "svelte"
   import { params, goto } from "@roxi/routify"
-  import { auth, sideBarCollapsed, enrichedApps } from "stores/portal"
+  import {
+    licensing,
+    auth,
+    sideBarCollapsed,
+    enrichedApps,
+  } from "stores/portal"
   import AppRowContext from "components/start/AppRowContext.svelte"
   import FavouriteAppButton from "../FavouriteAppButton.svelte"
   import {
@@ -14,12 +20,17 @@
   import { sdk } from "@budibase/shared-core"
   import { API } from "api"
   import ErrorSVG from "./ErrorSVG.svelte"
+  import { ClientAppSkeleton } from "@budibase/frontend-core"
 
   $: app = $enrichedApps.find(app => app.appId === $params.appId)
   $: iframeUrl = getIframeURL(app)
   $: isBuilder = sdk.users.isBuilder($auth.user, app?.devId)
 
+  let loading = true
+
   const getIframeURL = app => {
+    loading = true
+
     if (app.status === "published") {
       return `/app${app.url}`
     }
@@ -37,6 +48,20 @@
   }
 
   $: fetchScreens(app?.devId)
+
+  const receiveMessage = async message => {
+    if (message.data.type === "docLoaded") {
+      loading = false
+    }
+  }
+
+  onMount(() => {
+    window.addEventListener("message", receiveMessage)
+  })
+
+  onDestroy(() => {
+    window.removeEventListener("message", receiveMessage)
+  })
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -108,7 +133,24 @@
       </Body>
     </div>
   {:else}
-    <iframe src={iframeUrl} title={app.name} />
+    <div
+      class:hide={!loading || !app?.features?.skeletonLoader}
+      class="loading"
+    >
+      <div class={`loadingThemeWrapper ${app.theme}`}>
+        <ClientAppSkeleton
+          noAnimation
+          hideDevTools={app?.status === "published"}
+          sideNav={app?.navigation.navigation === "Left"}
+          hideFooter={$licensing.brandingEnabled}
+        />
+      </div>
+    </div>
+    <iframe
+      class:hide={loading && app?.features?.skeletonLoader}
+      src={iframeUrl}
+      title={app.name}
+    />
   {/if}
 </div>
 
@@ -139,6 +181,23 @@
     flex: 0 0 50px;
   }
 
+  .loading {
+    height: 100%;
+    border: 1px solid var(--spectrum-global-color-gray-300);
+    border-radius: var(--spacing-s);
+    overflow: hidden;
+  }
+  .loadingThemeWrapper {
+    height: 100%;
+    container-type: inline-size;
+  }
+
+  .hide {
+    visibility: hidden;
+    height: 0;
+    border: none;
+  }
+
   iframe {
     flex: 1 1 auto;
     border-radius: var(--spacing-s);
diff --git a/packages/client/manifest.json b/packages/client/manifest.json
index a6e14be4ef..08d614391b 100644
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@@ -10,7 +10,8 @@
     "rowSelection": true,
     "continueIfAction": true,
     "showNotificationAction": true,
-    "sidePanel": true
+    "sidePanel": true,
+    "skeletonLoader": true
   },
   "layout": {
     "name": "Layout",
diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index e6cda03270..0dfd385a8a 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -7,6 +7,7 @@
   import Component from "./Component.svelte"
   import SDK from "sdk"
   import {
+    featuresStore,
     createContextStore,
     initialise,
     screenStore,
@@ -38,7 +39,6 @@
   import DevTools from "components/devtools/DevTools.svelte"
   import FreeFooter from "components/FreeFooter.svelte"
   import MaintenanceScreen from "components/MaintenanceScreen.svelte"
-  import licensing from "../licensing"
   import SnippetsProvider from "./context/SnippetsProvider.svelte"
 
   // Provide contexts
@@ -83,11 +83,18 @@
     }
   }
 
+  let fontsLoaded = false
+
   // Load app config
   onMount(async () => {
+    document.fonts.ready.then(() => {
+      fontsLoaded = true
+    })
+
     await initialise()
     await authStore.actions.fetchUser()
     dataLoaded = true
+
     if (get(builderStore).inBuilder) {
       builderStore.actions.notifyLoaded()
     } else {
@@ -96,6 +103,12 @@
       })
     }
   })
+
+  $: {
+    if (dataLoaded && fontsLoaded) {
+      document.getElementById("clientAppSkeletonLoader")?.remove()
+    }
+  }
 </script>
 
 <svelte:head>
@@ -106,148 +119,148 @@
   {/if}
 </svelte:head>
 
-{#if dataLoaded}
-  <div
-    id="spectrum-root"
-    lang="en"
-    dir="ltr"
-    class="spectrum spectrum--medium {$themeStore.baseTheme} {$themeStore.theme}"
-    class:builder={$builderStore.inBuilder}
-  >
-    {#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="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 />
+                <!-- 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" />
+
+                          <!-- Modal container to ensure they sit on top -->
+                          <div class="modal-container" />
+
+                          <!-- Layers on top of app -->
+                          <NotificationDisplay />
+                          <ConfirmationDisplay />
+                          <PeekScreenDisplay />
+                        </CustomThemeWrapper>
                       {/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" />
-
-                            <!-- Modal container to ensure they sit on top -->
-                            <div class="modal-container" />
-
-                            <!-- Layers on top of app -->
-                            <NotificationDisplay />
-                            <ConfirmationDisplay />
-                            <PeekScreenDisplay />
-                          </CustomThemeWrapper>
-                        {/if}
-
-                        {#if showDevTools}
-                          <DevTools />
-                        {/if}
-                      </div>
-
-                      {#if !$builderStore.inBuilder && licensing.logoEnabled()}
-                        <FreeFooter />
+                      {#if showDevTools}
+                        <DevTools />
                       {/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 !$builderStore.inBuilder && $featuresStore.logoEnabled}
+                      <FreeFooter />
                     {/if}
                   </div>
-                </SnippetsProvider>
-              </QueryParamsProvider>
-            </RowSelectionProvider>
-          </StateBindingsProvider>
-        </UserBindingsProvider>
-      </DeviceBindingsProvider>
-    {/if}
-  </div>
-  <KeyboardManager />
-{/if}
+
+                  <!-- 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 />
 
 <style>
   #spectrum-root {
+    height: 0;
+    visibility: hidden;
     padding: 0;
     margin: 0;
     overflow: hidden;
-    height: 100%;
     width: 100%;
     display: flex;
     flex-direction: row;
@@ -268,6 +281,11 @@
     background-color: transparent;
   }
 
+  #spectrum-root.show {
+    height: 100%;
+    visibility: visible;
+  }
+
   #app-root {
     overflow: hidden;
     height: 100%;
diff --git a/packages/client/src/components/FreeFooter.svelte b/packages/client/src/components/FreeFooter.svelte
index 3ba2f1bfdb..868f5377c7 100644
--- a/packages/client/src/components/FreeFooter.svelte
+++ b/packages/client/src/components/FreeFooter.svelte
@@ -13,6 +13,7 @@
 
 <style>
   .free-footer {
+    min-height: 51px;
     flex: 0 0 auto;
     padding: 16px 20px;
     border-top: 1px solid var(--spectrum-global-color-gray-300);
diff --git a/packages/client/src/licensing/features.js b/packages/client/src/licensing/features.js
deleted file mode 100644
index 1f0d4a4870..0000000000
--- a/packages/client/src/licensing/features.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { isFreePlan } from "./utils.js"
-
-export const logoEnabled = () => {
-  return isFreePlan()
-}
diff --git a/packages/client/src/licensing/index.js b/packages/client/src/licensing/index.js
deleted file mode 100644
index 6993910704..0000000000
--- a/packages/client/src/licensing/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import * as features from "./features"
-
-const licensing = {
-  ...features,
-}
-
-export default licensing
diff --git a/packages/client/src/licensing/utils.js b/packages/client/src/licensing/utils.js
deleted file mode 100644
index 544fa0f526..0000000000
--- a/packages/client/src/licensing/utils.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import { authStore } from "../stores/auth.js"
-import { appStore } from "../stores/app.js"
-import { get } from "svelte/store"
-import { Constants } from "@budibase/frontend-core"
-
-const getUserLicense = () => {
-  const user = get(authStore)
-  if (user) {
-    return user.license
-  }
-}
-
-const getAppLicenseType = () => {
-  const appDef = get(appStore)
-  if (appDef?.licenseType) {
-    return appDef.licenseType
-  }
-}
-
-export const isFreePlan = () => {
-  let licenseType = getAppLicenseType()
-  if (!licenseType) {
-    const license = getUserLicense()
-    licenseType = license?.plan?.type
-  }
-  if (licenseType) {
-    return licenseType === Constants.PlanType.FREE
-  } else {
-    // safety net - no license means free plan
-    return true
-  }
-}
diff --git a/packages/client/src/stores/features.js b/packages/client/src/stores/features.js
new file mode 100644
index 0000000000..2bdc2bec1a
--- /dev/null
+++ b/packages/client/src/stores/features.js
@@ -0,0 +1,42 @@
+import { derived } from "svelte/store"
+import { appStore } from "./app"
+import { authStore } from "./auth"
+import { Constants } from "@budibase/frontend-core"
+
+const createFeaturesStore = () => {
+  return derived([authStore, appStore], ([$authStore, $appStore]) => {
+    const getUserLicense = () => {
+      const user = $authStore
+      if (user) {
+        return user.license
+      }
+    }
+
+    const getAppLicenseType = () => {
+      const appDef = $appStore
+      if (appDef?.licenseType) {
+        return appDef.licenseType
+      }
+    }
+
+    const isFreePlan = () => {
+      let licenseType = getAppLicenseType()
+      if (!licenseType) {
+        const license = getUserLicense()
+        licenseType = license?.plan?.type
+      }
+      if (licenseType) {
+        return licenseType === Constants.PlanType.FREE
+      } else {
+        // safety net - no license means free plan
+        return true
+      }
+    }
+
+    return {
+      logoEnabled: isFreePlan(),
+    }
+  })
+}
+
+export const featuresStore = createFeaturesStore()
diff --git a/packages/client/src/stores/index.js b/packages/client/src/stores/index.js
index 60034553c7..e9b1ce4434 100644
--- a/packages/client/src/stores/index.js
+++ b/packages/client/src/stores/index.js
@@ -31,6 +31,7 @@ export { hoverStore } from "./hover"
 
 // Context stores are layered and duplicated, so it is not a singleton
 export { createContextStore } from "./context"
+export { featuresStore } from "./features"
 
 // Initialises an app by loading screens and routes
 export { initialise } from "./initialise"
diff --git a/packages/frontend-core/src/api/app.js b/packages/frontend-core/src/api/app.js
index fff2e99fe5..de1703373b 100644
--- a/packages/frontend-core/src/api/app.js
+++ b/packages/frontend-core/src/api/app.js
@@ -197,4 +197,13 @@ export const buildAppEndpoints = API => ({
       url: `/api/applications/${appId}/sample`,
     })
   },
+
+  setRevertableVersion: async (appId, revertableVersion) => {
+    return await API.post({
+      url: `/api/applications/${appId}/setRevertableVersion`,
+      body: {
+        revertableVersion,
+      },
+    })
+  },
 })
diff --git a/packages/frontend-core/src/components/ClientAppSkeleton.svelte b/packages/frontend-core/src/components/ClientAppSkeleton.svelte
new file mode 100644
index 0000000000..a1c90d2db7
--- /dev/null
+++ b/packages/frontend-core/src/components/ClientAppSkeleton.svelte
@@ -0,0 +1,244 @@
+<script>
+  export let sideNav = false
+  export let hideDevTools = false
+  export let hideFooter = false
+  export let noAnimation = false
+</script>
+
+<div class:sideNav id="clientAppSkeletonLoader" class="skeleton">
+  <div class="animation" class:noAnimation />
+
+  {#if !hideDevTools}
+    <div class="devTools" />
+  {/if}
+  <div class="main">
+    <div class="nav" />
+    <div class="body">
+      <div class="bodyVerticalPadding" />
+      <div class="bodyHorizontal">
+        <div class="bodyHorizontalPadding" />
+        <svg
+          class="svg"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          width="240"
+          height="256"
+        >
+          <mask id="mask">
+            <rect x="0" y="0" width="240" height="256" fill="white" />
+            <rect x="0" y="0" width="240" height="32" rx="6" fill="black" />
+            <rect x="0" y="56" width="240" height="32" rx="6" fill="black" />
+            <rect x="0" y="112" width="240" height="32" rx="6" fill="black" />
+            <rect x="0" y="168" width="240" height="32" rx="6" fill="black" />
+            <rect x="71" y="224" width="98" height="32" rx="6" fill="black" />
+          </mask>
+
+          <rect
+            x="0"
+            y="0"
+            width="240"
+            height="256"
+            fill="black"
+            mask="url(#mask)"
+          />
+        </svg>
+        <div class="bodyHorizontalPadding" />
+      </div>
+      <div class="bodyVerticalPadding" />
+    </div>
+  </div>
+  {#if !hideFooter}
+    <div class="footer" />
+  {/if}
+</div>
+
+<style>
+  .skeleton {
+    position: relative;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    border-radius: 4px;
+    overflow: hidden;
+    background-color: var(--spectrum-global-color-gray-200);
+  }
+
+  .animation {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background: linear-gradient(
+      to right,
+      transparent 0%,
+      var(--spectrum-global-color-gray-300) 20%,
+      transparent 40%,
+      transparent 100%
+    );
+    animation-duration: 1.3s;
+    animation-fill-mode: forwards;
+    animation-iteration-count: infinite;
+    animation-name: shimmer;
+    animation-timing-function: linear;
+  }
+
+  .noAnimation {
+    animation-name: none;
+    background: transparent;
+  }
+
+  .devTools {
+    display: flex;
+    box-sizing: border-box;
+    background-color: black;
+    height: 60px;
+    padding: 1px 24px 1px 20px;
+    display: flex;
+    align-items: center;
+    z-index: 1;
+    flex-shrink: 0;
+
+    color: white;
+    mix-blend-mode: multiply;
+    background: rgb(0 0 0);
+    font-size: 30px;
+    font-family: Source Sans Pro;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  .main {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  @media (max-width: 720px) {
+    #clientAppSkeletonLoader .main {
+      flex-direction: column;
+      width: initial;
+    }
+  }
+
+  @container (max-width: 720px) {
+    #clientAppSkeletonLoader .main {
+      flex-direction: column;
+      width: initial;
+    }
+  }
+
+  .sideNav .main {
+    flex-direction: row;
+    width: 100%;
+  }
+
+  .nav {
+    flex-shrink: 0;
+    width: 100%;
+    height: 141px;
+    background-color: transparent;
+  }
+
+  @media (max-width: 720px) {
+    #clientAppSkeletonLoader .nav {
+      height: 61px;
+      width: initial;
+    }
+  }
+
+  @container (max-width: 720px) {
+    #clientAppSkeletonLoader .nav {
+      height: 61px;
+      width: initial;
+    }
+  }
+
+  .sideNav .nav {
+    height: 100%;
+    width: 251px;
+  }
+
+  .body {
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    position: relative;
+  }
+
+  @media (max-width: 720px) {
+    #clientAppSkeletonLoader .body {
+      width: initial;
+      height: 100%;
+    }
+  }
+
+  @container (max-width: 720px) {
+    #clientAppSkeletonLoader .body {
+      width: initial;
+      height: 100%;
+    }
+  }
+
+  .sideNav .body {
+    width: 100%;
+    height: initial;
+  }
+
+  .body :global(svg > rect) {
+    fill: var(--spectrum-alias-background-color-primary);
+  }
+
+  .body :global(svg) {
+    flex-shrink: 0;
+  }
+
+  .bodyHorizontal {
+    display: flex;
+    flex-shrink: 0;
+  }
+
+  .bodyHorizontalPadding {
+    height: 100%;
+    flex-grow: 1;
+    background-color: var(--spectrum-alias-background-color-primary);
+  }
+
+  .bodyVerticalPadding {
+    width: 100%;
+    flex-grow: 1;
+    background-color: var(--spectrum-alias-background-color-primary);
+  }
+
+  .footer {
+    flex-shrink: 0;
+    box-sizing: border-box;
+    z-index: 1;
+    height: 52px;
+    width: 100%;
+  }
+
+  @media (max-width: 720px) {
+    #clientAppSkeletonLoader .footer {
+      border-top: none;
+    }
+  }
+
+  @container (max-width: 720px) {
+    #clientAppSkeletonLoader .footer {
+      border-top: none;
+    }
+  }
+
+  .sideNav .footer {
+    border-top: 3px solid var(--spectrum-alias-background-color-primary);
+  }
+
+  @keyframes shimmer {
+    0% {
+      left: -170%;
+    }
+
+    100% {
+      left: 170%;
+    }
+  }
+</style>
diff --git a/packages/frontend-core/src/components/index.js b/packages/frontend-core/src/components/index.js
index f724e1e4d9..f71420b12b 100644
--- a/packages/frontend-core/src/components/index.js
+++ b/packages/frontend-core/src/components/index.js
@@ -5,3 +5,4 @@ export { default as UserAvatar } from "./UserAvatar.svelte"
 export { default as UserAvatars } from "./UserAvatars.svelte"
 export { default as Updating } from "./Updating.svelte"
 export { Grid } from "./grid"
+export { default as ClientAppSkeleton } from "./ClientAppSkeleton.svelte"
diff --git a/packages/frontend-core/src/themes/midnight.css b/packages/frontend-core/src/themes/midnight.css
index e311452262..501bc164bc 100644
--- a/packages/frontend-core/src/themes/midnight.css
+++ b/packages/frontend-core/src/themes/midnight.css
@@ -18,4 +18,3 @@
     --drop-shadow: rgba(0, 0, 0, 0.25) !important;
     --spectrum-global-color-blue-100: rgba(35, 40, 50) !important;
 }
-
diff --git a/packages/server/package.json b/packages/server/package.json
index 8e66f3d7e0..069fd2c8b7 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -53,6 +53,7 @@
     "@budibase/pro": "0.0.0",
     "@budibase/shared-core": "0.0.0",
     "@budibase/string-templates": "0.0.0",
+    "@budibase/frontend-core": "0.0.0",
     "@budibase/types": "0.0.0",
     "@bull-board/api": "5.10.2",
     "@bull-board/koa": "5.10.2",
diff --git a/packages/server/src/api/controllers/application.ts b/packages/server/src/api/controllers/application.ts
index 40db259289..ceef421fab 100644
--- a/packages/server/src/api/controllers/application.ts
+++ b/packages/server/src/api/controllers/application.ts
@@ -306,6 +306,7 @@ async function performAppCreate(ctx: UserCtx<CreateAppRequest, App>) {
       features: {
         componentValidation: true,
         disableUserMetadata: true,
+        skeletonLoader: true,
       },
     }
 
@@ -486,10 +487,11 @@ export async function updateClient(ctx: UserCtx) {
   const application = await db.get<App>(DocumentType.APP_METADATA)
   const currentVersion = application.version
 
+  let manifest
   // Update client library and manifest
   if (!env.isTest()) {
     await backupClientLibrary(ctx.params.appId)
-    await updateClientLibrary(ctx.params.appId)
+    manifest = await updateClientLibrary(ctx.params.appId)
   }
 
   // Update versions in app package
@@ -497,6 +499,10 @@ export async function updateClient(ctx: UserCtx) {
   const appPackageUpdates = {
     version: updatedToVersion,
     revertableVersion: currentVersion,
+    features: {
+      ...(application.features ?? {}),
+      skeletonLoader: manifest?.features?.skeletonLoader ?? false,
+    },
   }
   const app = await updateAppPackage(appPackageUpdates, ctx.params.appId)
   await events.app.versionUpdated(app, currentVersion, updatedToVersion)
@@ -512,9 +518,10 @@ export async function revertClient(ctx: UserCtx) {
     ctx.throw(400, "There is no version to revert to")
   }
 
+  let manifest
   // Update client library and manifest
   if (!env.isTest()) {
-    await revertClientLibrary(ctx.params.appId)
+    manifest = await revertClientLibrary(ctx.params.appId)
   }
 
   // Update versions in app package
@@ -523,6 +530,10 @@ export async function revertClient(ctx: UserCtx) {
   const appPackageUpdates = {
     version: revertedToVersion,
     revertableVersion: undefined,
+    features: {
+      ...(application.features ?? {}),
+      skeletonLoader: manifest?.features?.skeletonLoader ?? false,
+    },
   }
   const app = await updateAppPackage(appPackageUpdates, ctx.params.appId)
   await events.app.versionReverted(app, currentVersion, revertedToVersion)
@@ -729,6 +740,21 @@ export async function updateAppPackage(
   })
 }
 
+export async function setRevertableVersion(
+  ctx: UserCtx<{ revertableVersion: string }, App>
+) {
+  if (!env.isDev()) {
+    ctx.status = 403
+    return
+  }
+  const db = context.getAppDB()
+  const app = await db.get<App>(DocumentType.APP_METADATA)
+  app.revertableVersion = ctx.request.body.revertableVersion
+  await db.put(app)
+
+  ctx.status = 200
+}
+
 async function migrateAppNavigation() {
   const db = context.getAppDB()
   const existing: App = await db.get(DocumentType.APP_METADATA)
diff --git a/packages/server/src/api/controllers/static/index.ts b/packages/server/src/api/controllers/static/index.ts
index c718d5f704..f004921d08 100644
--- a/packages/server/src/api/controllers/static/index.ts
+++ b/packages/server/src/api/controllers/static/index.ts
@@ -1,10 +1,8 @@
 import { InvalidFileExtensions } from "@budibase/shared-core"
-
 import AppComponent from "./templates/BudibaseApp.svelte"
-
 import { join } from "../../../utilities/centralPath"
 import * as uuid from "uuid"
-import { ObjectStoreBuckets } from "../../../constants"
+import { ObjectStoreBuckets, devClientVersion } from "../../../constants"
 import { processString } from "@budibase/string-templates"
 import {
   loadHandlebarsFile,
@@ -24,13 +22,20 @@ import AWS from "aws-sdk"
 import fs from "fs"
 import sdk from "../../../sdk"
 import * as pro from "@budibase/pro"
-import { App, Ctx, ProcessAttachmentResponse } from "@budibase/types"
+import {
+  UserCtx,
+  App,
+  Ctx,
+  ProcessAttachmentResponse,
+  Feature,
+} from "@budibase/types"
 import {
   getAppMigrationVersion,
   getLatestMigrationId,
 } from "../../../appMigrations"
 
 import send from "koa-send"
+import { getThemeVariables } from "../../../constants/themes"
 
 export const toggleBetaUiFeature = async function (ctx: Ctx) {
   const cookieName = `beta:${ctx.params.feature}`
@@ -146,7 +151,7 @@ const requiresMigration = async (ctx: Ctx) => {
   return requiresMigrations
 }
 
-export const serveApp = async function (ctx: Ctx) {
+export const serveApp = async function (ctx: UserCtx) {
   const needMigrations = await requiresMigration(ctx)
 
   const bbHeaderEmbed =
@@ -165,12 +170,23 @@ export const serveApp = async function (ctx: Ctx) {
   try {
     db = context.getAppDB({ skip_setup: true })
     const appInfo = await db.get<any>(DocumentType.APP_METADATA)
+
     let appId = context.getAppId()
+    const hideDevTools = !!ctx.params.appUrl
+    const sideNav = appInfo.navigation.navigation === "Left"
+    const hideFooter =
+      ctx?.user?.license?.features?.includes(Feature.BRANDING) || false
+    const themeVariables = getThemeVariables(appInfo?.theme)
 
     if (!env.isJest()) {
       const plugins = objectStore.enrichPluginURLs(appInfo.usedPlugins)
+
       const { head, html, css } = AppComponent.render({
         title: branding?.platformTitle || `${appInfo.name}`,
+        showSkeletonLoader: appInfo.features?.skeletonLoader ?? false,
+        hideDevTools,
+        sideNav,
+        hideFooter,
         metaImage:
           branding?.metaImageUrl ||
           "https://res.cloudinary.com/daog6scxm/image/upload/v1698759482/meta-images/plain-branded-meta-image-coral_ocxmgu.png",
@@ -195,7 +211,7 @@ export const serveApp = async function (ctx: Ctx) {
       ctx.body = await processString(appHbs, {
         head,
         body: html,
-        style: css.code,
+        css: `:root{${themeVariables}} ${css.code}`,
         appId,
         embedded: bbHeaderEmbed,
       })
@@ -247,18 +263,20 @@ export const serveBuilderPreview = async function (ctx: Ctx) {
 }
 
 export const serveClientLibrary = async function (ctx: Ctx) {
+  const version = ctx.request.query.version
+
   const appId = context.getAppId() || (ctx.request.query.appId as string)
   let rootPath = join(NODE_MODULES_PATH, "@budibase", "client", "dist")
   if (!appId) {
     ctx.throw(400, "No app ID provided - cannot fetch client library.")
   }
-  if (env.isProd()) {
+  if (env.isProd() || (env.isDev() && version !== devClientVersion)) {
     ctx.body = await objectStore.getReadStream(
       ObjectStoreBuckets.APPS,
       objectStore.clientLibraryPath(appId!)
     )
     ctx.set("Content-Type", "application/javascript")
-  } else if (env.isDev()) {
+  } else if (env.isDev() && version === devClientVersion) {
     // incase running from TS directly
     const tsPath = join(require.resolve("@budibase/client"), "..")
     return send(ctx, "budibase-client.js", {
diff --git a/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte b/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
index 7819368fc0..b4bfbe6660 100644
--- a/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
+++ b/packages/server/src/api/controllers/static/templates/BudibaseApp.svelte
@@ -1,4 +1,6 @@
 <script>
+  import ClientAppSkeleton from "@budibase/frontend-core/src/components/ClientAppSkeleton.svelte"
+
   export let title = ""
   export let favicon = ""
 
@@ -9,6 +11,11 @@
   export let clientLibPath
   export let usedPlugins
   export let appMigrating
+
+  export let showSkeletonLoader = false
+  export let hideDevTools
+  export let sideNav
+  export let hideFooter
 </script>
 
 <svelte:head>
@@ -96,6 +103,9 @@
 </svelte:head>
 
 <body id="app">
+  {#if showSkeletonLoader}
+    <ClientAppSkeleton {hideDevTools} {sideNav} {hideFooter} />
+  {/if}
   <div id="error">
     {#if clientLibPath}
       <h1>There was an error loading your app</h1>
diff --git a/packages/server/src/api/controllers/static/templates/app.hbs b/packages/server/src/api/controllers/static/templates/app.hbs
index 8c445158a0..b01b723c3e 100644
--- a/packages/server/src/api/controllers/static/templates/app.hbs
+++ b/packages/server/src/api/controllers/static/templates/app.hbs
@@ -1,8 +1,12 @@
 <html>
-
+  <script>
+    document.fonts.ready.then(() => {
+      window.parent.postMessage({ type: "docLoaded" });
+    })
+  </script>
   <head>
     {{{head}}}
-    <style>{{{style}}}</style>
+    <style>{{{css}}}</style>
   </head>
 
   <script>
diff --git a/packages/server/src/api/routes/application.ts b/packages/server/src/api/routes/application.ts
index 07db85451a..f7e3937645 100644
--- a/packages/server/src/api/routes/application.ts
+++ b/packages/server/src/api/routes/application.ts
@@ -68,5 +68,10 @@ router
     authorized(permissions.BUILDER),
     controller.importToApp
   )
+  .post(
+    "/api/applications/:appId/setRevertableVersion",
+    authorized(permissions.BUILDER),
+    controller.setRevertableVersion
+  )
 
 export default router
diff --git a/packages/server/src/api/routes/static.ts b/packages/server/src/api/routes/static.ts
index 4e9e10fd56..a5c421b2e6 100644
--- a/packages/server/src/api/routes/static.ts
+++ b/packages/server/src/api/routes/static.ts
@@ -51,8 +51,8 @@ router
     controller.deleteObjects
   )
   .get("/app/preview", authorized(BUILDER), controller.serveBuilderPreview)
-  .get("/:appId/:path*", controller.serveApp)
   .get("/app/:appUrl/:path*", controller.serveApp)
+  .get("/:appId/:path*", controller.serveApp)
   .post(
     "/api/attachments/:datasourceId/url",
     authorized(PermissionType.TABLE, PermissionLevel.READ),
diff --git a/packages/server/src/constants/index.ts b/packages/server/src/constants/index.ts
index d2bc3c44e3..42a1b53224 100644
--- a/packages/server/src/constants/index.ts
+++ b/packages/server/src/constants/index.ts
@@ -165,6 +165,8 @@ export enum AutomationErrors {
   FAILURE_CONDITION = "FAILURE_CONDITION_MET",
 }
 
+export const devClientVersion = "0.0.0"
+
 // pass through the list from the auth/core lib
 export const ObjectStoreBuckets = objectStore.ObjectStoreBuckets
 export const MAX_AUTOMATION_RECURRING_ERRORS = 5
diff --git a/packages/server/src/constants/themes.ts b/packages/server/src/constants/themes.ts
new file mode 100644
index 0000000000..942d67f100
--- /dev/null
+++ b/packages/server/src/constants/themes.ts
@@ -0,0 +1,54 @@
+export const getThemeVariables = (theme: string) => {
+  if (theme === "spectrum--lightest") {
+    return `
+      --spectrum-global-color-gray-50: rgb(255, 255, 255);
+      --spectrum-global-color-gray-200: rgb(244, 244, 244);
+      --spectrum-global-color-gray-300: rgb(234, 234, 234);
+      --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-50);
+    `
+  }
+  if (theme === "spectrum--light") {
+    return `
+    --spectrum-global-color-gray-50: rgb(255, 255, 255);
+    --spectrum-global-color-gray-200: rgb(234, 234, 234);
+    --spectrum-global-color-gray-300: rgb(225, 225, 225);
+    --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-50);
+
+    `
+  }
+  if (theme === "spectrum--dark") {
+    return `
+    --spectrum-global-color-gray-100: rgb(50, 50, 50);
+    --spectrum-global-color-gray-200: rgb(62, 62, 62);
+    --spectrum-global-color-gray-300: rgb(74, 74, 74);
+    --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-100);
+    `
+  }
+  if (theme === "spectrum--darkest") {
+    return `
+  --spectrum-global-color-gray-100: rgb(30, 30, 30);
+  --spectrum-global-color-gray-200: rgb(44, 44, 44);
+  --spectrum-global-color-gray-300: rgb(57, 57, 57);
+  --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-100);
+    `
+  }
+  if (theme === "spectrum--nord") {
+    return `
+    --spectrum-global-color-gray-100: #3b4252;
+
+  --spectrum-global-color-gray-200: #424a5c;
+  --spectrum-global-color-gray-300: #4c566a;
+  --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-100);
+    `
+  }
+  if (theme === "spectrum--midnight") {
+    return `
+    --hue: 220;
+    --sat: 10%;
+    --spectrum-global-color-gray-100: hsl(var(--hue), var(--sat), 17%);
+    --spectrum-global-color-gray-200: hsl(var(--hue), var(--sat), 20%);
+    --spectrum-global-color-gray-300: hsl(var(--hue), var(--sat), 24%);
+    --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-100);
+    `
+  }
+}
diff --git a/packages/server/src/utilities/fileSystem/app.ts b/packages/server/src/utilities/fileSystem/app.ts
index 891f750d19..c708a9422b 100644
--- a/packages/server/src/utilities/fileSystem/app.ts
+++ b/packages/server/src/utilities/fileSystem/app.ts
@@ -1,11 +1,13 @@
 import { budibaseTempDir } from "../budibaseDir"
 import fs from "fs"
 import { join } from "path"
-import { ObjectStoreBuckets } from "../../constants"
+import { ObjectStoreBuckets, devClientVersion } from "../../constants"
 import { updateClientLibrary } from "./clientLibrary"
 import env from "../../environment"
 import { objectStore, context } from "@budibase/backend-core"
 import { TOP_LEVEL_PATH } from "./filesystem"
+import { DocumentType } from "../../db/utils"
+import { App } from "@budibase/types"
 
 export const NODE_MODULES_PATH = join(TOP_LEVEL_PATH, "node_modules")
 
@@ -35,20 +37,25 @@ export const getComponentLibraryManifest = async (library: string) => {
   const filename = "manifest.json"
 
   if (env.isDev() || env.isTest()) {
-    const paths = [
-      join(TOP_LEVEL_PATH, "packages/client", filename),
-      join(process.cwd(), "client", filename),
-    ]
-    for (let path of paths) {
-      if (fs.existsSync(path)) {
-        // always load from new so that updates are refreshed
-        delete require.cache[require.resolve(path)]
-        return require(path)
+    const db = context.getAppDB()
+    const app = await db.get<App>(DocumentType.APP_METADATA)
+
+    if (app.version === devClientVersion || env.isTest()) {
+      const paths = [
+        join(TOP_LEVEL_PATH, "packages/client", filename),
+        join(process.cwd(), "client", filename),
+      ]
+      for (let path of paths) {
+        if (fs.existsSync(path)) {
+          // always load from new so that updates are refreshed
+          delete require.cache[require.resolve(path)]
+          return require(path)
+        }
       }
+      throw new Error(
+        `Unable to find ${filename} in development environment (may need to build).`
+      )
     }
-    throw new Error(
-      `Unable to find ${filename} in development environment (may need to build).`
-    )
   }
 
   if (!appId) {
diff --git a/packages/server/src/utilities/fileSystem/clientLibrary.ts b/packages/server/src/utilities/fileSystem/clientLibrary.ts
index b023b2a65e..26e89af96b 100644
--- a/packages/server/src/utilities/fileSystem/clientLibrary.ts
+++ b/packages/server/src/utilities/fileSystem/clientLibrary.ts
@@ -1,10 +1,12 @@
 import path, { join } from "path"
 import { ObjectStoreBuckets } from "../../constants"
 import fs from "fs"
-import { objectStore } from "@budibase/backend-core"
+import { context, objectStore } from "@budibase/backend-core"
 import { resolve } from "../centralPath"
 import env from "../../environment"
 import { TOP_LEVEL_PATH } from "./filesystem"
+import { DocumentType } from "../../db/utils"
+import { App } from "@budibase/types"
 
 export function devClientLibPath() {
   return require.resolve("@budibase/client")
@@ -120,7 +122,12 @@ export async function updateClientLibrary(appId: string) {
       ContentType: "application/javascript",
     }
   )
-  await Promise.all([manifestUpload, clientUpload])
+
+  const manifestSrc = fs.promises.readFile(manifest, "utf8")
+
+  await Promise.all([manifestUpload, clientUpload, manifestSrc])
+
+  return JSON.parse(await manifestSrc)
 }
 
 /**
@@ -130,30 +137,49 @@ export async function updateClientLibrary(appId: string) {
  * @returns {Promise<void>}
  */
 export async function revertClientLibrary(appId: string) {
-  // Copy backups manifest to tmp directory
-  const tmpManifestPath = await objectStore.retrieveToTmp(
-    ObjectStoreBuckets.APPS,
-    join(appId, "manifest.json.bak")
-  )
+  let manifestPath, clientPath
 
-  // Copy backup client lib to tmp
-  const tmpClientPath = await objectStore.retrieveToTmp(
-    ObjectStoreBuckets.APPS,
-    join(appId, "budibase-client.js.bak")
-  )
+  if (env.isDev()) {
+    const db = context.getAppDB()
+    const app = await db.get<App>(DocumentType.APP_METADATA)
+    clientPath = join(
+      __dirname,
+      `/oldClientVersions/${app.revertableVersion}/app.js`
+    )
+    manifestPath = join(
+      __dirname,
+      `/oldClientVersions/${app.revertableVersion}/manifest.json`
+    )
+  } else {
+    // Copy backups manifest to tmp directory
+    manifestPath = await objectStore.retrieveToTmp(
+      ObjectStoreBuckets.APPS,
+      join(appId, "manifest.json.bak")
+    )
+
+    // Copy backup client lib to tmp
+    clientPath = await objectStore.retrieveToTmp(
+      ObjectStoreBuckets.APPS,
+      join(appId, "budibase-client.js.bak")
+    )
+  }
+
+  const manifestSrc = fs.promises.readFile(manifestPath, "utf8")
 
   // Upload backups as new versions
   const manifestUpload = objectStore.upload({
     bucket: ObjectStoreBuckets.APPS,
     filename: join(appId, "manifest.json"),
-    path: tmpManifestPath,
+    path: manifestPath,
     type: "application/json",
   })
   const clientUpload = objectStore.upload({
     bucket: ObjectStoreBuckets.APPS,
     filename: join(appId, "budibase-client.js"),
-    path: tmpClientPath,
+    path: clientPath,
     type: "application/javascript",
   })
-  await Promise.all([manifestUpload, clientUpload])
+  await Promise.all([manifestSrc, manifestUpload, clientUpload])
+
+  return JSON.parse(await manifestSrc)
 }
diff --git a/packages/types/src/documents/app/app.ts b/packages/types/src/documents/app/app.ts
index 3b7f481253..69bf3489e1 100644
--- a/packages/types/src/documents/app/app.ts
+++ b/packages/types/src/documents/app/app.ts
@@ -71,6 +71,7 @@ export interface AppIcon {
 export interface AppFeatures {
   componentValidation?: boolean
   disableUserMetadata?: boolean
+  skeletonLoader?: boolean
 }
 
 export interface AutomationSettings {
diff --git a/scripts/build.js b/scripts/build.js
index c6b72a80bd..7fbd242d4d 100755
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -3,7 +3,7 @@
 const start = Date.now()
 
 const fs = require("fs")
-const { readdir, copyFile, mkdir } = require('node:fs/promises');
+const { cp, readdir, copyFile, mkdir } = require('node:fs/promises');
 const path = require("path")
 
 const { build } = require("esbuild")
@@ -17,12 +17,6 @@ const { nodeExternalsPlugin } = require("esbuild-node-externals")
 const svelteCompilePlugin = {
   name: 'svelteCompile',
   setup(build) {
-    // This resolve handler is necessary to bundle the Svelte runtime into the the final output,
-    // otherwise the bundled script will attempt to resolve it at runtime
-    build.onResolve({ filter: /svelte\/internal/ }, async () => {
-      return { path: `${process.cwd()}/../../node_modules/svelte/src/runtime/internal/ssr.js` }
-    })
-
     // Compiles `.svelte` files into JS classes so that they can be directly imported into our
     // Typescript packages
     build.onLoad({ filter: /\.svelte$/ }, async (args) => {
@@ -37,7 +31,7 @@ const svelteCompilePlugin = {
           contents: js.code,
           // The loader this is passed to, basically how the above provided content is "treated",
           // the contents provided above will be transpiled and bundled like any other JS file.
-          loader: 'js', 
+          loader: 'js',
           // Where to resolve any imports present in the loaded file
           resolveDir: dir
         }
@@ -80,11 +74,11 @@ async function runBuild(entry, outfile) {
     plugins: [
       svelteCompilePlugin,
       TsconfigPathsPlugin({ tsconfig: tsconfigPathPluginContent }),
-      nodeExternalsPlugin(),
+      nodeExternalsPlugin({
+        allowList: ["@budibase/frontend-core", "svelte"]
+      }),
     ],
     preserveSymlinks: true,
-    loader: {
-    },
     metafile: true,
     external: [
       "deasync",
@@ -109,13 +103,23 @@ async function runBuild(entry, outfile) {
     await Promise.all(fileCopyPromises)
   })()
 
+  const oldClientVersions = (async () => {
+    try {
+      await cp('./build/oldClientVersions', './dist/oldClientVersions', { recursive: true });
+    } catch (e) {
+      if (e.code !== "EEXIST" && e.code !== "ENOENT") {
+        throw e;
+      }
+    }
+  })()
+
   const mainBuild = build({
     ...sharedConfig,
     platform: "node",
     outfile,
   })
 
-  await Promise.all([hbsFiles, mainBuild])
+  await Promise.all([hbsFiles, mainBuild, oldClientVersions])
 
   fs.writeFileSync(
     `dist/${path.basename(outfile)}.meta.json`,
diff --git a/scripts/getPastClientVersion.js b/scripts/getPastClientVersion.js
new file mode 100644
index 0000000000..2db1880c65
--- /dev/null
+++ b/scripts/getPastClientVersion.js
@@ -0,0 +1,45 @@
+const fs = require('node:fs/promises');
+const util = require('node:util');
+const { argv } = require('node:process');
+const exec = util.promisify(require('node:child_process').exec);
+
+const version = argv[2]
+
+const getPastClientVersion = async () => {
+  const manifestRaw = await fetch(`https://api.github.com/repos/budibase/budibase/contents/packages/client/manifest.json?ref=v${version}`).then(r => r.json());
+
+  // GitHub response will contain a message field containing the following string if the version can't be found.
+  if (manifestRaw?.message?.includes("No commit found")) {
+    throw `Can't find a GitHub tag with version "${version}"`
+  }
+
+  const manifest = Buffer.from(manifestRaw.content, 'base64').toString('utf8')
+
+  await fs.mkdir(`packages/server/build/oldClientVersions/${version}`, { recursive: true });
+  await fs.writeFile(`packages/server/build/oldClientVersions/${version}/manifest.json`, manifest)
+
+  const npmRegistry = await fetch(`https://registry.npmjs.org/@budibase/client/${version}`).then(r => r.json());
+
+  // The json response from npm is just a string starting with the following if the version can't be found
+  if (typeof npmRegistry === "string" &&  npmRegistry.startsWith("version not found")) {
+    throw `Can't find @budibase/client with version "${version}" in npm registry`
+  }
+
+  // Create a temp directory to store the @budibase/client library in
+  await fs.mkdir("clientVersionTmp", { recursive: true });
+
+  // Get the tarball of the @budibase/client library and pipe it into tar to extract it
+  await exec(`curl -L ${npmRegistry.dist.tarball} --output - | tar -xvzf - -C clientVersionTmp`);
+
+  // Copy the compiled client version we want to the oldClientVersions dir and delete the temp directory
+  await fs.copyFile('./clientVersionTmp/package/dist/budibase-client.js', `./packages/server/build/oldClientVersions/${version}/app.js`);
+  await fs.rm("clientVersionTmp", { recursive: true });
+
+  // Check what client versions the user has locally and update the `clientVersions.json` file in the builder so that they can be selected
+  const rootDir = await fs.readdir('packages/server/build/oldClientVersions/', { withFileTypes: true });
+  const dirs = rootDir.filter(entry => entry.isDirectory()).map(dir => dir.name);
+
+  await fs.writeFile("packages/builder/src/components/deploy/clientVersions.json", JSON.stringify(dirs))
+}
+
+getPastClientVersion().catch(e => console.error(e));