Improve sheet loading state

packages/builder/src/components/backend/DataTable/buttons/sheet/SheetCreateViewButton.svelte

@@ -3,11 +3,11 @@
   import { Modal, ActionButton } from "@budibase/bbui"
   import CreateViewModal from "../../modals/CreateViewModal.svelte"
 
-  const { rows, columns, loaded } = getContext("sheet")
+  const { rows, columns } = getContext("sheet")
 
   let modal
 
-  $: disabled = !$loaded || !$columns.length || !$rows.length
+  $: disabled = !$columns.length || !$rows.length
 </script>
 
 <ActionButton {disabled} icon="CollectionAdd" quiet on:click={modal.show}>

packages/builder/src/components/backend/DataTable/buttons/sheet/SheetExportButton.svelte

@@ -2,10 +2,10 @@
   import ExportButton from "../ExportButton.svelte"
   import { getContext } from "svelte"
 
-  const { rows, columns, tableId, sort, selectedRows, filter, loaded } =
+  const { rows, columns, tableId, sort, selectedRows, filter } =
     getContext("sheet")
 
-  $: disabled = !$loaded || !$rows.length || !$columns.length
+  $: disabled = !$rows.length || !$columns.length
   $: selectedRowArray = Object.keys($selectedRows).map(id => ({ _id: id }))
 </script>
 

packages/builder/src/components/backend/DataTable/buttons/sheet/SheetFilterButton.svelte

@@ -2,7 +2,7 @@
   import TableFilterButton from "../TableFilterButton.svelte"
   import { getContext } from "svelte"
 
-  const { columns, config, filter, table, loaded } = getContext("sheet")
+  const { columns, config, filter, table } = getContext("sheet")
 
   const onFilter = e => {
     filter.set(e.detail || [])
@@ -14,7 +14,7 @@
     schema={$table?.schema}
     filters={$filter}
     on:change={onFilter}
-    disabled={!$loaded || !$columns.length}
+    disabled={!$columns.length}
     tableId={$config.tableId}
   />
 {/key}

packages/builder/src/components/backend/DataTable/buttons/sheet/SheetImportButton.svelte

@@ -2,11 +2,7 @@
   import ImportButton from "../ImportButton.svelte"
   import { getContext } from "svelte"
 
-  const { rows, tableId, loaded } = getContext("sheet")
+  const { rows, tableId } = getContext("sheet")
 </script>
 
-<ImportButton
-  tableId={$tableId}
-  on:importrows={rows.actions.refreshData}
-  disabled={!$loaded}
-/>
+<ImportButton tableId={$tableId} on:importrows={rows.actions.refreshData} />

packages/builder/src/components/backend/DataTable/buttons/sheet/SheetManageAccessButton.svelte

@@ -2,7 +2,7 @@
   import ManageAccessButton from "../ManageAccessButton.svelte"
   import { getContext } from "svelte"
 
-  const { config, loaded } = getContext("sheet")
+  const { config } = getContext("sheet")
 </script>
 
-<ManageAccessButton disabled={!$loaded} resourceId={$config.tableId} />
+<ManageAccessButton resourceId={$config.tableId} />

packages/frontend-core/src/components/sheet/controls/AddColumnButton.svelte

@@ -2,7 +2,7 @@
   import { ActionButton } from "@budibase/bbui"
   import { getContext } from "svelte"
 
-  const { config, dispatch, loaded } = getContext("sheet")
+  const { config, dispatch } = getContext("sheet")
 </script>
 
 <ActionButton
@@ -10,7 +10,7 @@
   quiet
   size="M"
   on:click={() => dispatch("add-column")}
-  disabled={!$loaded || !$config.allowAddColumns}
+  disabled={!$config.allowAddColumns}
 >
   Create column
 </ActionButton>

packages/frontend-core/src/components/sheet/controls/HideColumnsButton.svelte

@@ -46,7 +46,7 @@
     size="M"
     on:click={() => (open = !open)}
     selected={open || anyHidden}
-    disabled={!$loaded || !$columns.length}
+    disabled={!$columns.length}
   >
     Hide columns
   </ActionButton>

packages/frontend-core/src/components/sheet/controls/RowHeightButton.svelte

@@ -41,7 +41,6 @@
     size="M"
     on:click={() => (open = !open)}
     selected={open}
-    disabled={!$loaded}
   >
     Row height
   </ActionButton>

packages/frontend-core/src/components/sheet/controls/SortButton.svelte

@@ -67,7 +67,7 @@
     size="M"
     on:click={() => (open = !open)}
     selected={open || $sort.column}
-    disabled={!$loaded || !columnOptions.length}
+    disabled={!columnOptions.length}
   >
     Sort
   </ActionButton>

packages/frontend-core/src/components/sheet/layout/Sheet.svelte

@@ -27,6 +27,7 @@
     DefaultRowHeight,
   } from "../lib/constants"
   import RowHeightButton from "../controls/RowHeightButton.svelte"
+  import { fade } from "svelte/transition"
 
   export let API
   export let tableId
@@ -62,8 +63,15 @@
   context = attachStores(context)
 
   // Reference some stores for local use
-  const { isResizing, isReordering, ui, loaded, rowHeight, contentLines } =
-    context
+  const {
+    isResizing,
+    isReordering,
+    ui,
+    loaded,
+    loading,
+    rowHeight,
+    contentLines,
+  } = context
 
   // Keep stores up to date
   $: tableIdStore.set(tableId)
@@ -124,8 +132,9 @@
         </div>
       </div>
     </div>
-  {:else}
-    <div class="sheet-loading">
+  {/if}
+  {#if $loading}
+    <div in:fade|local={{ duration: 130 }} class="sheet-loading">
       <ProgressCircle />
     </div>
   {/if}
@@ -222,5 +231,16 @@
     height: 100%;
     display: grid;
     place-items: center;
+    z-index: 10;
+  }
+  .sheet-loading:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--background);
+    opacity: 0.6;
   }
 </style>

packages/frontend-core/src/components/sheet/stores/rows.js

@@ -11,6 +11,7 @@ export const createStores = () => {
   const rows = writable([])
   const table = writable(null)
   const filter = writable([])
+  const loading = writable(false)
   const loaded = writable(false)
   const sort = writable(initialSortState)
   const rowChangeCache = writable({})
@@ -29,12 +30,23 @@ export const createStores = () => {
     {}
   )
 
+  // Mark loaded as true if we've ever stopped loading
+  let hasStartedLoading = false
+  loading.subscribe($loading => {
+    if ($loading) {
+      hasStartedLoading = true
+    } else if (hasStartedLoading) {
+      loaded.set(true)
+    }
+  })
+
   return {
     rows,
     rowLookupMap,
     table,
     filter,
     loaded,
+    loading,
     sort,
     rowChangeCache,
     inProgressChanges,
@@ -47,7 +59,7 @@ export const deriveStores = context => {
     rowLookupMap,
     table,
     filter,
-    loaded,
+    loading,
     sort,
     tableId,
     API,
@@ -86,6 +98,7 @@ export const deriveStores = context => {
     unsubscribe?.()
     fetch.set(null)
     instanceLoaded.set(false)
+    loading.set(true)
 
     // Reset state
     filter.set([])
@@ -136,7 +149,7 @@ export const deriveStores = context => {
         handleNewRows($fetch.rows, resetRows)
 
         // Notify that we're loaded
-        loaded.set(true)
+        loading.set(false)
       }
     })