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 @@
}
-
+
Manage access
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
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 }))
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")
-
+
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")
-
+
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")
dispatch("add-column")}
- disabled={!$config.allowAddColumns}
+ disabled={!$loaded || !$config.allowAddColumns}
>
Create column
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")
dispatch("add-row")}
- disabled={!$config.allowAddRows || (!$columns.length && !$stickyColumn)}
+ disabled={!loaded ||
+ !$config.allowAddRows ||
+ (!$columns.length && !$stickyColumn)}
>
Create row
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
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
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
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 @@
+ {:else}
+
{/if}
@@ -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;
+ }