fix: real virtualization

Author: astandrik

src/components/PaginatedTable/TableChunk.tsx

@@ -6,7 +6,7 @@ import {getArray} from '../../utils';
 import {useAutoRefreshInterval} from '../../utils/hooks';
 import {ResponseError} from '../Errors/ResponseError';
 
-import {EmptyTableRow, LoadingTableRow, TableRow} from './TableRow';
+import {EmptyTableRow, TableRow} from './TableRow';
 import i18n from './i18n';
 import type {
     Column,
@@ -117,40 +117,31 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
             return null;
         }
 
-        if (!currentData) {
-            if (error) {
-                const errorData = error as IResponseError;
-                return (
-                    <EmptyTableRow columns={columns}>
-                        {renderErrorMessage ? (
-                            renderErrorMessage(errorData)
-                        ) : (
-                            <ResponseError error={errorData} />
-                        )}
-                    </EmptyTableRow>
-                );
-            } else {
-                return getArray(dataLength).map((value) => (
-                    <LoadingTableRow
-                        key={value}
-                        columns={columns}
-                        height={rowHeight}
-                        isVisible={isRowVisible(value)}
-                    />
-                ));
-            }
+        if (!currentData && error) {
+            const errorData = error as IResponseError;
+            return (
+                <EmptyTableRow columns={columns}>
+                    {renderErrorMessage ? (
+                        renderErrorMessage(errorData)
+                    ) : (
+                        <ResponseError error={errorData} />
+                    )}
+                </EmptyTableRow>
+            );
         }
 
         // Data is loaded, but there are no entities in the chunk
-        if (!currentData.data?.length) {
+        if (currentData?.data && !currentData.data?.length) {
             return (
                 <EmptyTableRow columns={columns}>
                     {renderEmptyDataMessage ? renderEmptyDataMessage() : i18n('empty')}
                 </EmptyTableRow>
             );
         }
 
-        return currentData.data.map((rowData, index) => (
+        const data = currentData?.data || getArray(dataLength);
+
+        return data.map((rowData, index) => (
             <TableRow
                 key={index}
                 row={rowData as T}

src/components/PaginatedTable/TableRow.tsx

@@ -1,3 +1,5 @@
+import React from 'react';
+
 import {Skeleton} from '@gravity-ui/uikit';
 
 import {DEFAULT_ALIGN, DEFAULT_RESIZEABLE} from './constants';
@@ -37,57 +39,27 @@ const TableRowCell = ({
     );
 };
 
-interface LoadingTableRowProps<T> {
-    columns: Column<T>[];
-    height: number;
-}
-
 interface VisibilityProps {
     isVisible?: boolean;
 }
 
-export const LoadingTableRow = typedMemo(function <T>({
-    columns,
-    height,
-    isVisible = true,
-}: LoadingTableRowProps<T> & VisibilityProps) {
-    return (
-        <tr className={b('row', {loading: true})}>
-            {columns.map((column) => {
-                const resizeable = column.resizeable ?? DEFAULT_RESIZEABLE;
-
-                return (
-                    <TableRowCell
-                        key={column.name}
-                        height={height}
-                        width={column.width}
-                        align={column.align}
-                        className={column.className}
-                        resizeable={resizeable}
-                    >
-                        {isVisible ? (
-                            <Skeleton
-                                className={b('row-skeleton')}
-                                style={{width: '80%', height: '50%'}}
-                            />
-                        ) : null}
-                    </TableRowCell>
-                );
-            })}
-        </tr>
-    );
-});
-
 interface TableRowColumnProps<T> {
     column: Column<T>;
-    row: T;
+    row?: T;
     height: number;
 }
 
 export const TableRowColumn = typedMemo(
     <T,>({row, column, height, isVisible = true}: TableRowColumnProps<T> & VisibilityProps) => {
         const resizeable = column.resizeable ?? DEFAULT_RESIZEABLE;
 
+        const renderedCell = React.useMemo(() => {
+            if (row) {
+                return column.render({row});
+            }
+            return null;
+        }, [column, row]);
+
         return (
             <TableRowCell
                 key={column.name}
@@ -97,15 +69,19 @@ export const TableRowColumn = typedMemo(
                 className={column.className}
                 resizeable={resizeable}
             >
-                {isVisible ? column.render({row}) : null}
+                {isVisible && row ? (
+                    renderedCell
+                ) : (
+                    <Skeleton className={b('row-skeleton')} style={{width: '80%', height: '50%'}} />
+                )}
             </TableRowCell>
         );
     },
 );
 
 interface TableRowProps<T> {
     columns: Column<T>[];
-    row: T;
+    row?: T;
     height: number;
     getRowClassName?: GetRowClassName<T>;
 }
@@ -117,7 +93,7 @@ export const TableRow = <T,>({
     height,
     isVisible = true,
 }: TableRowProps<T> & VisibilityProps) => {
-    const additionalClassName = getRowClassName?.(row);
+    const additionalClassName = row ? getRowClassName?.(row) : undefined;
 
     return (
         <tr className={b('row', additionalClassName)}>

src/utils/index.ts

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