Merge pull request #7885 from ToolJet/main

Merge main back to develop (2.20.1)

.version

@@ -1 +1 @@
-2.20.0
+2.20.1

frontend/.version

@@ -1 +1 @@
-2.20.0
+2.20.1

frontend/src/Editor/Components/Table/Pagination.jsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { ButtonSolid } from '@/_ui/AppButton/AppButton';
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';
 
 export const Pagination = function Pagination({
   onPageIndexChanged,
@@ -16,6 +17,7 @@ export const Pagination = function Pagination({
   // eslint-disable-next-line no-unused-vars
   darkMode,
   tableWidth,
+  loadingState,
 }) {
   const [pageCount, setPageCount] = useState(autoPageCount);
 
@@ -50,6 +52,16 @@ export const Pagination = function Pagination({
     gotoPage(pageIndex - 1);
   }
 
+  if (loadingState) {
+    return (
+      <div className="w-100">
+        <SkeletonTheme baseColor="var(--slate3)" width="100%">
+          <Skeleton count={1} width={'100%'} height={28} className="mb-1" />
+        </SkeletonTheme>
+      </div>
+    );
+  }
+
   return (
     <div className="pagination-container d-flex h-100 align-items-center custom-gap-4" data-cy="pagination-section">
       <div className="d-flex">

frontend/src/Editor/Components/Table/Table.jsx

@@ -1535,15 +1535,7 @@ export function Table({
                 ))}
             </div>
             <div className={`col d-flex justify-content-center h-100 ${loadingState && 'w-100'}`}>
-              {loadingState && (
-                <div className="w-100">
-                  <SkeletonTheme baseColor="var(--slate3)" width="100%">
-                    <Skeleton count={1} width={'100%'} height={28} className="mb-1" />
-                  </SkeletonTheme>
-                </div>
-              )}
-
-              {enablePagination && !loadingState && (
+              {enablePagination && (
                 <Pagination
                   lastActivePageIndex={pageIndex}
                   serverSide={serverSidePagination}
@@ -1558,6 +1550,7 @@ export function Table({
                   enablePrevButton={enablePrevButton}
                   darkMode={darkMode}
                   tableWidth={width}
+                  loadingState={loadingState}
                 />
               )}
             </div>

server/.version

@@ -1 +1 @@
-2.20.0
+2.20.1