Fix skeleton loading indicator for cells

mathesar-foundation · Apr 14, 2022 · 11900e7 · 11900e7
1 parent 3e45df5
commit 11900e7
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/mathesar_ui/src/components/cell/Cell.svelte b/mathesar_ui/src/components/cell/Cell.svelte
@@ -7,7 +7,7 @@
   export let column: Column;
   export let value: unknown;
   export let isActive = false;
-  export let state: 'loading' | 'error' | 'ready' = 'ready';
+  export let showAsSkeleton = false;
 
   // TODO (IMPORTANT): Calculate this at a higher level, instead of calculating on each cell instance
   $: ({ component, props } = getCellComponentWithProps(column));
@@ -29,7 +29,7 @@
     on:update
   />
 
-  {#if state === 'loading'}
+  {#if showAsSkeleton}
     <div class="loader" />
   {/if}
 </div>

diff --git a/mathesar_ui/src/sections/table-view/row/RowCell.svelte b/mathesar_ui/src/sections/table-view/row/RowCell.svelte
@@ -22,6 +22,7 @@
   import Cell from '@mathesar/components/cell/Cell.svelte';
   import Null from '@mathesar/components/Null.svelte';
   import type { RequestStatus } from '@mathesar/utils/api';
+  import { States } from '@mathesar/utils/api';
   import CellErrors from './CellErrors.svelte';
 
   export let recordsData: RecordsData;
@@ -33,6 +34,7 @@
   export let column: Column;
   export let value: unknown = undefined;
 
+  $: recordsDataState = recordsData.state;
   $: ({ activeCell } = display);
   $: isActive = $activeCell && isCellActive($activeCell, row, column);
   $: modificationStatus = $modificationStatusMap.get(key);
@@ -89,7 +91,7 @@
     {column}
     {isActive}
     {value}
-    state={modificationStatus?.state === 'processing' ? 'loading' : 'ready'}
+    showAsSkeleton={$recordsDataState === States.Loading}
     on:movementKeyDown={moveThroughCells}
     on:activate={() => display.selectCell(row, column)}
     on:update={valueUpdated}