Fix delegators pagination (#12)

* remove unnecessary and breaking deps for pagination useEffects

CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog], and this project adheres to [Semantic Versioning].
 
+## [1.4.6] - 2024-05-17
+### Fixed
+- `useTablePagination` hook
+
 ## [1.4.5] - 2024-05-09
 ### Fixed
 - `ProposalDepositsRow` deposit tx parsing
@@ -124,7 +128,8 @@ The format is based on [Keep a Changelog], and this project adheres to [Semantic
 
 - Initiated project
 
-[Unreleased]: https://gitlab.com/rarimo/scan/compare/1.4.5...HEAD
+[Unreleased]: https://gitlab.com/rarimo/scan/compare/1.4.6...HEAD
+[1.4.6]: https://gitlab.com/rarimo/scan/compare/1.4.5...1.4.6
 [1.4.5]: https://gitlab.com/rarimo/scan/compare/1.4.4...1.4.5
 [1.4.4]: https://gitlab.com/rarimo/scan/compare/1.4.3...1.4.4
 [1.4.3]: https://gitlab.com/rarimo/scan/compare/1.4.2...1.4.3

package.json

@@ -1,6 +1,6 @@
 {
   "name": "scan",
-  "version": "1.4.5",
+  "version": "1.4.6",
   "private": true,
   "gitHooks": {
     "pre-commit": "yarn lint",

src/components/TableWithPagination.tsx

@@ -1,5 +1,7 @@
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
 import {
+  Skeleton,
+  Stack,
   Table,
   TableBody,
   TableContainer,
@@ -53,7 +55,29 @@ export default function TableWithPagination({
 }) {
   const theme = useTheme()
 
-  const table = (
+  if (isLoading) {
+    return (
+      <Stack spacing={2}>
+        {Array.from({ length: limit }).map((_, idx) => {
+          return <Skeleton key={idx} variant='rectangular' height={TABLE_LIST_HEAD_ROW_HEIGHT} />
+        })}
+      </Stack>
+    )
+  }
+
+  if (!rows?.length || isLoadingError) {
+    return (
+      <NoData
+        isError={isLoadingError}
+        title={noDataTitle}
+        subtitle={noDataSubtitle}
+        errorTitle={errorTitle}
+        errorSubtitle={errorSubtitle}
+      />
+    )
+  }
+
+  return (
     <>
       <TableContainer
         sx={{
@@ -127,16 +151,4 @@ export default function TableWithPagination({
       />
     </>
   )
-
-  return !isLoading && (!rows?.length || isLoadingError) ? (
-    <NoData
-      isError={isLoadingError}
-      title={noDataTitle}
-      subtitle={noDataSubtitle}
-      errorTitle={errorTitle}
-      errorSubtitle={errorSubtitle}
-    />
-  ) : (
-    table
-  )
 }

src/components/Validator/Validator.tsx

@@ -25,7 +25,7 @@ import { ValidatorDelegationsFilters, ValidatorDelegationsFiltersMapStringKey }
 
 export default function Validator({ operator }: { operator: string }) {
   const { limit, offset, handleChangePage, handleChangeRowsPerPage, setOffset, setTableKey } =
-    useTablePagination()
+    useTablePagination('validator_delegations')
 
   const { filter, handleFilterChange } = useTabsFilter({
     queryKey: 'delegation_type',
@@ -82,7 +82,8 @@ export default function Validator({ operator }: { operator: string }) {
 
   useEffect(() => {
     setKey()
-  }, [filter, setKey, setTableKey])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filter])
 
   useEffect(() => {
     setKey()

src/hooks/useTablePagination.ts

@@ -101,7 +101,9 @@ export const useTablePagination = <T = unknown>(tableKey?: string) => {
 
   useEffect(() => {
     replaceUrl()
-  }, [limit, offset, order, orderBy, replaceUrl, table])
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [limit, offset, order, orderBy, table])
 
   useEffect(() => {
     replaceUrl()