Контекст
Необходимо реализовать динамическую загрузку группы "Проекты" в сайдбаре. В качестве эталона использовать паттерн из src/widgets/nav-user/ui/NavUser.tsx, где контент загружается через next/dynamic и отображается fallback во время загрузки.
Задача нужна для улучшения UX при медленной сети, снижения нагрузки на первичный рендер и унификации подхода к ленивой загрузке виджетов в проекте.
Технические требования
- Локация логики: виджет группы "Проекты" в
src/widgets/.../ui, интеграция в src/app/layouts/SidebarLayout.tsx.
- Инструменты:
next/dynamic, TypeScript, существующие UI-компоненты fallback/placeholder.
- Логика работы:
- Создать контейнерный компонент группы "Проекты" по аналогии с
NavUser: dynamic(() => import(...).then((mod) => mod.Component), { ssr: false, loading: () => <ProjectsFallback /> }).
- Вынести основной контент в отдельный компонент (например,
ProjectsContent) и fallback в ProjectsFallback.
- Подключить новый контейнер в сайдбар вместо прямого рендера контента, чтобы при загрузке всегда показывался корректный placeholder без блокировки остальных секций.
Цель и критерии приемки (Definition of Done)
Важные указания
- Производительность: Использовать только точечный динамический импорт для секции "Проекты"; не допускать повторной инициализации fallback при стабильном состоянии.
- Ошибки: При сбое загрузки модуля не допускать падения всего сайдбара; предусмотреть безопасное деградированное состояние и логирование ошибки.
- Безопасность: Не выводить чувствительные данные в
fallback или error-состоянии; валидировать структуру данных проектов перед рендером.
Контекст
Необходимо реализовать динамическую загрузку группы "Проекты" в сайдбаре. В качестве эталона использовать паттерн из
src/widgets/nav-user/ui/NavUser.tsx, где контент загружается черезnext/dynamicи отображаетсяfallbackво время загрузки.Задача нужна для улучшения UX при медленной сети, снижения нагрузки на первичный рендер и унификации подхода к ленивой загрузке виджетов в проекте.
Технические требования
src/widgets/.../ui, интеграция вsrc/app/layouts/SidebarLayout.tsx.next/dynamic,TypeScript, существующие UI-компоненты fallback/placeholder.NavUser:dynamic(() => import(...).then((mod) => mod.Component), { ssr: false, loading: () => <ProjectsFallback /> }).ProjectsContent) и fallback вProjectsFallback.Цель и критерии приемки (Definition of Done)
Projects.tsx(динамический контейнер),ProjectsContent.tsxиProjectsFallback.tsx; настроены корректные экспорты.fallback, после загрузки — полноценный контент; визуально соответствует остальным блокам сайдбара.SidebarLayout; при необходимости добавлены/обновлены компонентные тесты на состоянияloadingиloaded.Важные указания
fallbackили error-состоянии; валидировать структуру данных проектов перед рендером.