perf(ui): виртуализация реестра задач и чата (@tanstack/react-virtual)
Шаг 1.3 плана production-готовности: - TaskRegistry: виртуальные строки с динамической высотой, порог 30 - TaskChat: виртуальные сообщения, порог 100, автоскролл/scrollToMessage - выделение/сортировка/поиск/inline-редакторы работают по полному массиву - check/build чисто, vitest 96/96
This commit is contained in:
@@ -230,3 +230,17 @@
|
||||
- Как проверялось: vitest 96/96; `npm run check` чисто; caller'ы дерева (роут /tree, MCP) — формат не изменился.
|
||||
- Влияние на поиск/UX: нет.
|
||||
- Подводные камни: raw CTE под PostgreSQL — при переименовании колонок tasks/forms обновить вручную (drizzle не проверяет); getRelatedTasks (граф task_relations) сознательно оставлен — кандидат на отдельный шаг.
|
||||
|
||||
---
|
||||
|
||||
## [1.3] Виртуализация списков (@tanstack/react-virtual)
|
||||
|
||||
- Статус: ✅ done
|
||||
- Зачем: длинные реестры/чаты не рендерят тысячи DOM-узлов (Фаза 1).
|
||||
- Что изменено:
|
||||
- `@tanstack/react-virtual@3.14.11` в dependencies (+6-7 kB gzip).
|
||||
- `client/src/components/TaskRegistry.tsx` — виртуализация строк таблицы (padding-строки в нативном tbody, динамическое измерение высоты через ResizeObserver, overscan 10, getItemKey=task.id). Порог 30 строк — меньше рендер 1:1 прежний. Массовое выделение (Shift+клик через anchorTaskId), сортировка, мгновенный клиентский поиск (инвариант), DnD колонок, inline-редакторы — работают по полному массиву, не по DOM.
|
||||
- `client/src/components/TaskChat.tsx` — виртуализация сообщений (плоский список: дата-разделители + сообщения, динамическая высота, overscan 10). Порог 100 элементов. Автоскролл к новому, scrollToMessage с fallback scrollToIndex, оптимистичная отправка, реакции/опросы/вложения сохранены.
|
||||
- Как проверялось: `npm run check` чисто; vitest 96/96; `npm run build` собирается.
|
||||
- Влияние на поиск/UX: поиск в реестре мгновенный как и был (фильтрация до виртуализации).
|
||||
- Подводные камни: в виртуальном чате дата-разделители не sticky; возможна «игра» ширин колонок реестра при table-layout:auto; уход редактируемой строки за overscan размонтирует несохранённый ввод (стандарт виртсписков). Ручная проверка в браузере: реестр с длинными значениями, чат >100 сообщений (автоскролл, скролл к ответу).
|
||||
|
||||
Reference in New Issue
Block a user