From 6f84e6909279fc3f9b5ec799816e56f1f91c08df Mon Sep 17 00:00:00 2001
From: Michele Masciave <michele.masciave@neolution.ch>
Date: Fri, 12 Dec 2025 13:49:36 +0100
Subject: [PATCH 1/5] init

---
 src/lib/ReactDataTable/ReactDataTable.tsx | 50 +++++++++++++++--------
 1 file changed, 32 insertions(+), 18 deletions(-)

diff --git a/src/lib/ReactDataTable/ReactDataTable.tsx b/src/lib/ReactDataTable/ReactDataTable.tsx
index 88955e7..472bb41 100644
--- a/src/lib/ReactDataTable/ReactDataTable.tsx
+++ b/src/lib/ReactDataTable/ReactDataTable.tsx
@@ -272,6 +272,8 @@ const ReactDataTable = <TData, TFilter extends FilterModel = Record<string, neve
     totalRecords = table.getCoreRowModel().rows.length,
     dragAndDropOptions,
     pagingNavigationComponents,
+    isFetching,
+    isLoading,
     onPseudoHeightChange,
   } = props;
 
@@ -326,24 +328,36 @@ const ReactDataTable = <TData, TFilter extends FilterModel = Record<string, neve
       </DndContext>
 
       {showPaging && (
-        <Paging
-          currentItemsPerPage={pagination.pageSize}
-          currentPage={pagination.pageIndex + 1}
-          totalRecords={totalRecords}
-          currentRecordCount={table.getRowModel().rows.length}
-          setItemsPerPage={(x) => {
-            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 ? (
+            <span
+              style={{
+                background: "linear-gradient(90deg, #E8E8E8, #ffffff, #E8E8E8)",
+                backgroundSize: "10% 10%",
+                animation: "reloadingAnimation 3s linear infinite",
+              }}
+            />
+          ) : (
+            <Paging
+              currentItemsPerPage={pagination.pageSize}
+              currentPage={pagination.pageIndex + 1}
+              totalRecords={totalRecords}
+              currentRecordCount={table.getRowModel().rows.length}
+              setItemsPerPage={(x) => {
+                table.setPageSize(x);
+              }}
+              setCurrentPage={(x) => table.setPageIndex(x - 1)}
+              possiblePageItemCounts={pageSizes}
+              translations={{
+                itemsPerPageDropdown: reactDataTableTranslations.itemsPerPageDropdown,
+                showedItemsText: reactDataTableTranslations.showedItemsText,
+              }}
+              pagingPossible={true}
+              changePageSizePossible={!hidePageSizeChange}
+              navigationComponents={pagingNavigationComponents}
+            />
+          )}
+        </>
       )}
     </>
   );

From 1e83ff7656bba694fb304f0ac282299ddf22b3c7 Mon Sep 17 00:00:00 2001
From: Michele Masciave <michele.masciave@neolution.ch>
Date: Fri, 12 Dec 2025 13:54:40 +0100
Subject: [PATCH 2/5] x

---
 CHANGELOG.md                              |  4 ++++
 src/lib/ReactDataTable/ReactDataTable.tsx | 17 ++++++++++-------
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4e39d0d..d1b300a 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 animation on data fetching.
+
 ## [5.13.1] - 2025-11-10
 
 ### Fixed
diff --git a/src/lib/ReactDataTable/ReactDataTable.tsx b/src/lib/ReactDataTable/ReactDataTable.tsx
index 472bb41..5f3ef4a 100644
--- a/src/lib/ReactDataTable/ReactDataTable.tsx
+++ b/src/lib/ReactDataTable/ReactDataTable.tsx
@@ -330,13 +330,16 @@ const ReactDataTable = <TData, TFilter extends FilterModel = Record<string, neve
       {showPaging && (
         <>
           {!isLoading && isFetching ? (
-            <span
-              style={{
-                background: "linear-gradient(90deg, #E8E8E8, #ffffff, #E8E8E8)",
-                backgroundSize: "10% 10%",
-                animation: "reloadingAnimation 3s linear infinite",
-              }}
-            />
+           <span
+            style={{
+              display: "block",
+              height: "24px",
+              width: "100%",
+              background: "linear-gradient(90deg, #E8E8E8, #ffffff, #E8E8E8)",
+              backgroundSize: "200% 200%",
+              animation: "reloadingAnimation 3s linear infinite",
+            }}
+          />
           ) : (
             <Paging
               currentItemsPerPage={pagination.pageSize}

From e0cd8b6f61623a1aaad306c856094abb0da0abc8 Mon Sep 17 00:00:00 2001
From: Michele Masciave <michele.masciave@neolution.ch>
Date: Fri, 12 Dec 2025 13:55:08 +0100
Subject: [PATCH 3/5] x

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d1b300a..a989b14 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,7 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-### Fixed 
+### Fixed
 
 - pagination animation on data fetching.
 

From 519989f783720e5813a4eece64959e3e66f31caf Mon Sep 17 00:00:00 2001
From: Michele Masciave <michele.masciave@neolution.ch>
Date: Fri, 12 Dec 2025 14:23:05 +0100
Subject: [PATCH 4/5] partial

---
 src/lib/ReactDataTable/ReactDataTable.tsx | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/src/lib/ReactDataTable/ReactDataTable.tsx b/src/lib/ReactDataTable/ReactDataTable.tsx
index 5f3ef4a..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<TData, TFilter extends FilterModel = Record<string, never>> extends ReactDataTableProps<TData, TFilter> {
   virtualizer?: Virtualizer<HTMLDivElement, Element>;
@@ -272,8 +273,8 @@ const ReactDataTable = <TData, TFilter extends FilterModel = Record<string, neve
     totalRecords = table.getCoreRowModel().rows.length,
     dragAndDropOptions,
     pagingNavigationComponents,
-    isFetching,
     isLoading,
+    isFetching,
     onPseudoHeightChange,
   } = props;
 
@@ -329,17 +330,8 @@ const ReactDataTable = <TData, TFilter extends FilterModel = Record<string, neve
 
       {showPaging && (
         <>
-          {!isLoading && isFetching ? (
-           <span
-            style={{
-              display: "block",
-              height: "24px",
-              width: "100%",
-              background: "linear-gradient(90deg, #E8E8E8, #ffffff, #E8E8E8)",
-              backgroundSize: "200% 200%",
-              animation: "reloadingAnimation 3s linear infinite",
-            }}
-          />
+          {isLoading || isFetching ? (
+            <Skeleton count={1} height={20} />
           ) : (
             <Paging
               currentItemsPerPage={pagination.pageSize}

From 83c524559abafd21b32e83175168cffa205d660d Mon Sep 17 00:00:00 2001
From: Michele Masciave <michele.masciave@neolution.ch>
Date: Fri, 12 Dec 2025 15:13:40 +0100
Subject: [PATCH 5/5] changelog

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a989b14..9a1b23f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,7 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
-- pagination animation on data fetching.
+- pagination skeleton on data loading and fetching.
 
 ## [5.13.1] - 2025-11-10