Improve sheet loading states

2023-04-13 14:30:01 +01:00 · 2023-04-13 14:30:01 +01:00 · f7f1ee49a6
parent fa0cc17682
commit f7f1ee49a6
12 changed files with 45 additions and 22 deletions
--- 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}>
--- 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}>
--- 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>

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