Skip to content

[Frontend] Динамическая загрузка группы "Проекты" в сайдбаре через next/dynamic с fallback #62

@kapitulin24

Description

@kapitulin24

Контекст

Необходимо реализовать динамическую загрузку группы "Проекты" в сайдбаре. В качестве эталона использовать паттерн из 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.
  • Логика работы:
    1. Создать контейнерный компонент группы "Проекты" по аналогии с NavUser: dynamic(() => import(...).then((mod) => mod.Component), { ssr: false, loading: () => <ProjectsFallback /> }).
    2. Вынести основной контент в отдельный компонент (например, ProjectsContent) и fallback в ProjectsFallback.
    3. Подключить новый контейнер в сайдбар вместо прямого рендера контента, чтобы при загрузке всегда показывался корректный placeholder без блокировки остальных секций.

Цель и критерии приемки (Definition of Done)

  • База: Созданы Projects.tsx (динамический контейнер), ProjectsContent.tsx и ProjectsFallback.tsx; настроены корректные экспорты.
  • Функционал: В секции "Проекты" сначала отображается fallback, после загрузки — полноценный контент; визуально соответствует остальным блокам сайдбара.
  • Лимиты/SLA: Остальные элементы сайдбара рендерятся без задержки; отсутствие регрессии по TTI/INP для страницы с сайдбаром.
  • Интеграция: Обновлен импорт и использование в SidebarLayout; при необходимости добавлены/обновлены компонентные тесты на состояния loading и loaded.

Важные указания

  • Производительность: Использовать только точечный динамический импорт для секции "Проекты"; не допускать повторной инициализации fallback при стабильном состоянии.
  • Ошибки: При сбое загрузки модуля не допускать падения всего сайдбара; предусмотреть безопасное деградированное состояние и логирование ошибки.
  • Безопасность: Не выводить чувствительные данные в fallback или error-состоянии; валидировать структуру данных проектов перед рендером.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No fields configured for Feature.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions