Контекст
Необходимо реализовать динамическую загрузку группы "Моя команда" в сайдбаре. В качестве эталона использовать паттерн из 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, текущий компонент раскрывающихся групп sidebar.
- Логика работы:
- Создать контейнерный компонент группы "Моя команда" по аналогии с
NavUser: dynamic(() => import(...).then((mod) => mod.Component), { ssr: false, loading: () => <MyTeamFallback /> }).
- Вынести основной контент в отдельный компонент (например,
MyTeamContent) и fallback в MyTeamFallback.
- Подключить новый контейнер в сайдбар вместо прямого рендера контента, чтобы при загрузке всегда показывался корректный placeholder без блокировки остальных секций.
- Установить для группы "Моя команда" состояние раскрытия по умолчанию (
defaultOpen или эквивалент в текущей реализации), сохранив возможность ручного сворачивания/раскрытия пользователем.
Цель и критерии приемки (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, текущий компонент раскрывающихся групп sidebar.NavUser:dynamic(() => import(...).then((mod) => mod.Component), { ssr: false, loading: () => <MyTeamFallback /> }).MyTeamContent) и fallback вMyTeamFallback.defaultOpenили эквивалент в текущей реализации), сохранив возможность ручного сворачивания/раскрытия пользователем.Цель и критерии приемки (Definition of Done)
MyTeam.tsx(динамический контейнер),MyTeamContent.tsxиMyTeamFallback.tsx; настроены корректные экспорты.fallback, после загрузки — полноценный контент; секция раскрыта по умолчанию.TTI/INPдля страницы с сайдбаром.SidebarLayout; при необходимости добавлены/обновлены компонентные тесты на состоянияloading,loadedиdefaultOpen.Важные указания
fallbackили error-состоянии; валидировать структуру данных команды перед рендером.