From 96150094b73e5ae74fccd1fee072869fbd03b391 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 24 Feb 2022 14:14:55 +0000
Subject: [PATCH] Fix className autocorrect and make client load time optional

---
 packages/client/src/components/ClientApp.svelte        |  4 ++--
 packages/client/src/components/Component.svelte        |  2 +-
 .../src/components/devtools/DevToolsHeader.svelte      |  5 +++--
 .../src/components/devtools/DevToolsStatsTab.svelte    | 10 ++++++----
 packages/client/src/stores/app.js                      |  3 ++-
 packages/client/src/stores/devTools.js                 |  4 ++--
 6 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index 9283ee76b0..a0484ace37 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -82,10 +82,10 @@
     id="spectrum-root"
     lang="en"
     dir="ltr"
-    className="spectrum spectrum--medium {$themeStore.theme}"
+    class="spectrum spectrum--medium {$themeStore.theme}"
   >
     {#if permissionError}
-      <div className="error">
+      <div class="error">
         <Layout justifyItems="center" gap="S">
           {@html ErrorSVG}
           <Heading size="L">You don't have permission to use this app</Heading>
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index 25ed3a9ac9..7feb92fb86 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -377,7 +377,7 @@
   <!-- The ID is used as a class because getElementsByClassName is O(1) -->
   <!-- and the performance matters for the selection indicators -->
   <div
-    className={`component ${id}`}
+    class={`component ${id}`}
     class:draggable
     class:droppable
     class:empty
diff --git a/packages/client/src/components/devtools/DevToolsHeader.svelte b/packages/client/src/components/devtools/DevToolsHeader.svelte
index 2fc9800029..40120119b9 100644
--- a/packages/client/src/components/devtools/DevToolsHeader.svelte
+++ b/packages/client/src/components/devtools/DevToolsHeader.svelte
@@ -65,8 +65,9 @@
     flex: 0 0 50px;
     grid-template-columns: 1fr auto;
   }
-  .dev-preview-header
-    :global(.spectrum-Heading, .spectrum-Picker-menuIcon, .spectrum-Picker-label) {
+  .dev-preview-header :global(.spectrum-Heading),
+  .dev-preview-header :global(.spectrum-Picker-menuIcon),
+  .dev-preview-header :global(.spectrum-Picker-label) {
     color: white !important;
   }
 </style>
diff --git a/packages/client/src/components/devtools/DevToolsStatsTab.svelte b/packages/client/src/components/devtools/DevToolsStatsTab.svelte
index 468cc35322..dffca9d145 100644
--- a/packages/client/src/components/devtools/DevToolsStatsTab.svelte
+++ b/packages/client/src/components/devtools/DevToolsStatsTab.svelte
@@ -8,10 +8,12 @@
   <DevToolsStat label="App" value={$appStore.application?.name} />
   <DevToolsStat label="Tenant" value={$appStore.application?.tenantId} />
   <DevToolsStat label="Version" value={$appStore.application?.version} />
-  <DevToolsStat
-    label="Client load time"
-    value={`${$appStore.clientLoadTime} ms`}
-  />
+  {#if $appStore.clientLoadTime}
+    <DevToolsStat
+      label="Client load time"
+      value={`${$appStore.clientLoadTime} ms`}
+    />
+  {/if}
   <DevToolsStat label="App layouts" value={$screenStore.layouts?.length || 0} />
   <DevToolsStat label="Active layout" value={$screenStore.activeLayout?.name} />
   <DevToolsStat label="App screens" value={$screenStore.screens?.length || 0} />
diff --git a/packages/client/src/stores/app.js b/packages/client/src/stores/app.js
index 1f99a92e7e..2c2ead66c4 100644
--- a/packages/client/src/stores/app.js
+++ b/packages/client/src/stores/app.js
@@ -4,7 +4,7 @@ import { get, writable } from "svelte/store"
 const initialState = {
   appId: null,
   isDevApp: false,
-  clientLoadTime: Date.now() - (window.INIT_TIME || Date.now()),
+  clientLoadTime: window.INIT_TIME ? Date.now() - window.INIT_TIME : null,
 }
 
 const createAppStore = () => {
@@ -19,6 +19,7 @@ const createAppStore = () => {
     try {
       const appDefinition = await API.fetchAppPackage(appId)
       store.set({
+        ...initialState,
         ...appDefinition,
         appId: appDefinition?.application?.appId,
         isDevApp: appId.startsWith("app_dev"),
diff --git a/packages/client/src/stores/devTools.js b/packages/client/src/stores/devTools.js
index 74d8c406da..6d631080ab 100644
--- a/packages/client/src/stores/devTools.js
+++ b/packages/client/src/stores/devTools.js
@@ -1,5 +1,5 @@
 import { get } from "svelte/store"
-import { localStorageStore } from "builder/src/builderStore/store/localStorage"
+import { createLocalStorageStore } from "@budibase/frontend-core"
 import { appStore } from "./app"
 import { initialise } from "./initialise"
 import { authStore } from "./auth"
@@ -12,7 +12,7 @@ const initialState = {
 
 const createDevToolStore = () => {
   const localStorageKey = `${get(appStore).appId}.devTools`
-  const store = localStorageStore(localStorageKey, initialState)
+  const store = createLocalStorageStore(localStorageKey, initialState)
 
   const setVisible = visible => {
     store.update(state => ({