Expose loading state of sheet and improve column highlighting logic

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

@@ -2,11 +2,13 @@
   import CreateColumnButton from "../CreateColumnButton.svelte"
   import { getContext, onMount } from "svelte"
 
-  const { rows, columns, subscribe, filter } = getContext("sheet")
+  const { rows, columns, subscribe, filter, loaded } = getContext("sheet")
 
   let createColumnModal
 
-  $: highlighted = !$filter.length && (!$rows.length || !$columns.length)
+  $: hasCols = !$loaded || $columns.length
+  $: hasRows = !$loaded || $filter.length || $rows.length
+  $: highlighted = !hasRows || !hasCols
 
   onMount(() => subscribe("add-column", createColumnModal.show))
 </script>

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

@@ -3,10 +3,10 @@
   import CreateEditRow from "../../modals/CreateEditRow.svelte"
   import { getContext } from "svelte"
 
-  const { rows, columns, filter } = getContext("sheet")
+  const { rows, columns, filter, loaded } = getContext("sheet")
 
-  $: hasCols = !!$columns.length
-  $: hasRows = $rows.length || $filter.length
+  $: hasCols = !$loaded || $columns.length
+  $: hasRows = !$loaded || $filter.length || $rows.length
 </script>
 
 <CreateRowButton

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

@@ -1,7 +1,7 @@
 import { get, writable, derived } from "svelte/store"
 
 export const createReorderStores = context => {
-  const { columns, rand, scroll, bounds, stickyColumn } = context
+  const { columns, scroll, bounds, stickyColumn } = context
   const reorderInitialState = {
     sourceColumn: null,
     targetColumn: null,

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

@@ -10,14 +10,12 @@ export const createRowsStore = context => {
   const schema = writable({})
   const table = writable(null)
   const filter = writable([])
+  const loaded = writable(false)
   const sort = writable({
     column: null,
     order: null,
   })
 
-  // Flag for whether this is the first time loading our fetch
-  let loaded = false
-
   // Local cache of row IDs to speed up checking if a row exists
   let rowCacheMap = {}
 
@@ -37,7 +35,7 @@ export const createRowsStore = context => {
       return null
     }
     // Wipe state and fully hydrate next time our fetch returns data
-    loaded = false
+    loaded.set(false)
 
     // Create fetch and load initial data
     return fetchData({
@@ -63,9 +61,9 @@ export const createRowsStore = context => {
     }
     $fetch.subscribe($$fetch => {
       if ($$fetch.loaded) {
-        if (!loaded) {
+        if (!get(loaded)) {
           // Hydrate initial data
-          loaded = true
+          loaded.set(true)
           rowCacheMap = {}
           rows.set([])
         }
@@ -273,5 +271,6 @@ export const createRowsStore = context => {
     schema,
     sort,
     filter,
+    loaded,
   }
 }