Как оптимизировать производительность DevExtreme DataGrid с более чем 6000 записями и более 160 столбцами в React? ⇐ CSS

[Anonymous]

Я реализовал таблицу данных, используя DevExtreme DataGrid в React. Таблица содержит более 6000 записей и более 160 столбцов. Вот как это работает:
Изначально я загружаю только имена столбцов.
При нажатии кнопки все записи извлекаются из API.
В таблице используются виртуальная прокрутка для повышения производительности.
Однако я столкнулся с проблемой, когда во время прокрутки скелетные загрузчики появляются как над, так и под областью просмотра, что создает странный визуальный эффект. Вот упрощенная версия моего кода:

Код: Выделить всё

import React, { memo } from "react";
import DataGrid, {
Column,
ColumnChooser,
Export,
Paging,
Scrolling,
SearchPanel,
Selection,
Sorting,
Summary,
TotalItem
} from "devextreme-react/data-grid";
import PropTypes from "prop-types"; // Import PropTypes

const DataGridComponent = memo((props) => {

const {
data,
keyExpr,
onSelectionChanged,
selectedRows,
columns,
stickyIndex,
summaryItems,
extraColumn,
onIconClick,
cellRender,
height
} = props;

// Memoize data to avoid re-renders on each row selection change
const memoizedData = React.useMemo(() => data, [data]);

// Memoize columns (if an extra column is provided)
const memoizedColumns = React.useMemo(() => {
return extraColumn ? [extraColumn, ...columns] : columns;
}, [extraColumn, columns]);

const memoizedCellRender = React.useCallback((e, col) => {
if (cellRender) {
return cellRender(e, col);
}
}, [cellRender]);

// Detect if the screen is mobile
const isMobile = React.useMemo(() => window.innerWidth 








{Array.isArray(memoizedColumns) && memoizedColumns.map((col, index) => (
 memoizedCellRender(e, col)}
/>
))}


{summaryItems.map((item, index) => (

))}



);
});

// Define PropTypes
DataGridComponent.propTypes = {
data: PropTypes.array,
keyExpr: PropTypes.string,
onSelectionChanged: PropTypes.func,
selectedRows: PropTypes.array,
columns: PropTypes.array,
stickyIndex: PropTypes.number,
summaryItems: PropTypes.array,
loading: PropTypes.bool,
onIconClick: PropTypes.func,
cellRender: PropTypes.func,
};

// Set default props to avoid crashes
DataGridComponent.defaultProps = {
data: [],
keyExpr: "diamond_id",
onSelectionChanged: () => { },
selectedRows: [],
columns: [],
stickyIndex: 0,
summaryItems: [],
loading: true,
onIconClick: () =>  { },
cellRender: null
};

export default DataGridComponent;

Ключевые моменты:
Я использую режим виртуальной прокрутки.
Скелетные загрузчики отображаются неловко во время прокрутки.
проблема заметна из-за большого набора данных и множества столбцов.
Что я пробовал:
Отключение анимации с помощью анимации: { Enabled: false } .
Оптимизация рендеринга данных и столбцов с помощью useMemo.
Вопросы:

• Есть ли способ предотвратить появление скелетных загрузчиков над и под областью просмотра при прокрутке?
• Существуют ли дополнительные оптимизации для обработки больших наборов данных и множества столбцов с помощью DevExtreme DataGrid?

Любые предложения или рекомендации по улучшению поведения прокрутки и в целом производительность была бы очень признательна!
Что я пробовал:

• Я отключил анимацию в DataGrid с использованием анимации: { Enabled: false .
• Я использовал React.useMemo для оптимизации рендеринга данных и столбцов.
• br />Я настроил сетку на использование виртуальной прокрутки с помощью прокрутки: { mode: "virtual" .

Чего я ожидал:

Я ожидал более плавной прокрутки без скелетные загрузчики или артефакты рендеринга, обеспечивая удобство работы пользователя даже с большими наборами данных и множеством столбцов.
Что произошло на самом деле:

Несмотря на после этих оптимизаций скелетные загрузчики по-прежнему появляются над и под окном просмотра во время прокрутки, создавая визуально непривлекательный опыт.

Подробнее здесь: https://stackoverflow.com/questions/793 ... d-160-colu