Improve sheet loading states

packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte

@@ -4,6 +4,7 @@
   import ManageAccessModal from "../modals/ManageAccessModal.svelte"
 
   export let resourceId
+  export let disabled = false
 
   let modal
   let resourcePermissions
@@ -14,7 +15,7 @@
   }
 </script>
 
-<ActionButton icon="LockClosed" quiet on:click={openDropdown}>
+<ActionButton icon="LockClosed" quiet on:click={openDropdown} {disabled}>
   Manage access
 </ActionButton>
 <Modal bind:this={modal}>

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 } = getContext("sheet")
+  const { rows, columns, loaded } = getContext("sheet")
 
   let modal
 
-  $: disabled = !$columns.length || !$rows.length
+  $: disabled = !$loaded || !$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 } =
+  const { rows, columns, tableId, sort, selectedRows, filter, loaded } =
     getContext("sheet")
 
-  $: disabled = !$rows.length || !$columns.length
+  $: disabled = !$loaded || !$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 } = getContext("sheet")
+  const { columns, config, filter, table, loaded } = getContext("sheet")
 
   const onFilter = e => {
     filter.set(e.detail || [])
@@ -14,7 +14,7 @@
     schema={$table?.schema}
     filters={$filter}
     on:change={onFilter}
-    disabled={!$columns.length}
+    disabled={!$loaded || !$columns.length}
     tableId={$config.tableId}
   />
 {/key}

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

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

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 } = getContext("sheet")
+  const { config, loaded } = getContext("sheet")
 </script>
 
-<ManageAccessButton resourceId={$config.tableId} />
+<ManageAccessButton disabled={!$loaded} 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 } = getContext("sheet")
+  const { config, dispatch, loaded } = getContext("sheet")
 </script>
 
 <ActionButton
@@ -10,7 +10,7 @@
   quiet
   size="M"
   on:click={() => dispatch("add-column")}
-  disabled={!$config.allowAddColumns}
+  disabled={!$loaded || !$config.allowAddColumns}
 >
   Create column
 </ActionButton>

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

@@ -2,7 +2,8 @@
   import { ActionButton } from "@budibase/bbui"
   import { getContext } from "svelte"
 
-  const { dispatch, columns, stickyColumn, config } = getContext("sheet")
+  const { dispatch, columns, stickyColumn, config, loaded } =
+    getContext("sheet")
 </script>
 
 <ActionButton
@@ -10,7 +11,9 @@
   quiet
   size="M"
   on:click={() => dispatch("add-row")}
-  disabled={!$config.allowAddRows || (!$columns.length && !$stickyColumn)}
+  disabled={!loaded ||
+    !$config.allowAddRows ||
+    (!$columns.length && !$stickyColumn)}
 >
   Create row
 </ActionButton>

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

@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
   import { ActionButton, Popover, Toggle } from "@budibase/bbui"
 
-  const { columns } = getContext("sheet")
+  const { columns, loaded } = getContext("sheet")
 
   let open = false
   let anchor
@@ -46,7 +46,7 @@
     size="M"
     on:click={() => (open = !open)}
     selected={open || anyHidden}
-    disabled={!$columns.length}
+    disabled={!$loaded || !$columns.length}
   >
     Hide columns
   </ActionButton>

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

@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
   import { ActionButton, Popover } from "@budibase/bbui"
 
-  const { rowHeight } = getContext("sheet")
+  const { rowHeight, loaded } = getContext("sheet")
   const sizeOptions = [
     {
       label: "Small",
@@ -29,6 +29,7 @@
     size="M"
     on:click={() => (open = !open)}
     selected={open}
+    disabled={!$loaded}
   >
     Row height
   </ActionButton>

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

@@ -2,7 +2,7 @@
   import { getContext } from "svelte"
   import { ActionButton, Popover, Select } from "@budibase/bbui"
 
-  const { sort, visibleColumns, stickyColumn } = getContext("sheet")
+  const { sort, visibleColumns, stickyColumn, loaded } = getContext("sheet")
   const orderOptions = [
     { label: "A-Z", value: "ascending" },
     { label: "Z-A", value: "descending" },
@@ -67,7 +67,7 @@
     size="M"
     on:click={() => (open = !open)}
     selected={open || $sort.column}
-    disabled={!columnOptions.length}
+    disabled={!$loaded || !columnOptions.length}
   >
     Sort
   </ActionButton>

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

@@ -14,7 +14,7 @@
   import StickyColumn from "./StickyColumn.svelte"
   import UserAvatars from "./UserAvatars.svelte"
   import KeyboardManager from "../overlays/KeyboardManager.svelte"
-  import { clickOutside } from "@budibase/bbui"
+  import { clickOutside, ProgressCircle } from "@budibase/bbui"
   import {
     MaxCellRenderHeight,
     MaxCellRenderWidthOverflow,
@@ -119,6 +119,10 @@
         </div>
       </div>
     </div>
+  {:else}
+    <div class="sheet-loading">
+      <ProgressCircle />
+    </div>
   {/if}
   <KeyboardManager />
 </div>
@@ -132,6 +136,7 @@
     align-items: stretch;
     position: relative;
     overflow: hidden;
+    background: var(--cell-background);
 
     /* Variables */
     --cell-background: var(--spectrum-global-color-gray-50);
@@ -164,7 +169,6 @@
   .sheet-data-outer {
     height: 0;
     flex-direction: column;
-    background: var(--cell-background);
   }
   .sheet-data-inner {
     flex-direction: row;
@@ -187,6 +191,7 @@
     border-bottom: 2px solid var(--spectrum-global-color-gray-200);
     padding: var(--cell-padding);
     gap: var(--cell-spacing);
+    background: var(--spectrum-global-color-gray-100);
   }
   .controls-left,
   .controls-right {
@@ -204,4 +209,13 @@
   .overlays {
     z-index: 10;
   }
+
+  /* Loading */
+  .sheet-loading {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: grid;
+    place-items: center;
+  }
 </style>