fix: scrolling performance optimizations for table

src/components/PaginatedTable/PaginatedTable.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {usePaginatedTableState} from './PaginatedTableContext';
-import {TableChunk} from './TableChunk';
+import {TableChunksRenderer} from './TableChunksRenderer';
 import {TableHead} from './TableHead';
 import {DEFAULT_TABLE_ROW_HEIGHT} from './constants';
 import {b} from './shared';
@@ -14,7 +14,7 @@ import type {
     RenderEmptyDataMessage,
     RenderErrorMessage,
 } from './types';
-import {useScrollBasedChunks} from './useScrollBasedChunks';
+import {calculateElementOffsetTop} from './utils';
 
 import './PaginatedTable.scss';
 
@@ -62,14 +62,7 @@ export const PaginatedTable = <T, F>({
     const {sortParams, foundEntities} = tableState;
 
     const tableRef = React.useRef<HTMLDivElement>(null);
-
-    const activeChunks = useScrollBasedChunks({
-        scrollContainerRef,
-        tableRef,
-        totalItems: foundEntities,
-        rowHeight,
-        chunkSize,
-    });
+    const [tableOffset, setTableOffset] = React.useState(0);
 
     // this prevent situation when filters are new, but active chunks is not yet recalculated (it will be done to the next rendrer, so we bring filters change on the next render too)
     const [filters, setFilters] = React.useState(rawFilters);
@@ -78,15 +71,6 @@ export const PaginatedTable = <T, F>({
         setFilters(rawFilters);
     }, [rawFilters]);
 
-    const lastChunkSize = React.useMemo(() => {
-        // If foundEntities = 0, there will only first chunk
-        // Display it with 1 row, to display empty data message
-        if (!foundEntities) {
-            return 1;
-        }
-        return foundEntities % chunkSize || chunkSize;
-    }, [foundEntities, chunkSize]);
-
     const handleDataFetched = React.useCallback(
         (data?: PaginatedTableData<T>) => {
             if (data) {
@@ -99,6 +83,25 @@ export const PaginatedTable = <T, F>({
         [onDataFetched, setFoundEntities, setIsInitialLoad, setTotalEntities],
     );
 
+    React.useLayoutEffect(() => {
+        const scrollContainer = scrollContainerRef.current;
+        const table = tableRef.current;
+        if (table && scrollContainer) {
+            setTableOffset(calculateElementOffsetTop(table, scrollContainer));
+        }
+    }, [scrollContainerRef.current, tableRef.current, foundEntities]);
+
+    // Set will-change: transform on scroll container if not already set
+    React.useLayoutEffect(() => {
+        const scrollContainer = scrollContainerRef.current;
+        if (scrollContainer) {
+            const computedStyle = window.getComputedStyle(scrollContainer);
+            if (computedStyle.willChange !== 'transform') {
+                scrollContainer.style.willChange = 'transform';
+            }
+        }
+    }, [scrollContainerRef.current]);
+
     // Reset table on initialization and filters change
     React.useLayoutEffect(() => {
         const defaultTotal = initialEntitiesCount || 0;
@@ -109,33 +112,29 @@ export const PaginatedTable = <T, F>({
         setIsInitialLoad(true);
     }, [initialEntitiesCount, setTotalEntities, setFoundEntities, setIsInitialLoad]);
 
-    const renderChunks = () => {
-        return activeChunks.map((isActive, index) => (
-            <TableChunk<T, F>
-                key={index}
-                id={index}
-                calculatedCount={index === activeChunks.length - 1 ? lastChunkSize : chunkSize}
-                chunkSize={chunkSize}
-                rowHeight={rowHeight}
-                columns={columns}
-                fetchData={fetchData}
-                filters={filters}
-                tableName={tableName}
-                sortParams={sortParams}
-                getRowClassName={getRowClassName}
-                renderErrorMessage={renderErrorMessage}
-                renderEmptyDataMessage={renderEmptyDataMessage}
-                onDataFetched={handleDataFetched}
-                isActive={isActive}
-                keepCache={keepCache}
-            />
-        ));
-    };
-
     const renderTable = () => (
         <table className={b('table')}>
             <TableHead columns={columns} onSort={setSortParams} onColumnsResize={onColumnsResize} />
-            {renderChunks()}
+            <tbody>
+                <TableChunksRenderer
+                    scrollContainerRef={scrollContainerRef}
+                    tableRef={tableRef}
+                    foundEntities={foundEntities}
+                    tableOffset={tableOffset}
+                    chunkSize={chunkSize}
+                    rowHeight={rowHeight}
+                    columns={columns}
+                    fetchData={fetchData}
+                    filters={filters}
+                    tableName={tableName}
+                    sortParams={sortParams}
+                    getRowClassName={getRowClassName}
+                    renderErrorMessage={renderErrorMessage}
+                    renderEmptyDataMessage={renderEmptyDataMessage}
+                    onDataFetched={handleDataFetched}
+                    keepCache={keepCache}
+                />
+            </tbody>
         </table>
     );
 

src/components/PaginatedTable/TableChunk.tsx

@@ -29,7 +29,8 @@ interface TableChunkProps<T, F> {
     columns: Column<T>[];
     filters?: F;
     sortParams?: SortParams;
-    isActive: boolean;
+    shouldFetch: boolean;
+    shouldRender: boolean;
     tableName: string;
 
     fetchData: FetchData<T, F>;
@@ -56,7 +57,8 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
     renderErrorMessage,
     renderEmptyDataMessage,
     onDataFetched,
-    isActive,
+    shouldFetch,
+    shouldRender,
     keepCache,
 }: TableChunkProps<T, F>) {
     const [isTimeoutActive, setIsTimeoutActive] = React.useState(true);
@@ -75,7 +77,7 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
     };
 
     tableDataApi.useFetchTableChunkQuery(queryParams, {
-        skip: isTimeoutActive || !isActive,
+        skip: isTimeoutActive || !shouldFetch,
         pollingInterval: autoRefreshInterval,
         refetchOnMountOrArgChange: !keepCache,
     });
@@ -85,7 +87,7 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
     React.useEffect(() => {
         let timeout = 0;
 
-        if (isActive && isTimeoutActive) {
+        if (shouldFetch && isTimeoutActive) {
             timeout = window.setTimeout(() => {
                 setIsTimeoutActive(false);
             }, DEBOUNCE_TIMEOUT);
@@ -94,31 +96,27 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
         return () => {
             window.clearTimeout(timeout);
         };
-    }, [isActive, isTimeoutActive]);
+    }, [shouldFetch, isTimeoutActive]);
 
     React.useEffect(() => {
-        if (currentData && isActive) {
+        if (currentData) {
             onDataFetched({
                 ...currentData,
                 data: currentData.data as T[],
                 found: currentData.found || 0,
                 total: currentData.total || 0,
             });
         }
-    }, [currentData, isActive, onDataFetched]);
+    }, [currentData, onDataFetched]);
 
     const dataLength = currentData?.data?.length || calculatedCount;
 
     const renderContent = () => {
-        if (!isActive) {
-            return null;
-        }
-
         if (!currentData) {
             if (error) {
                 const errorData = error as IResponseError;
                 return (
-                    <EmptyTableRow columns={columns}>
+                    <EmptyTableRow columns={columns} height={dataLength * rowHeight}>
                         {renderErrorMessage ? (
                             renderErrorMessage(errorData)
                         ) : (
@@ -136,7 +134,7 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
         // Data is loaded, but there are no entities in the chunk
         if (!currentData.data?.length) {
             return (
-                <EmptyTableRow columns={columns}>
+                <EmptyTableRow columns={columns} height={dataLength * rowHeight}>
                     {renderEmptyDataMessage ? renderEmptyDataMessage() : i18n('empty')}
                 </EmptyTableRow>
             );
@@ -153,18 +151,5 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
         ));
     };
 
-    return (
-        <tbody
-            id={id.toString()}
-            style={{
-                height: `${dataLength * rowHeight}px`,
-                // Default display: table-row-group doesn't work in Safari and breaks the table
-                // display: block works in Safari, but disconnects thead and tbody cell grids
-                // Hack to make it work in all cases
-                display: isActive ? 'table-row-group' : 'block',
-            }}
-        >
-            {renderContent()}
-        </tbody>
-    );
+    return shouldRender ? renderContent() : null;
 });