fix: find out performance issue with big tables of nodes

src/components/HoverPopup/HoverPopup.tsx

@@ -14,7 +14,7 @@ const DEBOUNCE_TIMEOUT = 100;
 
 type HoverPopupProps = {
     children: React.ReactNode;
-    popupContent: React.ReactNode;
+    renderPopupContent: () => React.ReactNode;
     showPopup?: boolean;
     offset?: [number, number];
     anchorRef?: React.RefObject<HTMLElement>;
@@ -26,7 +26,7 @@ type HoverPopupProps = {
 
 export const HoverPopup = ({
     children,
-    popupContent,
+    renderPopupContent,
     showPopup,
     offset,
     anchorRef,
@@ -98,22 +98,24 @@ export const HoverPopup = ({
             <span ref={anchor} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
                 {children}
             </span>
-            <Popup
-                contentClassName={b(null, contentClassName)}
-                anchorRef={anchorRef || anchor}
-                open={open}
-                onMouseEnter={onPopupMouseEnter}
-                onMouseLeave={onPopupMouseLeave}
-                onEscapeKeyDown={onPopupEscapeKeyDown}
-                onBlur={onPopupBlur}
-                placement={placement}
-                hasArrow
-                // bigger offset for easier switching to neighbour nodes
-                // matches the default offset for popup with arrow out of a sense of beauty
-                offset={offset || [0, 12]}
-            >
-                <div onContextMenu={onPopupContextMenu}>{popupContent}</div>
-            </Popup>
+            {open ? (
+                <Popup
+                    contentClassName={b(null, contentClassName)}
+                    anchorRef={anchorRef || anchor}
+                    onMouseEnter={onPopupMouseEnter}
+                    onMouseLeave={onPopupMouseLeave}
+                    onEscapeKeyDown={onPopupEscapeKeyDown}
+                    onBlur={onPopupBlur}
+                    placement={placement}
+                    hasArrow
+                    open
+                    // bigger offset for easier switching to neighbour nodes
+                    // matches the default offset for popup with arrow out of a sense of beauty
+                    offset={offset || [0, 12]}
+                >
+                    <div onContextMenu={onPopupContextMenu}>{renderPopupContent()}</div>
+                </Popup>
+            ) : null}
         </React.Fragment>
     );
 };

src/components/MemoryViewer/MemoryViewer.tsx

@@ -100,7 +100,7 @@ export function MemoryViewer({
 
     return (
         <HoverPopup
-            popupContent={
+            renderPopupContent={() => (
                 <DefinitionList responsive>
                     {memorySegments.map(
                         ({label, value: segmentSize, capacity: segmentCapacity, key}) => (
@@ -132,7 +132,7 @@ export function MemoryViewer({
                         ),
                     )}
                 </DefinitionList>
-            }
+            )}
         >
             <div className={b({theme, status}, className)}>
                 <div className={b('progress-container')}>

src/components/PaginatedTable/PaginatedTable.scss

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

src/components/PaginatedTable/PaginatedTable.tsx

@@ -21,7 +21,7 @@ import {useScrollBasedChunks} from './useScrollBasedChunks';
 import './PaginatedTable.scss';
 
 export interface PaginatedTableProps<T, F> {
-    limit: number;
+    limit?: number;
     initialEntitiesCount?: number;
     fetchData: FetchData<T, F>;
     filters?: F;
@@ -38,8 +38,10 @@ export interface PaginatedTableProps<T, F> {
     containerClassName?: string;
 }
 
+const DEFAULT_PAGINATION_LIMIT = 20;
+
 export const PaginatedTable = <T, F>({
-    limit: chunkSize,
+    limit: chunkSize = DEFAULT_PAGINATION_LIMIT,
     initialEntitiesCount,
     fetchData,
     filters,

src/components/PaginatedTable/TableChunk.tsx

@@ -119,12 +119,7 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
                 );
             } else {
                 return getArray(dataLength).map((value) => (
-                    <LoadingTableRow
-                        key={value}
-                        columns={columns}
-                        height={rowHeight}
-                        index={value}
-                    />
+                    <LoadingTableRow key={value} columns={columns} height={rowHeight} />
                 ));
             }
         }
@@ -141,7 +136,6 @@ export const TableChunk = typedMemo(function TableChunk<T, F>({
         return currentData.data.map((rowData, index) => (
             <TableRow
                 key={index}
-                index={index}
                 row={rowData as T}
                 columns={columns}
                 height={rowHeight}

src/components/PaginatedTable/TableRow.tsx

@@ -3,6 +3,7 @@ import {Skeleton} from '@gravity-ui/uikit';
 import {DEFAULT_ALIGN, DEFAULT_RESIZEABLE} from './constants';
 import {b} from './shared';
 import type {AlignType, Column, GetRowClassName} from './types';
+import {typedMemo} from './utils';
 
 interface TableCellProps {
     height: number;
@@ -38,19 +39,18 @@ const TableRowCell = ({
 
 interface LoadingTableRowProps<T> {
     columns: Column<T>[];
-    index: number;
     height: number;
 }
 
-export const LoadingTableRow = <T,>({index, columns, height}: LoadingTableRowProps<T>) => {
+export const LoadingTableRow = typedMemo(function <T>({columns, height}: LoadingTableRowProps<T>) {
     return (
         <tr className={b('row', {loading: true})}>
             {columns.map((column) => {
                 const resizeable = column.resizeable ?? DEFAULT_RESIZEABLE;
 
                 return (
                     <TableRowCell
-                        key={`${column.name}${index}`}
+                        key={column.name}
                         height={height}
                         width={column.width}
                         align={column.align}
@@ -66,17 +66,16 @@ export const LoadingTableRow = <T,>({index, columns, height}: LoadingTableRowPro
             })}
         </tr>
     );
-};
+});
 
 interface TableRowProps<T> {
     columns: Column<T>[];
-    index: number;
     row: T;
     height: number;
     getRowClassName?: GetRowClassName<T>;
 }
 
-export const TableRow = <T,>({row, index, columns, getRowClassName, height}: TableRowProps<T>) => {
+export const TableRow = <T,>({row, columns, getRowClassName, height}: TableRowProps<T>) => {
     const additionalClassName = getRowClassName?.(row);
 
     return (
@@ -86,14 +85,14 @@ export const TableRow = <T,>({row, index, columns, getRowClassName, height}: Tab
 
                 return (
                     <TableRowCell
-                        key={`${column.name}${index}`}
+                        key={column.name}
                         height={height}
                         width={column.width}
                         align={column.align}
                         className={column.className}
                         resizeable={resizeable}
                     >
-                        {column.render({row, index})}
+                        {column.render({row})}
                     </TableRowCell>
                 );
             })}

src/components/PaginatedTable/types.ts

@@ -29,7 +29,7 @@ export interface Column<T> {
     className?: string;
     sortable?: boolean;
     resizeable?: boolean;
-    render: (props: {row: T; index: number}) => React.ReactNode;
+    render: (props: {row: T}) => React.ReactNode;
     width?: number;
     resizeMaxWidth?: number;
     resizeMinWidth?: number;

src/components/VDisk/VDisk.tsx

@@ -41,7 +41,7 @@ export const VDisk = ({
             showPopup={showPopup}
             onShowPopup={onShowPopup}
             onHidePopup={onHidePopup}
-            popupContent={<VDiskPopup data={data} />}
+            renderPopupContent={() => <VDiskPopup data={data} />}
             offset={[0, 5]}
             delayClose={delayClose}
             delayOpen={delayOpen}

src/containers/Nodes/NodesTable.tsx

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

src/containers/PDiskPage/PDiskSpaceDistribution/PDiskSpaceDistribution.tsx

@@ -86,7 +86,7 @@ function Slot<T extends SlotItemType>({item, pDiskId, nodeId}: SlotProps<T>) {
 
             return (
                 <HoverPopup
-                    popupContent={<VDiskInfo data={item.SlotData} withTitle />}
+                    renderPopupContent={() => <VDiskInfo data={item.SlotData} withTitle />}
                     contentClassName={b('vdisk-popup')}
                     placement={['right', 'top']}
                 >
@@ -111,7 +111,7 @@ function Slot<T extends SlotItemType>({item, pDiskId, nodeId}: SlotProps<T>) {
         if (isLogSlot(item)) {
             return (
                 <HoverPopup
-                    popupContent={<LogInfo data={item.SlotData} />}
+                    renderPopupContent={() => <LogInfo data={item.SlotData} />}
                     contentClassName={b('vdisk-popup')}
                     placement={['right', 'top']}
                 >
@@ -134,7 +134,7 @@ function Slot<T extends SlotItemType>({item, pDiskId, nodeId}: SlotProps<T>) {
         if (isEmptySlot(item)) {
             return (
                 <HoverPopup
-                    popupContent={<EmptySlotInfo data={item.SlotData} />}
+                    renderPopupContent={() => <EmptySlotInfo data={item.SlotData} />}
                     contentClassName={b('vdisk-popup')}
                     placement={['right', 'top']}
                 >

src/containers/Storage/PDisk/PDisk.tsx

@@ -87,7 +87,7 @@ export const PDisk = ({
                 anchorRef={anchorRef}
                 onShowPopup={onShowPopup}
                 onHidePopup={onHidePopup}
-                popupContent={<PDiskPopup data={data} />}
+                renderPopupContent={() => <PDiskPopup data={data} />}
                 delayClose={200}
             >
                 <InternalLink to={pDiskPath} className={b('content')}>

src/containers/Storage/StorageGroups/PaginatedStorageGroupsTable.tsx

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

src/containers/Storage/StorageNodes/PaginatedStorageNodesTable.tsx

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