From f7f1ee49a6fcd5d02c16a97388a6a023424ff560 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Thu, 13 Apr 2023 14:30:01 +0100
Subject: [PATCH] Improve sheet loading states

---
 .../buttons/ManageAccessButton.svelte          |  3 ++-
 .../buttons/sheet/SheetCreateViewButton.svelte |  4 ++--
 .../buttons/sheet/SheetExportButton.svelte     |  4 ++--
 .../buttons/sheet/SheetFilterButton.svelte     |  4 ++--
 .../buttons/sheet/SheetImportButton.svelte     |  8 ++++++--
 .../sheet/SheetManageAccessButton.svelte       |  4 ++--
 .../sheet/controls/AddColumnButton.svelte      |  4 ++--
 .../sheet/controls/AddRowButton.svelte         |  7 +++++--
 .../sheet/controls/HideColumnsButton.svelte    |  4 ++--
 .../sheet/controls/RowHeightButton.svelte      |  3 ++-
 .../sheet/controls/SortButton.svelte           |  4 ++--
 .../src/components/sheet/layout/Sheet.svelte   | 18 ++++++++++++++++--
 12 files changed, 45 insertions(+), 22 deletions(-)

diff --git a/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
index ff6c7d651c..4d5faca4c6 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
+++ b/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}>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/sheet/SheetCreateViewButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/sheet/SheetCreateViewButton.svelte
index 0b042574ea..b91751fccd 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/sheet/SheetCreateViewButton.svelte
+++ b/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}>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/sheet/SheetExportButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/sheet/SheetExportButton.svelte
index 995513a8a0..2ae0979496 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/sheet/SheetExportButton.svelte
+++ b/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>
 
diff --git a/packages/builder/src/components/backend/DataTable/buttons/sheet/SheetFilterButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/sheet/SheetFilterButton.svelte
index 0450ae0cdf..b6779bf759 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/sheet/SheetFilterButton.svelte
+++ b/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}
diff --git a/packages/builder/src/components/backend/DataTable/buttons/sheet/SheetImportButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/sheet/SheetImportButton.svelte
index 88e8e213ef..d0df0c45e6 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/sheet/SheetImportButton.svelte
+++ b/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}
+/>
diff --git a/packages/builder/src/components/backend/DataTable/buttons/sheet/SheetManageAccessButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/sheet/SheetManageAccessButton.svelte
index 3533830ffb..a81c5fd43c 100644
--- a/packages/builder/src/components/backend/DataTable/buttons/sheet/SheetManageAccessButton.svelte
+++ b/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} />
diff --git a/packages/frontend-core/src/components/sheet/controls/AddColumnButton.svelte b/packages/frontend-core/src/components/sheet/controls/AddColumnButton.svelte
index 56cec9126f..860b6727fa 100644
--- a/packages/frontend-core/src/components/sheet/controls/AddColumnButton.svelte
+++ b/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>
diff --git a/packages/frontend-core/src/components/sheet/controls/AddRowButton.svelte b/packages/frontend-core/src/components/sheet/controls/AddRowButton.svelte
index 41b1ff402d..1d4e8bcc67 100644
--- a/packages/frontend-core/src/components/sheet/controls/AddRowButton.svelte
+++ b/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>
diff --git a/packages/frontend-core/src/components/sheet/controls/HideColumnsButton.svelte b/packages/frontend-core/src/components/sheet/controls/HideColumnsButton.svelte
index 368d0a3f9c..bc5c1f1240 100644
--- a/packages/frontend-core/src/components/sheet/controls/HideColumnsButton.svelte
+++ b/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>
diff --git a/packages/frontend-core/src/components/sheet/controls/RowHeightButton.svelte b/packages/frontend-core/src/components/sheet/controls/RowHeightButton.svelte
index e988d78191..6fd7ae2f9b 100644
--- a/packages/frontend-core/src/components/sheet/controls/RowHeightButton.svelte
+++ b/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>
diff --git a/packages/frontend-core/src/components/sheet/controls/SortButton.svelte b/packages/frontend-core/src/components/sheet/controls/SortButton.svelte
index 20b5dba7d4..663fe2d949 100644
--- a/packages/frontend-core/src/components/sheet/controls/SortButton.svelte
+++ b/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>
diff --git a/packages/frontend-core/src/components/sheet/layout/Sheet.svelte b/packages/frontend-core/src/components/sheet/layout/Sheet.svelte
index 3c57436ffc..4c5aa71215 100644
--- a/packages/frontend-core/src/components/sheet/layout/Sheet.svelte
+++ b/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>