diff --git a/CHANGELOG.md b/CHANGELOG.md index 4e39d0d..9a1b23f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +### Fixed + +- pagination skeleton on data loading and fetching. + ## [5.13.1] - 2025-11-10 ### Fixed diff --git a/src/lib/ReactDataTable/ReactDataTable.tsx b/src/lib/ReactDataTable/ReactDataTable.tsx index 88955e7..f7e3ed5 100644 --- a/src/lib/ReactDataTable/ReactDataTable.tsx +++ b/src/lib/ReactDataTable/ReactDataTable.tsx @@ -17,6 +17,7 @@ import { useVirtualizer, Virtualizer } from "@tanstack/react-virtual"; import { useRef } from "react"; import { TableBody } from "./TableBody"; import { useVirtualizationTableHeight } from "../hooks/useVirtualizationTableHeight"; +import Skeleton from "react-loading-skeleton"; interface TableInternalProps> extends ReactDataTableProps { virtualizer?: Virtualizer; @@ -272,6 +273,8 @@ const ReactDataTable = {showPaging && ( - { - table.setPageSize(x); - }} - setCurrentPage={(x) => table.setPageIndex(x - 1)} - possiblePageItemCounts={pageSizes} - translations={{ - itemsPerPageDropdown: reactDataTableTranslations.itemsPerPageDropdown, - showedItemsText: reactDataTableTranslations.showedItemsText, - }} - pagingPossible={true} - changePageSizePossible={!hidePageSizeChange} - navigationComponents={pagingNavigationComponents} - /> + <> + {isLoading || isFetching ? ( + + ) : ( + { + table.setPageSize(x); + }} + setCurrentPage={(x) => table.setPageIndex(x - 1)} + possiblePageItemCounts={pageSizes} + translations={{ + itemsPerPageDropdown: reactDataTableTranslations.itemsPerPageDropdown, + showedItemsText: reactDataTableTranslations.showedItemsText, + }} + pagingPossible={true} + changePageSizePossible={!hidePageSizeChange} + navigationComponents={pagingNavigationComponents} + /> + )} + )} );