Merge pull request #1157 from securityscorecard/ajkl2533@UXD-1642

fix(DatatableV2): use skeleton for rows counters
securityscorecard · Oct 2, 2024 · c3d0ab6 · c3d0ab6
2 parents 6c89b93 + c034c7b
commit c3d0ab6
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 21 deletions.
diff --git a/...snapshots/expected/components_DatatableV2_Loading_Loading With Detail Panel.png b/...snapshots/expected/components_DatatableV2_Loading_Loading With Detail Panel.png
diff --git a/...pected/components_DatatableV2_Loading_Loading With Inherited Number Of Rows.png b/...pected/components_DatatableV2_Loading_Loading With Inherited Number Of Rows.png
diff --git a/...age-snapshots/expected/components_DatatableV2_Loading_Loading With Progress.png b/...age-snapshots/expected/components_DatatableV2_Loading_Loading With Progress.png
diff --git a/...ge-snapshots/expected/components_DatatableV2_Loading_Loading With Selection.png b/...ge-snapshots/expected/components_DatatableV2_Loading_Loading With Selection.png
diff --git a/.storybook/image-snapshots/expected/components_DatatableV2_Loading_Loading.png b/.storybook/image-snapshots/expected/components_DatatableV2_Loading_Loading.png
diff --git a/src/components/DatatableV2/toolbar/Pagination.tsx b/src/components/DatatableV2/toolbar/Pagination.tsx
@@ -6,6 +6,7 @@ import { DatatableInstance } from '../Datatable.types';
 import { useContainerQuery } from '../../../hooks/useContainerQuery';
 import IconButton from '../../ButtonV2/IconButton';
 import { useSafeTranslation } from '../../../hooks/useSafeTranslation';
+import { Skeleton } from '../../Skeleton';
 
 const cq = {
   sm: {
@@ -37,7 +38,7 @@ const Pagination = <D,>({ table }: { table: DatatableInstance<D> }) => {
     setPageIndex,
     setPageSize,
   } = table;
-  const { pagination } = getState();
+  const { pagination, isLoading } = getState();
   const { pageIndex, pageSize } = pagination;
 
   const currentPage = pageIndex + 1;
@@ -60,19 +61,23 @@ const Pagination = <D,>({ table }: { table: DatatableInstance<D> }) => {
     >
       <Inline align="center" gap="md" justify="space-between">
         <div className="ds-table-pagination-item-count">
-          {isLg
-            ? t('sscds|datatable.pagination.itemCounter.full', {
-                firstRowIndex: (firstRowIndex + 1).toLocaleString(lng),
-                lastRowIndex: lastRowIndex.toLocaleString(lng),
-                totalRowCount: abbreviateNumber(totalRowCount, lng),
-                count: totalRowCount,
-              })
-            : t('sscds|datatable.pagination.itemCounter.short', {
-                firstRowIndex: (firstRowIndex + 1).toLocaleString(lng),
-                lastRowIndex: lastRowIndex.toLocaleString(lng),
-                totalRowCount: abbreviateNumber(totalRowCount, lng),
-                count: totalRowCount,
-              })}
+          {isLoading ? (
+            <Skeleton width={120} />
+          ) : isLg ? (
+            t('sscds|datatable.pagination.itemCounter.full', {
+              firstRowIndex: (firstRowIndex + 1).toLocaleString(lng),
+              lastRowIndex: lastRowIndex.toLocaleString(lng),
+              totalRowCount: abbreviateNumber(totalRowCount, lng),
+              count: totalRowCount,
+            })
+          ) : (
+            t('sscds|datatable.pagination.itemCounter.short', {
+              firstRowIndex: (firstRowIndex + 1).toLocaleString(lng),
+              lastRowIndex: lastRowIndex.toLocaleString(lng),
+              totalRowCount: abbreviateNumber(totalRowCount, lng),
+              count: totalRowCount,
+            })
+          )}
         </div>
         <Inline
           align="center"

diff --git a/src/components/DatatableV2/toolbar/TopToolbar.tsx b/src/components/DatatableV2/toolbar/TopToolbar.tsx
@@ -7,6 +7,7 @@ import { Text } from '../../Text';
 import { DatatableInstance } from '../Datatable.types';
 import { abbreviateNumber } from '../../../utils';
 import { useSafeTranslation } from '../../../hooks/useSafeTranslation';
+import { Skeleton } from '../../Skeleton';
 
 const TopToolbarRoot = styled(Padbox)`
   border-bottom: 1px solid var(--sscds-table-color-border);
@@ -33,7 +34,7 @@ function TopToolbar<D>({ table }: { table: DatatableInstance<D> }) {
     setShowColumnSettings,
     setIsFullscreenMode,
   } = table;
-  const { isFullscreenMode, columnVisibility } = getState();
+  const { isFullscreenMode, columnVisibility, isLoading } = getState();
   const totalRowCount = rowCount ?? getPrePaginationRowModel().rows.length;
   const hiddenColumns = getHiddenColumns(columnVisibility);
   const { t, lng } = useSafeTranslation();
@@ -48,12 +49,18 @@ function TopToolbar<D>({ table }: { table: DatatableInstance<D> }) {
   return (
     <TopToolbarRoot paddingSize="md" paddingType="squish">
       <Inline align="center" gap="2x" stretch="start">
-        <Text>
-          {t('sscds|datatable.topToolbar.itemCounter', {
-            count: totalRowCount,
-            totalRowCount: abbreviateNumber(totalRowCount, lng),
-          })}
-        </Text>
+        {isLoading ? (
+          <div>
+            <Skeleton width={80} />
+          </div>
+        ) : (
+          <Text>
+            {t('sscds|datatable.topToolbar.itemCounter', {
+              count: totalRowCount,
+              totalRowCount: abbreviateNumber(totalRowCount, lng),
+            })}
+          </Text>
+        )}
         {enableHiding && hiddenColumns > 0 && (
           <Text variant="subtle">
             {t('sscds|datatable.topToolbar.hiddenColumns', {