Merge 37e02c4 into 57d2092

Author: astandrik

src/components/PaginatedTable/PaginatedTable.tsx

@@ -69,17 +69,27 @@ export const PaginatedTable = <T, F>({
     const tableRef = React.useRef<HTMLDivElement>(null);
 
     const activeChunks = useScrollBasedChunks({
-        containerRef: parentRef ?? tableRef,
+        parentRef,
+        tableRef,
         totalItems: foundEntities,
-        itemHeight: rowHeight,
+        rowHeight,
         chunkSize: limit,
     });
 
-    const handleDataFetched = React.useCallback((total: number, found: number) => {
-        setTotalEntities(total);
-        setFoundEntities(found);
-        setIsInitialLoad(false);
-    }, []);
+    const handleDataFetched = React.useCallback(
+        (total: number, found: number) => {
+            if (total !== totalEntities) {
+                setTotalEntities(total);
+            }
+
+            if (found !== foundEntities) {
+                setFoundEntities(found);
+            }
+
+            setIsInitialLoad(false);
+        },
+        [foundEntities, totalEntities],
+    );
 
     // reset table on filters change
     React.useLayoutEffect(() => {
@@ -122,7 +132,7 @@ export const PaginatedTable = <T, F>({
                 getRowClassName={getRowClassName}
                 renderErrorMessage={renderErrorMessage}
                 onDataFetched={handleDataFetched}
-                isActive={activeChunks.includes(value)}
+                isActive={activeChunks[value]}
             />
         ));
     };

src/components/PaginatedTable/TableChunk.tsx

@@ -8,6 +8,7 @@ import {ResponseError} from '../Errors/ResponseError';
 
 import {EmptyTableRow, LoadingTableRow, TableRow} from './TableRow';
 import type {Column, FetchData, GetRowClassName, SortParams} from './types';
+import {typedMemo} from './utils';
 
 const DEBOUNCE_TIMEOUT = 200;
 
@@ -29,7 +30,7 @@ interface TableChunkProps<T, F> {
 }
 
 // Memoisation prevents chunks rerenders that could cause perfomance issues on big tables
-export const TableChunk = <T, F>({
+export const TableChunk = typedMemo(function TableChunk<T, F>({
     id,
     limit,
     totalLength,
@@ -43,7 +44,7 @@ export const TableChunk = <T, F>({
     renderErrorMessage,
     onDataFetched,
     isActive,
-}: TableChunkProps<T, F>) => {
+}: TableChunkProps<T, F>) {
     const [isTimeoutActive, setIsTimeoutActive] = React.useState(true);
     const [autoRefreshInterval] = useAutoRefreshInterval();
 
@@ -150,4 +151,4 @@ export const TableChunk = <T, F>({
             {renderContent()}
         </tbody>
     );
-};
+});

src/components/PaginatedTable/useScrollBasedChunks.ts

@@ -1,59 +1,64 @@
 import React from 'react';
 
-import {throttle} from 'lodash';
-
-import {getArray} from '../../utils';
+import {isEqual, throttle} from 'lodash';
 
 interface UseScrollBasedChunksProps {
-    containerRef: React.RefObject<HTMLElement>;
+    parentRef?: React.RefObject<HTMLElement>;
+    tableRef: React.RefObject<HTMLElement>;
     totalItems: number;
-    itemHeight: number;
+    rowHeight: number;
     chunkSize: number;
 }
 
 const THROTTLE_DELAY = 100;
 const CHUNKS_AHEAD_COUNT = 1;
 
 export const useScrollBasedChunks = ({
-    containerRef,
+    parentRef,
+    tableRef,
     totalItems,
-    itemHeight,
+    rowHeight,
     chunkSize,
-}: UseScrollBasedChunksProps): number[] => {
-    const [activeChunks, setActiveChunks] = React.useState<number[]>(
-        getArray(1 + CHUNKS_AHEAD_COUNT).map((index) => index),
-    );
+}: UseScrollBasedChunksProps): boolean[] => {
+    const [activeChunks, setActiveChunks] = React.useState<boolean[]>([true, true]);
 
     const calculateActiveChunks = React.useCallback(() => {
-        const container = containerRef.current;
-        if (!container) {
+        const container = parentRef?.current;
+        const table = tableRef.current;
+        if (!container || !table) {
             return;
         }
 
-        const {scrollTop, clientHeight} = container;
-        const visibleStartIndex = Math.floor(scrollTop / itemHeight);
+        const tableScrollTop = Math.max(container.scrollTop - table.offsetTop, 0);
+        const visibleStartIndex = Math.floor(Math.max(tableScrollTop, 0) / rowHeight);
         const visibleEndIndex = Math.min(
-            Math.ceil((scrollTop + clientHeight) / itemHeight),
+            Math.ceil((tableScrollTop + container.clientHeight) / rowHeight),
             totalItems - 1,
         );
 
-        const startChunk = Math.floor(visibleStartIndex / chunkSize);
-        const endChunk = Math.floor(visibleEndIndex / chunkSize);
-
-        const newActiveChunks = getArray(endChunk - startChunk + 1 + CHUNKS_AHEAD_COUNT).map(
-            (index) => startChunk + index,
+        const startChunk = Math.max(
+            Math.floor(visibleStartIndex / chunkSize) - CHUNKS_AHEAD_COUNT,
+            0,
         );
+        const endChunk = Math.floor(visibleEndIndex / chunkSize) + CHUNKS_AHEAD_COUNT;
 
-        setActiveChunks(newActiveChunks);
-    }, [chunkSize, containerRef, itemHeight, totalItems]);
+        const newActiveChunks = [];
+        for (let i = startChunk; i <= endChunk; i++) {
+            newActiveChunks[i] = true;
+        }
+
+        if (!isEqual(activeChunks, newActiveChunks)) {
+            setActiveChunks(newActiveChunks);
+        }
+    }, [parentRef, tableRef, rowHeight, totalItems, chunkSize, activeChunks]);
 
     const throttledCalculateActiveChunks = React.useMemo(
         () => throttle(calculateActiveChunks, THROTTLE_DELAY),
         [calculateActiveChunks],
     );
 
     React.useEffect(() => {
-        const container = containerRef.current;
+        const container = parentRef?.current;
         if (!container) {
             return undefined;
         }
@@ -63,7 +68,7 @@ export const useScrollBasedChunks = ({
             container.removeEventListener('scroll', throttledCalculateActiveChunks);
             throttledCalculateActiveChunks.cancel();
         };
-    }, [containerRef, throttledCalculateActiveChunks]);
+    }, [parentRef, throttledCalculateActiveChunks]);
 
     return activeChunks;
 };

src/components/PaginatedTable/utils.ts renamed to src/components/PaginatedTable/utils.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 // invoke passed function at most once per animation frame
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function rafThrottle<Fn extends (...args: any[]) => any>(fn: Fn) {
@@ -23,3 +25,5 @@ export function rafThrottle<Fn extends (...args: any[]) => any>(fn: Fn) {
 export function calculateColumnWidth(newWidth: number, minWidth = 40, maxWidth = Infinity) {
     return Math.max(minWidth, Math.min(newWidth, maxWidth));
 }
+
+export const typedMemo: <T>(Component: T) => T = React.memo;