Fix className autocorrect and make client load time optional

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>

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

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>

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} />

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"),

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 => ({