diff --git a/.storybook/image-snapshots/expected/components_DatatableV2_Loading_Loading With Detail Panel.png b/.storybook/image-snapshots/expected/components_DatatableV2_Loading_Loading With Detail Panel.png index db33e5abd..13a5dbfb5 100644 Binary files a/.storybook/image-snapshots/expected/components_DatatableV2_Loading_Loading With Detail Panel.png and b/.storybook/image-snapshots/expected/components_DatatableV2_Loading_Loading With Detail Panel.png differ diff --git a/.storybook/image-snapshots/expected/components_DatatableV2_Loading_Loading With Inherited Number Of Rows.png b/.storybook/image-snapshots/expected/components_DatatableV2_Loading_Loading With Inherited Number Of Rows.png index 75c14cfe9..23c1eaad4 100644 Binary files a/.storybook/image-snapshots/expected/components_DatatableV2_Loading_Loading With Inherited Number Of Rows.png and b/.storybook/image-snapshots/expected/components_DatatableV2_Loading_Loading With Inherited Number Of Rows.png differ diff --git a/.storybook/image-snapshots/expected/components_DatatableV2_Loading_Loading With Progress.png b/.storybook/image-snapshots/expected/components_DatatableV2_Loading_Loading With Progress.png index c2e3c72b3..87ef01618 100644 Binary files a/.storybook/image-snapshots/expected/components_DatatableV2_Loading_Loading With Progress.png and b/.storybook/image-snapshots/expected/components_DatatableV2_Loading_Loading With Progress.png differ diff --git a/.storybook/image-snapshots/expected/components_DatatableV2_Loading_Loading With Selection.png b/.storybook/image-snapshots/expected/components_DatatableV2_Loading_Loading With Selection.png index a7a2412ba..be4386d0e 100644 Binary files a/.storybook/image-snapshots/expected/components_DatatableV2_Loading_Loading With Selection.png and b/.storybook/image-snapshots/expected/components_DatatableV2_Loading_Loading With Selection.png differ diff --git a/.storybook/image-snapshots/expected/components_DatatableV2_Loading_Loading.png b/.storybook/image-snapshots/expected/components_DatatableV2_Loading_Loading.png index 75c14cfe9..23c1eaad4 100644 Binary files a/.storybook/image-snapshots/expected/components_DatatableV2_Loading_Loading.png and b/.storybook/image-snapshots/expected/components_DatatableV2_Loading_Loading.png differ diff --git a/src/components/DatatableV2/toolbar/Pagination.tsx b/src/components/DatatableV2/toolbar/Pagination.tsx index 98c1c9171..ef3cd8219 100644 --- 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 = ({ table }: { table: DatatableInstance }) => { setPageIndex, setPageSize, } = table; - const { pagination } = getState(); + const { pagination, isLoading } = getState(); const { pageIndex, pageSize } = pagination; const currentPage = pageIndex + 1; @@ -60,19 +61,23 @@ const Pagination = ({ table }: { table: DatatableInstance }) => { >
- {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 ? ( + + ) : 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, + }) + )}
({ table }: { table: DatatableInstance }) { 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({ table }: { table: DatatableInstance }) { return ( - - {t('sscds|datatable.topToolbar.itemCounter', { - count: totalRowCount, - totalRowCount: abbreviateNumber(totalRowCount, lng), - })} - + {isLoading ? ( +
+ +
+ ) : ( + + {t('sscds|datatable.topToolbar.itemCounter', { + count: totalRowCount, + totalRowCount: abbreviateNumber(totalRowCount, lng), + })} + + )} {enableHiding && hiddenColumns > 0 && ( {t('sscds|datatable.topToolbar.hiddenColumns', {