fix: find out performance issue with big tables of nodes

src/components/PaginatedTable/PaginatedTable.scss

@@ -181,6 +181,6 @@
     }
 
     &__row-skeleton::after {
-        animation: none !important;
+        display: none !important;
     }
 }

src/components/PaginatedTable/PaginatedTable.tsx

@@ -17,11 +17,12 @@ import type {
     SortParams,
 } from './types';
 import {useScrollBasedChunks} from './useScrollBasedChunks';
+import {useViewportChunkSize} from './useViewportChunkSize';
 
 import './PaginatedTable.scss';
 
 export interface PaginatedTableProps<T, F> {
-    limit: number;
+    limit: number | 'viewport';
     initialEntitiesCount?: number;
     fetchData: FetchData<T, F>;
     filters?: F;
@@ -39,7 +40,7 @@ export interface PaginatedTableProps<T, F> {
 }
 
 export const PaginatedTable = <T, F>({
-    limit: chunkSize,
+    limit,
     initialEntitiesCount,
     fetchData,
     filters,
@@ -65,6 +66,13 @@ export const PaginatedTable = <T, F>({
 
     const tableRef = React.useRef<HTMLDivElement>(null);
 
+    // Use the custom hook for viewport-based chunk size calculation
+    const chunkSize = useViewportChunkSize({
+        limit,
+        parentRef,
+        rowHeight,
+    });
+
     const activeChunks = useScrollBasedChunks({
         parentRef,
         tableRef,

src/components/PaginatedTable/useViewportChunkSize.ts

@@ -0,0 +1,59 @@
+import React from 'react';
+
+interface UseViewportChunkSizeParams {
+    limit: number | 'viewport';
+    parentRef: React.RefObject<HTMLElement>;
+    rowHeight: number;
+    defaultChunkSize?: number;
+}
+
+/**
+ * Hook that calculates the number of rows that can fit in the viewport
+ * Returns calculated chunk size based on viewport height or the provided limit if it's a number
+ */
+export const useViewportChunkSize = ({
+    limit,
+    parentRef,
+    rowHeight,
+    defaultChunkSize = 20,
+}: UseViewportChunkSizeParams): number => {
+    // State to store calculated chunk size for viewport mode
+    const [calculatedChunkSize, setCalculatedChunkSize] = React.useState(
+        typeof limit === 'number' ? limit : defaultChunkSize,
+    );
+
+    // Calculate rows that fit in viewport and update when container size changes
+    React.useEffect(() => {
+        if (limit !== 'viewport' || !parentRef.current) {
+            if (typeof limit === 'number') {
+                setCalculatedChunkSize(limit);
+            }
+            return undefined;
+        }
+
+        // Store a reference to the current element
+        const currentElement = parentRef.current;
+
+        const calculateVisibleRows = () => {
+            const viewportHeight = currentElement.clientHeight;
+            const visibleRows = Math.floor(viewportHeight / rowHeight);
+            setCalculatedChunkSize(Math.max(visibleRows, 1));
+        };
+
+        // Calculate initially
+        calculateVisibleRows();
+
+        // Set up ResizeObserver to recalculate on parent container size changes
+        const resizeObserver = new ResizeObserver(calculateVisibleRows);
+        resizeObserver.observe(currentElement);
+
+        return () => {
+            // Use the stored reference in the cleanup
+            resizeObserver.unobserve(currentElement);
+            resizeObserver.disconnect();
+        };
+    }, [limit, parentRef, rowHeight]);
+
+    // Return the calculated or provided chunk size
+    return typeof limit === 'number' ? limit : calculatedChunkSize;
+};

src/containers/Nodes/NodesTable.tsx

@@ -83,7 +83,7 @@ export function NodesTable({
             parentRef={parentRef}
             columns={columns}
             fetchData={getNodes}
-            limit={50}
+            limit="viewport"
             initialEntitiesCount={initialEntitiesCount}
             renderControls={renderControls}
             renderErrorMessage={renderPaginatedTableErrorMessage}

src/containers/Storage/StorageGroups/PaginatedStorageGroupsTable.tsx

@@ -101,7 +101,7 @@ export const PaginatedStorageGroupsTable = ({
                 parentRef={parentRef}
                 columns={columns}
                 fetchData={fetchData}
-                limit={50}
+                limit="viewport"
                 initialEntitiesCount={initialEntitiesCount}
                 renderControls={renderControls}
                 renderErrorMessage={renderErrorMessage}

src/containers/Storage/StorageNodes/PaginatedStorageNodesTable.tsx

@@ -104,7 +104,7 @@ export const PaginatedStorageNodesTable = ({
             columns={columns}
             fetchData={getStorageNodes}
             rowHeight={51}
-            limit={50}
+            limit="viewport"
             initialEntitiesCount={initialEntitiesCount}
             renderControls={renderControls}
             renderErrorMessage={renderErrorMessage}

src/containers/Storage/StorageNodes/getNodes.ts

@@ -48,7 +48,7 @@ export const getStorageNodes: FetchData<
         type,
         storage,
         limit,
-        offset,
+        offset: 0,
         sort,
         filter: searchValue,
         uptime: getUptimeParamValue(nodesUptimeFilter),
@@ -61,9 +61,23 @@ export const getStorageNodes: FetchData<
         fieldsRequired: dataFieldsRequired,
     });
     const preparedResponse = prepareStorageNodesResponse(response);
+
+    let mockedData = preparedResponse.nodes?.slice();
+
+    for (let i = 0; i < 4000; i++) {
+        mockedData = mockedData?.concat(
+            preparedResponse.nodes?.map((data, j) => ({
+                ...data,
+                NodeId: data.NodeId + i * 2000 + j,
+                Host: data.Host || String(i) + ',' + j,
+            })) || [],
+        );
+    }
+    const paginatedData = mockedData?.slice(offset, offset + limit);
+
     return {
-        data: preparedResponse.nodes || [],
-        found: preparedResponse.found || 0,
-        total: preparedResponse.total || 0,
+        data: paginatedData || [],
+        found: mockedData?.length || 0,
+        total: mockedData?.length || 0,
     };
 };

src/utils/index.ts

@@ -1,5 +1,5 @@
-export const getArray = (arrayLength: number) => {
-    return [...Array(arrayLength).keys()];
+export const getArray = (arrayLength: number): number[] => {
+    return Array.from({length: arrayLength}, (_, i) => i);
 };
 
 export function valueIsDefined<T>(value: T | null | undefined): value is T {