fix: very bad performance when scrolling paginated tables

src/components/PaginatedTable/PaginatedTable.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 
-import {getArray} from '../../utils';
 import {TableWithControlsLayout} from '../TableWithControlsLayout/TableWithControlsLayout';
 
 import {TableChunk} from './TableChunk';
@@ -20,9 +19,13 @@ import type {
     SortParams,
 } from './types';
 import {useScrollBasedChunks} from './useScrollBasedChunks';
+import {calculateElementOffsetTop} from './utils';
 
 import './PaginatedTable.scss';
 
+const HEADER_HEIGHT = 40;
+const CONTROLS_HEIGHT = 50;
+
 export interface PaginatedTableProps<T, F> {
     limit: number;
     initialEntitiesCount?: number;
@@ -32,7 +35,7 @@ export interface PaginatedTableProps<T, F> {
     columns: Column<T>[];
     getRowClassName?: GetRowClassName<T>;
     rowHeight?: number;
-    parentRef?: React.RefObject<HTMLElement>;
+    parentRef: React.RefObject<HTMLElement> | null;
     initialSortParams?: SortParams;
     onColumnsResize?: HandleTableColumnsResize;
     renderControls?: RenderControls;
@@ -42,7 +45,7 @@ export interface PaginatedTableProps<T, F> {
 }
 
 export const PaginatedTable = <T, F>({
-    limit,
+    limit: chunkSize,
     initialEntitiesCount,
     fetchData,
     filters,
@@ -58,8 +61,8 @@ export const PaginatedTable = <T, F>({
     renderEmptyDataMessage,
     containerClassName,
 }: PaginatedTableProps<T, F>) => {
-    const initialTotal = initialEntitiesCount || limit;
-    const initialFound = initialEntitiesCount || 0;
+    const initialTotal = initialEntitiesCount || 0;
+    const initialFound = initialEntitiesCount || 1;
 
     const [sortParams, setSortParams] = React.useState<SortParams | undefined>(initialSortParams);
     const [totalEntities, setTotalEntities] = React.useState(initialTotal);
@@ -69,10 +72,11 @@ export const PaginatedTable = <T, F>({
     const tableRef = React.useRef<HTMLDivElement>(null);
 
     const activeChunks = useScrollBasedChunks({
-        containerRef: parentRef ?? tableRef,
+        parentRef,
+        tableRef,
         totalItems: foundEntities,
-        itemHeight: rowHeight,
-        chunkSize: limit,
+        rowHeight,
+        chunkSize,
     });
 
     const handleDataFetched = React.useCallback((total: number, found: number) => {
@@ -83,15 +87,16 @@ export const PaginatedTable = <T, F>({
 
     // reset table on filters change
     React.useLayoutEffect(() => {
+        if (parentRef?.current && tableRef.current && !initialTotal) {
+            parentRef.current.scrollTo({
+                left: 0,
+                top: calculateElementOffsetTop(tableRef.current) - HEADER_HEIGHT - CONTROLS_HEIGHT,
+            });
+        }
         setTotalEntities(initialTotal);
         setFoundEntities(initialFound);
         setIsInitialLoad(true);
-        if (parentRef?.current) {
-            parentRef.current.scrollTo(0, 0);
-        } else {
-            tableRef.current?.scrollTo(0, 0);
-        }
-    }, [filters, initialFound, initialTotal, limit, parentRef]);
+    }, [filters, initialFound, initialTotal, parentRef]);
 
     const renderChunks = () => {
         if (!isInitialLoad && foundEntities === 0) {
@@ -104,15 +109,13 @@ export const PaginatedTable = <T, F>({
             );
         }
 
-        const totalLength = foundEntities || limit;
-        const chunksCount = Math.ceil(totalLength / limit);
-
-        return getArray(chunksCount).map((value) => (
+        const totalItemsCount = foundEntities || chunkSize;
+        return activeChunks.map((isActive, index) => (
             <TableChunk<T, F>
-                key={value}
-                id={value}
-                limit={limit}
-                totalLength={totalLength}
+                key={index}
+                id={index}
+                totalItemsCount={totalItemsCount}
+                chunkSize={chunkSize}
                 rowHeight={rowHeight}
                 columns={columns}
                 fetchData={fetchData}
@@ -122,7 +125,7 @@ export const PaginatedTable = <T, F>({
                 getRowClassName={getRowClassName}
                 renderErrorMessage={renderErrorMessage}
                 onDataFetched={handleDataFetched}
-                isActive={activeChunks.includes(value)}
+                isActive={isActive}
             />
         ));
     };

src/components/PaginatedTable/TableChunk.tsx

@@ -8,14 +8,15 @@ 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;
 
 interface TableChunkProps<T, F> {
     id: number;
-    limit: number;
-    totalLength: number;
+    chunkSize: number;
     rowHeight: number;
+    totalItemsCount: number;
     columns: Column<T>[];
     filters?: F;
     sortParams?: SortParams;
@@ -29,10 +30,10 @@ 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,
+    chunkSize,
+    totalItemsCount,
     rowHeight,
     columns,
     fetchData,
@@ -43,15 +44,15 @@ export const TableChunk = <T, F>({
     renderErrorMessage,
     onDataFetched,
     isActive,
-}: TableChunkProps<T, F>) => {
+}: TableChunkProps<T, F>) {
     const [isTimeoutActive, setIsTimeoutActive] = React.useState(true);
     const [autoRefreshInterval] = useAutoRefreshInterval();
 
     const columnsIds = columns.map((column) => column.name);
 
     const queryParams = {
-        offset: id * limit,
-        limit,
+        offset: id * chunkSize,
+        limit: chunkSize,
         fetchData: fetchData as FetchData<T, unknown>,
         filters,
         sortParams,
@@ -87,9 +88,10 @@ export const TableChunk = <T, F>({
         }
     }, [currentData, isActive, onDataFetched]);
 
-    const chunkOffset = id * limit;
-    const remainingLength = totalLength - chunkOffset;
-    const calculatedChunkLength = remainingLength < limit ? remainingLength : limit;
+    const chunkOffset = id * chunkSize;
+    const remainingLength = totalItemsCount - chunkOffset;
+    const calculatedChunkLength =
+        remainingLength < chunkSize && remainingLength > 0 ? remainingLength : chunkSize;
 
     const dataLength = currentData?.data?.length || calculatedChunkLength;
 
@@ -134,7 +136,7 @@ export const TableChunk = <T, F>({
         ));
     };
 
-    const chunkHeight = dataLength ? dataLength * rowHeight : limit * rowHeight;
+    const chunkHeight = dataLength ? dataLength * rowHeight : chunkSize * rowHeight;
 
     return (
         <tbody
@@ -150,4 +152,4 @@ export const TableChunk = <T, F>({
             {renderContent()}
         </tbody>
     );
-};
+});

src/components/PaginatedTable/useScrollBasedChunks.ts

@@ -2,68 +2,107 @@ import React from 'react';
 
 import {throttle} from 'lodash';
 
-import {getArray} from '../../utils';
+import {calculateElementOffsetTop} from './utils';
 
 interface UseScrollBasedChunksProps {
-    containerRef: React.RefObject<HTMLElement>;
+    parentRef: React.RefObject<HTMLElement> | null;
+    tableRef: React.RefObject<HTMLElement>;
     totalItems: number;
-    itemHeight: number;
+    rowHeight: number;
     chunkSize: number;
+    overscanCount?: number;
 }
 
+interface ChunksRange {
+    start: number;
+    end: number;
+}
+
+const DEFAULT_OVERSCAN_COUNT = 1;
 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),
+    overscanCount = DEFAULT_OVERSCAN_COUNT,
+}: UseScrollBasedChunksProps): boolean[] => {
+    const chunksCount = React.useMemo(
+        () => Math.ceil(totalItems / chunkSize),
+        [chunkSize, totalItems],
     );
 
-    const calculateActiveChunks = React.useCallback(() => {
-        const container = containerRef.current;
-        if (!container) {
-            return;
-        }
+    const [chunksRange, setChunksRange] = React.useState<ChunksRange>({
+        start: 0,
+        end: Math.min(overscanCount, chunksCount - 1),
+    });
 
-        const {scrollTop, clientHeight} = container;
-        const visibleStartIndex = Math.floor(scrollTop / itemHeight);
-        const visibleEndIndex = Math.min(
-            Math.ceil((scrollTop + clientHeight) / itemHeight),
-            totalItems - 1,
-        );
+    const calculateVisibleRange = React.useCallback(() => {
+        const container = parentRef?.current;
+        const table = tableRef.current;
+        if (!container || !table) {
+            return null;
+        }
 
-        const startChunk = Math.floor(visibleStartIndex / chunkSize);
-        const endChunk = Math.floor(visibleEndIndex / chunkSize);
+        const tableOffset = calculateElementOffsetTop(table, container);
+        const containerScroll = container.scrollTop;
+        const visibleStart = Math.max(containerScroll - tableOffset, 0);
+        const visibleEnd = visibleStart + container.clientHeight;
 
-        const newActiveChunks = getArray(endChunk - startChunk + 1 + CHUNKS_AHEAD_COUNT).map(
-            (index) => startChunk + index,
+        const startChunk = Math.max(
+            Math.floor(visibleStart / rowHeight / chunkSize) - overscanCount,
+            0,
         );
+        const endChunk = Math.min(
+            Math.floor(visibleEnd / rowHeight / chunkSize) + overscanCount,
+            chunksCount - 1,
+        );
+
+        return {start: startChunk, end: endChunk};
+    }, [parentRef, tableRef, rowHeight, chunkSize, chunksCount, overscanCount]);
 
-        setActiveChunks(newActiveChunks);
-    }, [chunkSize, containerRef, itemHeight, totalItems]);
+    const handleScroll = React.useCallback(() => {
+        const newRange = calculateVisibleRange();
+        if (
+            newRange &&
+            (newRange.start !== chunksRange.start || newRange.end !== chunksRange.end)
+        ) {
+            setChunksRange(newRange);
+        }
+    }, [calculateVisibleRange, chunksRange.end, chunksRange.start]);
 
-    const throttledCalculateActiveChunks = React.useMemo(
-        () => throttle(calculateActiveChunks, THROTTLE_DELAY),
-        [calculateActiveChunks],
+    const throttledHandleScroll = React.useMemo(
+        () => throttle(handleScroll, THROTTLE_DELAY, {leading: true, trailing: true}),
+        [handleScroll],
     );
 
     React.useEffect(() => {
-        const container = containerRef.current;
+        const container = parentRef?.current;
         if (!container) {
             return undefined;
         }
 
-        container.addEventListener('scroll', throttledCalculateActiveChunks);
+        container.addEventListener('scroll', throttledHandleScroll);
         return () => {
-            container.removeEventListener('scroll', throttledCalculateActiveChunks);
-            throttledCalculateActiveChunks.cancel();
+            container.removeEventListener('scroll', throttledHandleScroll);
+            throttledHandleScroll.cancel();
         };
-    }, [containerRef, throttledCalculateActiveChunks]);
+    }, [parentRef, throttledHandleScroll]);
+
+    return React.useMemo(() => {
+        const activeChunkIds = Array.from(
+            {length: chunksRange.end - chunksRange.start + 1},
+            (_, i) => chunksRange.start + i,
+        );
+
+        // Create boolean array where true represents active chunks
+        const activeChunks = Array(chunksCount).fill(false);
+        activeChunkIds.forEach((id) => {
+            activeChunks[id] = true;
+        });
 
-    return activeChunks;
+        return activeChunks;
+    }, [chunksRange.start, chunksRange.end, chunksCount]);
 };

src/components/PaginatedTable/utils.ts → 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,17 @@ 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;
+
+export function calculateElementOffsetTop(element: HTMLElement, container?: HTMLElement): number {
+    let currentElement = element;
+    let offsetTop = 0;
+
+    while (currentElement && currentElement !== container) {
+        offsetTop += currentElement.offsetTop;
+        currentElement = currentElement.offsetParent as HTMLElement;
+    }
+
+    return offsetTop;
+}

src/containers/Nodes/NodesWrapper.tsx

@@ -8,7 +8,7 @@ import {PaginatedNodes} from './PaginatedNodes';
 interface NodesWrapperProps {
     path?: string;
     database?: string;
-    parentRef?: React.RefObject<HTMLElement>;
+    parentRef: React.RefObject<HTMLElement> | null;
     additionalNodesProps?: AdditionalNodesProps;
 }
 

src/containers/Nodes/PaginatedNodes.tsx

@@ -44,7 +44,7 @@ const b = cn('ydb-nodes');
 interface NodesProps {
     path?: string;
     database?: string;
-    parentRef?: React.RefObject<HTMLElement>;
+    parentRef: React.RefObject<HTMLElement> | null;
     additionalNodesProps?: AdditionalNodesProps;
 }