fix(ResizeableDataTable): rework loading state

Author: artemmufazalov

src/components/ResizeableDataTable/ResizeableDataTable.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 
-import type {Column, DataTableProps, Settings, SortOrder} from '@gravity-ui/react-data-table';
+import type {Column, DataTableProps, SortOrder} from '@gravity-ui/react-data-table';
 import DataTable, {updateColumnsWidth} from '@gravity-ui/react-data-table';
 import {Skeleton} from '@gravity-ui/uikit';
 
 import {cn} from '../../utils/cn';
 import {useTableResize} from '../../utils/hooks/useTableResize';
+import {TableSkeleton} from '../TableSkeleton/TableSkeleton';
 
 import './ResizeableDataTable.scss';
 
@@ -14,7 +15,19 @@ const b = cn('ydb-resizeable-data-table');
 export interface ResizeableDataTableProps<T> extends Omit<DataTableProps<T>, 'theme' | 'onResize'> {
     columnsWidthLSKey?: string;
     wrapperClassName?: string;
-    loading?: boolean;
+
+    /**
+     * Not enough meta data (settings, sizes, features, etc.) to properly render table columns
+     * Use case: initial load
+     */
+    isLoading?: boolean;
+    /**
+     * No table data, but columns data is loaded and they could be rendered
+     * Use case: you need to preserve table headers on sort change when backend sort
+     */
+    isFetching?: boolean;
+    loadingSkeletonRowsCount?: number;
+
     onSortChange?: (params: SortOrder | SortOrder[] | undefined) => void;
 }
 
@@ -23,9 +36,12 @@ export function ResizeableDataTable<T>({
     columns,
     settings,
     wrapperClassName,
-    loading,
+    isLoading,
+    isFetching,
+    loadingSkeletonRowsCount = 2,
     onSort,
     onSortChange,
+    data,
     ...props
 }: ResizeableDataTableProps<T>) {
     const [tableColumnsWidth, setTableColumnsWidth] = useTableResize(columnsWidthLSKey);
@@ -39,19 +55,36 @@ export function ResizeableDataTable<T>({
     );
 
     // If loading is true, override the render method of each column to display a Skeleton
-    const processedColumns = loading
-        ? columns.map((column: Column<T>) => ({
-              ...column,
-              render: () => <Skeleton className={b('row-skeleton')} />,
-          }))
-        : columns;
+    const processedColumns = React.useMemo(() => {
+        if (isFetching) {
+            return columns.map((column: Column<T>) => ({
+                ...column,
+                render: () => <Skeleton className={b('row-skeleton')} />,
+            }));
+        }
+        return columns;
+    }, [isFetching, columns]);
 
     const updatedColumns = updateColumnsWidth(processedColumns, tableColumnsWidth);
 
-    const newSettings: Settings = {
-        ...settings,
-        defaultResizeable: true,
-    };
+    const processedData = React.useMemo(() => {
+        if (isFetching && !data?.length) {
+            // We do not use data in render method when loading, so we can return an array of empty objects
+            return Array(loadingSkeletonRowsCount).fill({}) as T[];
+        }
+        return data;
+    }, [isFetching, data, loadingSkeletonRowsCount]);
+
+    const newSettings = React.useMemo(() => {
+        return {
+            ...settings,
+            defaultResizeable: true,
+        };
+    }, [settings]);
+
+    if (isLoading) {
+        return <TableSkeleton rows={loadingSkeletonRowsCount} />;
+    }
 
     return (
         <div className={b(null, wrapperClassName)}>
@@ -61,6 +94,7 @@ export function ResizeableDataTable<T>({
                 onResize={setTableColumnsWidth}
                 onSort={handleSort}
                 settings={newSettings}
+                data={processedData}
                 {...props}
             />
         </div>

src/containers/Node/Threads/Threads.tsx

@@ -37,7 +37,7 @@ export function Threads({nodeId, className, scrollContainerRef}: ThreadsProps) {
                     columns={columns}
                     settings={DEFAULT_TABLE_SETTINGS}
                     emptyDataMessage={i18n('alert_no-thread-data')}
-                    loading={isLoading}
+                    isLoading={isLoading}
                 />
             </TableWithControlsLayout.Table>
         </TableWithControlsLayout>

src/containers/Tenant/Diagnostics/Partitions/Partitions.tsx

@@ -5,7 +5,6 @@ import {skipToken} from '@reduxjs/toolkit/query';
 import {ResponseError} from '../../../../components/Errors/ResponseError';
 import {ResizeableDataTable} from '../../../../components/ResizeableDataTable/ResizeableDataTable';
 import {TableColumnSetup} from '../../../../components/TableColumnSetup/TableColumnSetup';
-import {TableSkeleton} from '../../../../components/TableSkeleton/TableSkeleton';
 import {TableWithControlsLayout} from '../../../../components/TableWithControlsLayout/TableWithControlsLayout';
 import {nodesListApi, selectNodesMap} from '../../../../store/reducers/nodesList';
 import {partitionsApi, setSelectedConsumer} from '../../../../store/reducers/partitions/partitions';
@@ -112,16 +111,13 @@ export const Partitions = ({path, database, databaseFullPath}: PartitionsProps)
     };
 
     const renderContent = () => {
-        if (loading) {
-            return <TableSkeleton className={b('loader')} />;
-        }
-
         return (
             <ResizeableDataTable
                 columnsWidthLSKey={PARTITIONS_COLUMNS_WIDTH_LS_KEY}
                 wrapperClassName={b('table')}
                 data={partitionsToRender}
                 columns={columnsToShow}
+                isLoading={loading}
                 settings={DEFAULT_TABLE_SETTINGS}
                 emptyDataMessage={i18n('table.emptyDataMessage')}
             />

src/containers/Tenant/Diagnostics/TopQueries/QueriesTableWithDrawer.tsx

@@ -104,7 +104,7 @@ export function QueriesTableWithDrawer({
                 columnsWidthLSKey={columnsWidthLSKey}
                 columns={columns}
                 data={data}
-                loading={loading}
+                isFetching={loading}
                 settings={tableSettings}
                 onRowClick={handleRowClick}
                 rowClassName={(row) => b('row', {active: isEqual(row, selectedRow)})}