From 7f263e98706cd2dd1806fabff3f9e78c69313cd7 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 8 Mar 2023 10:49:52 +0000
Subject: [PATCH] Improve loading state

---
 .../src/components/sheet/Sheet.svelte         | 26 ++++++++++++-------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/packages/frontend-core/src/components/sheet/Sheet.svelte b/packages/frontend-core/src/components/sheet/Sheet.svelte
index 6c3bcfa321..655035287d 100644
--- a/packages/frontend-core/src/components/sheet/Sheet.svelte
+++ b/packages/frontend-core/src/components/sheet/Sheet.svelte
@@ -67,7 +67,7 @@
   context = { ...context, ...createMenuStores(context) }
 
   // Reference some stores for local use
-  const { isResizing, isReordering, ui } = context
+  const { isResizing, isReordering, ui, loaded } = context
 
   // Keep config store up to date
   $: config.set({
@@ -84,6 +84,10 @@
   // Expose ability to retrieve context externally to allow sheet control
   export const getContext = () => context
 
+  // Local flag for if the sheet has ever had data
+  let initialised = false
+  loaded.subscribe(state => (initialised = initialised || state))
+
   // Initialise websocket for multi-user
   onMount(() => createWebsocket(context))
 </script>
@@ -105,16 +109,18 @@
       <UserAvatars />
     </div>
   </div>
-  <div class="sheet-data">
-    <StickyColumn />
-    <div class="sheet-main">
-      <HeaderRow />
-      <SheetBody />
+  {#if initialised}
+    <div class="sheet-data">
+      <StickyColumn />
+      <div class="sheet-main">
+        <HeaderRow />
+        <SheetBody />
+      </div>
+      <ResizeOverlay />
+      <ScrollOverlay />
+      <MenuOverlay />
     </div>
-    <ResizeOverlay />
-    <ScrollOverlay />
-    <MenuOverlay />
-  </div>
+  {/if}
   <KeyboardManager />
 </div>