chore: move loading label to prop, return null instead of false, retu…

…rn empty array early
aws-amplify · Nov 15, 2024 · 04bca01 · 04bca01
1 parent 4538b9c
commit 04bca01
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git a/packages/react-storage/src/components/StorageBrowser/components/LoadingIndicator.tsx b/packages/react-storage/src/components/StorageBrowser/components/LoadingIndicator.tsx
@@ -3,7 +3,13 @@ import React from 'react';
 import { IconElement, SpanElement, ViewElement } from '../context/elements';
 import { STORAGE_BROWSER_BLOCK } from '../constants';
 
-export const LoadingIndicator = (): React.JSX.Element => (
+export interface LoadingIndicatorProps {
+  label?: string;
+}
+
+export const LoadingIndicator = ({
+  label,
+}: LoadingIndicatorProps): React.JSX.Element => (
   <ViewElement className={`${STORAGE_BROWSER_BLOCK}__loading-indicator`}>
     <IconElement
       className={`${STORAGE_BROWSER_BLOCK}__loading-indicator-icon`}
@@ -13,7 +19,7 @@ export const LoadingIndicator = (): React.JSX.Element => (
       className={`${STORAGE_BROWSER_BLOCK}__loading-indicator-text`}
       aria-live="polite"
     >
-      Loading
+      {label}
     </SpanElement>
   </ViewElement>
 );
diff --git a/packages/react-storage/src/components/StorageBrowser/composables/DataTable/DataTable.tsx b/packages/react-storage/src/components/StorageBrowser/composables/DataTable/DataTable.tsx
@@ -14,7 +14,9 @@ import { CheckboxHeader } from './headers/CheckboxHeader';
 import { LoadingIndicator } from '../../components/LoadingIndicator';
 import { STORAGE_BROWSER_BLOCK } from '../../constants';
 import { ViewElement } from '../../context/elements';
+import { DEFAULT_LIST_VIEW_DISPLAY_TEXT } from '../../displayText/libraries/en/shared';
 
+const { loadingIndicatorLabel } = DEFAULT_LIST_VIEW_DISPLAY_TEXT;
 export interface DataTableRow {
   content: WithKey<DataTableDataCell>[];
 }
@@ -54,8 +56,9 @@ export const DataTable = ({
     }
   });
 
-  const mappedRows = !isLoading
-    ? rows.map(({ key, content }) => ({
+  const mappedRows = isLoading
+    ? []
+    : rows.map(({ key, content }) => ({
         key,
         content: content.map(({ key, content, type }) => {
           switch (type) {
@@ -92,13 +95,12 @@ export const DataTable = ({
             }
           }
         }),
-      }))
-    : [];
+      }));
 
   return (
     <ViewElement className={`${STORAGE_BROWSER_BLOCK}__table-wrapper`}>
       <Table headers={mappedHeaders} rows={mappedRows} />
-      {!!isLoading && <LoadingIndicator />}
+      {isLoading ? <LoadingIndicator label={loadingIndicatorLabel} /> : null}
     </ViewElement>
   );
 };