chore: hide table rows while results are loading

packages/react-storage/src/components/StorageBrowser/components/LoadingIndicator.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { IconElement, SpanElement, ViewElement } from '../context/elements';
+import { STORAGE_BROWSER_BLOCK } from '../constants';
+
+export const LoadingIndicator = (): React.JSX.Element => (
+  <ViewElement className={`${STORAGE_BROWSER_BLOCK}__loading-indicator`}>
+    <IconElement
+      className={`${STORAGE_BROWSER_BLOCK}__loading-indicator-icon`}
+      variant="loading"
+    />
+    <SpanElement
+      className={`${STORAGE_BROWSER_BLOCK}__loading-indicator-text`}
+      aria-live="polite"
+    >
+      Loading
+    </SpanElement>
+  </ViewElement>
+);

packages/react-storage/src/components/StorageBrowser/components/__tests__/LoadingIndicator.spec.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { LoadingIndicator } from '../LoadingIndicator';
+
+describe('LoadingIndicator', () => {
+  it('renders', () => {
+    render(<LoadingIndicator />);
+
+    const indicator = screen.getByText('Loading');
+
+    expect(indicator).toBeInTheDocument();
+  });
+});

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

@@ -11,17 +11,22 @@ import { TextDataCell } from './dataCells/TextDataCell';
 import { DataTableDataCell, DataTableHeader } from './types';
 import { WithKey } from '../../components/types';
 import { CheckboxHeader } from './headers/CheckboxHeader';
+import { LoadingIndicator } from '../../components/LoadingIndicator';
+import { STORAGE_BROWSER_BLOCK } from '../../constants';
+import { ViewElement } from '../../context/elements';
 
 export interface DataTableRow {
   content: WithKey<DataTableDataCell>[];
 }
 
 export interface DataTableProps {
+  isLoading: boolean;
   headers: WithKey<DataTableHeader>[];
   rows: WithKey<DataTableRow>[];
 }
 
 export const DataTable = ({
+  isLoading,
   headers,
   rows,
 }: DataTableProps): React.JSX.Element => {
@@ -49,44 +54,51 @@ 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} />;
+  return (
+    <ViewElement className={`${STORAGE_BROWSER_BLOCK}__table-wrapper`}>
+      <Table headers={mappedHeaders} rows={mappedRows} />
+      {!!isLoading && <LoadingIndicator />}
+    </ViewElement>
+  );
 };

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

@@ -154,6 +154,7 @@ export const useDataTable = (): DataTableProps => {
 
   return {
     headers: mappedHeaders ?? [],
+    isLoading: !!data.isDataRefreshDisabled,
     rows: sortedRows ?? [],
   };
 };

packages/react-storage/src/components/StorageBrowser/views/LocationActionView/CopyView/FoldersTableControl.tsx

@@ -9,6 +9,7 @@ import { getDestinationPickerTableData } from './utils';
 
 export interface FoldersTableProps {
   folders?: FolderData[];
+  isProcessing?: boolean;
   onSelect?: (value: string) => void;
 }
 
@@ -18,10 +19,11 @@ export const { useFoldersTable, FoldersTableProvider } = createContextUtilities(
 );
 
 export const FoldersTableControl = (): React.JSX.Element => {
-  const { folders, onSelect } = useFoldersTable();
+  const { folders, isProcessing, onSelect } = useFoldersTable();
 
   const tableData = getDestinationPickerTableData({
     folders,
+    isLoading: !!isProcessing,
     onSelect,
   });
 

packages/react-storage/src/components/StorageBrowser/views/LocationActionView/CopyView/utils.ts

@@ -28,9 +28,11 @@ export const getDestinationListFullPrefix = (
 
 export const getDestinationPickerTableData = ({
   folders,
+  isLoading,
   onSelect,
 }: {
   folders?: { key: string; id: string }[];
+  isLoading: boolean;
   onSelect?: (name: string) => void;
 }): DataTableProps => {
   const rows: DataTableProps['rows'] = !folders
@@ -58,6 +60,7 @@ export const getDestinationPickerTableData = ({
 
   const tableData: DataTableProps = {
     headers: DESTINATION_PICKER_COLUMNS,
+    isLoading,
     rows,
   };
   return tableData;

packages/react-storage/src/components/StorageBrowser/views/LocationActionView/getActionViewTableData.ts

@@ -196,5 +196,5 @@ export const getActionViewTableData = <T extends TaskData = TaskData>({
     };
   });
 
-  return { headers, rows };
+  return { headers, isLoading: isProcessing, rows };
 };

packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/LocationDetailView.tsx

@@ -3,7 +3,6 @@ import { ViewElement } from '../../context/elements';
 import { DataTableControl } from '../../controls/DataTableControl';
 import { DataRefreshControl } from '../../controls/DataRefreshControl';
 import { DropZoneControl } from '../../controls/DropZoneControl';
-import { LoadingIndicatorControl } from '../../controls/LoadingIndicatorControl';
 import { NavigationControl } from '../../controls/NavigationControl';
 import { PaginationControl } from '../../controls/PaginationControl';
 import { SearchControl } from '../../controls/SearchControl';
@@ -128,6 +127,7 @@ export function LocationDetailView({
             location,
             fileDataItems,
             hasFiles,
+            isLoading,
             pageItems,
             selectFileLabel,
             selectAllFilesLabel,
@@ -179,7 +179,6 @@ export function LocationDetailView({
           <MessageControl />
         </ViewElement>
         <LocationDetailMessage show={hasError} message={message} />
-        <LoadingIndicatorControl />
         {hasError ? null : (
           <DropZoneControl>
             <DataTableControl />

packages/react-storage/src/components/StorageBrowser/views/LocationDetailView/getLocationDetailViewTableData/getLocationDetailViewTableData.ts

@@ -17,6 +17,7 @@ export const getLocationDetailViewTableData = ({
   location,
   fileDataItems,
   hasFiles,
+  isLoading,
   pageItems,
   selectFileLabel,
   selectAllFilesLabel,
@@ -29,6 +30,7 @@ export const getLocationDetailViewTableData = ({
   location: LocationState;
   fileDataItems?: FileData[];
   hasFiles: boolean;
+  isLoading: boolean;
   pageItems: LocationItemData[];
   selectFileLabel: string;
   selectAllFilesLabel: string;
@@ -102,5 +104,5 @@ export const getLocationDetailViewTableData = ({
     }
   });
 
-  return { headers, rows };
+  return { headers, isLoading, rows };
 };

packages/react-storage/src/components/StorageBrowser/views/LocationsView/LocationsView.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import { ViewElement } from '../../context/elements';
 import { DataRefreshControl } from '../../controls/DataRefreshControl';
 import { DataTableControl } from '../../controls/DataTableControl';
-import { LoadingIndicatorControl } from '../../controls/LoadingIndicatorControl';
 import { PaginationControl } from '../../controls/PaginationControl';
 import { SearchControl } from '../../controls/SearchControl';
 import { TitleControl } from '../../controls/TitleControl';
@@ -137,6 +136,7 @@ export function LocationsView({
         tableData: getLocationsViewTableData({
           getPermissionName,
           headers,
+          isLoading,
           pageItems,
           onDownload,
           onNavigate,
@@ -180,7 +180,6 @@ export function LocationsView({
           />
         </ViewElement>
         <LocationsMessage show={hasError} message={message} />
-        <LoadingIndicatorControl />
         {hasError ? null : <DataTableControl />}
         <LocationsEmptyMessage show={shouldShowEmptyMessage} />
       </div>

packages/react-storage/src/components/StorageBrowser/views/LocationsView/getLocationsViewTableData/getLocationsViewTableData.ts

@@ -7,12 +7,14 @@ export const getLocationsViewTableData = ({
   onNavigate,
   onDownload,
   headers,
+  isLoading,
   getDownloadLabel,
   getPermissionName,
 }: {
   pageItems: LocationData[];
   onNavigate: (location: LocationData) => void;
   headers: LocationViewHeaders;
+  isLoading: boolean;
   onDownload: (location: LocationData) => void;
   getDownloadLabel: (fileName: string) => string;
   getPermissionName: (permissions: LocationPermissions) => string;
@@ -79,5 +81,5 @@ export const getLocationsViewTableData = ({
     };
   });
 
-  return { headers, rows };
+  return { headers, isLoading, rows };
 };

packages/ui/src/theme/css/component/StorageBrowser/storageBrowser.scss

@@ -57,7 +57,16 @@
     overflow: hidden;
     position: relative;
     width: 100%;
-    display: block;
+  }
+
+  &__table-wrapper {
+    display: grid;
+    grid-template-rows: auto 1fr;
+    height: 100%;
+  }
+
+  &__loading-indicator-icon {
+    animation: var(--storage-browser-loading-animation);
   }
 
   &__data-table {
@@ -67,8 +76,6 @@
     border-style: solid;
     border-color: var(--amplify-colors-border-secondary);
     width: 100%;
-    height: 100%;
-    display: block;
   }
 
   &__table {