chore: hide table rows while results are loading

packages/react-storage/src/components/StorageBrowser/composables/DataTable/DataTable.tsx

@@ -18,11 +18,13 @@ export interface DataTableRow {
 
 export interface DataTableProps {
   headers: WithKey<DataTableHeader>[];
+  isLoading?: boolean;
   rows: WithKey<DataTableRow>[];
 }
 
 export const DataTable = ({
   headers,
+  isLoading,
   rows,
 }: DataTableProps): React.JSX.Element => {
   const mappedHeaders = headers.map(({ key, content, type }) => {
@@ -49,44 +51,46 @@ export const DataTable = ({
     }
   });
 
-  const mappedRows = rows.map(({ key, content }) => ({
-    key,
-    content: content.map(({ key, content, type }) => {
-      switch (type) {
-        case 'button': {
-          return {
-            key,
-            content: <ButtonDataCell content={content} />,
-          };
-        }
-        case 'checkbox': {
-          return {
-            key,
-            content: <CheckboxDataCell content={content} />,
-          };
-        }
-        case 'date': {
-          return {
-            key,
-            content: <DateDataCell content={content} />,
-          };
-        }
-        case 'number': {
-          return {
-            key,
-            content: <NumberDataCell content={content} />,
-          };
-        }
-        case 'text':
-        default: {
-          return {
-            key,
-            content: <TextDataCell content={content} />,
-          };
-        }
-      }
-    }),
-  }));
+  const mappedRows = isLoading
+    ? []
+    : rows.map(({ key, content }) => ({
+        key,
+        content: content.map(({ key, content, type }) => {
+          switch (type) {
+            case 'button': {
+              return {
+                key,
+                content: <ButtonDataCell content={content} />,
+              };
+            }
+            case 'checkbox': {
+              return {
+                key,
+                content: <CheckboxDataCell content={content} />,
+              };
+            }
+            case 'date': {
+              return {
+                key,
+                content: <DateDataCell content={content} />,
+              };
+            }
+            case 'number': {
+              return {
+                key,
+                content: <NumberDataCell content={content} />,
+              };
+            }
+            case 'text':
+            default: {
+              return {
+                key,
+                content: <TextDataCell content={content} />,
+              };
+            }
+          }
+        }),
+      }));
 
   return <Table headers={mappedHeaders} rows={mappedRows} />;
 };

packages/react-storage/src/components/StorageBrowser/controls/hooks/__tests__/useDataTable.spec.ts

@@ -88,6 +88,7 @@ describe('useDataTable', () => {
         { key: 'header-4', ...textHeader },
         { key: 'header-5', ...textHeader },
       ],
+      isLoading: undefined,
       rows: [
         {
           key: 'row-1',
@@ -108,7 +109,11 @@ describe('useDataTable', () => {
 
     const { result } = renderHook(() => useDataTable());
 
-    expect(result.current).toStrictEqual({ headers: [], rows: [] });
+    expect(result.current).toStrictEqual({
+      headers: [],
+      isLoading: undefined,
+      rows: [],
+    });
   });
 
   it('handles data with no sortable columns', () => {
@@ -130,6 +135,7 @@ describe('useDataTable', () => {
 
     expect(result.current).toStrictEqual({
       headers: [expect.objectContaining({ key: 'header-1' })],
+      isLoading: undefined,
       rows: [expect.objectContaining({ key: 'row-1' })],
     });
   });

packages/react-storage/src/components/StorageBrowser/controls/hooks/useDataTable.ts

@@ -35,7 +35,7 @@ const UNSORTABLE_GROUPS: DataTableDataCell['type'][] = ['checkbox'];
 
 export const useDataTable = (): DataTableProps => {
   const { data } = useControlsContext();
-  const { tableData } = data;
+  const { isLoading, tableData } = data;
 
   const defaultSortIndex = React.useMemo(
     () => tableData?.headers?.findIndex(({ type }) => type === 'sort') ?? -1,
@@ -154,6 +154,7 @@ export const useDataTable = (): DataTableProps => {
 
   return {
     headers: mappedHeaders ?? [],
+    isLoading,
     rows: sortedRows ?? [],
   };
 };