Skip to content

[Frontend] Динамическая загрузка виджета teams в app-sidebar #64

@kapitulin24

Description

@kapitulin24

Контекст

Необходимо реализовать динамическую загрузку виджета teams в сайдбаре из src/widgets/app-sidebar/ui/teams.
Цель задачи — снизить нагрузку на первичный рендер, ускорить отображение остального интерфейса sidebar и унифицировать подход к ленивой загрузке секций через next/dynamic.


Технические требования

  • Локация логики: src/widgets/app-sidebar/ui/teams + точка подключения в layout/sidebar-компоненте (например, src/app/layouts/SidebarLayout.tsx).
  • Инструменты: next/dynamic, TypeScript, существующие fallback/placeholder-компоненты UI.
  • Логика работы:
    1. Создать динамический контейнер для teams с использованием dynamic(() => import(...).then((mod) => mod.Component), { ssr: false, loading: () => <TeamsFallback /> }).
    2. Разделить реализацию на контейнер (Teams.tsx), контент (TeamsContent.tsx) и placeholder (TeamsFallback.tsx) для прозрачной поддержки состояний загрузки.
    3. Заменить прямой рендер teams в sidebar на динамический контейнер, чтобы fallback показывался сразу, без блокировки остальных секций.
    4. Обработать деградированный сценарий при сбое загрузки модуля: не ломать весь sidebar, показывать безопасное состояние и отправлять лог в observability-слой.

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

  • База: Созданы Teams.tsx, TeamsContent.tsx, TeamsFallback.tsx; настроены корректные экспорты в index.ts.
  • Функционал: Секция teams загружается динамически; во время загрузки отображается корректный fallback, после загрузки — полноценный контент.
  • Лимиты/SLA: Рендер остальных блоков sidebar не блокируется; нет регрессии по TTI/INP; исключены лишние повторные инициализации динамического модуля.
  • Интеграция: Обновлены импорты и подключение в layout/sidebar; добавлены/обновлены тесты на состояния loading и loaded.

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

  • Производительность: Использовать точечный динамический импорт только для teams; не выносить в lazy-load критичные для первого экрана элементы.
  • Ошибки: При ошибке загрузки модуля не выбрасывать необработанные исключения в корень приложения; обеспечить локальное graceful-degradation поведение.
  • Безопасность: Не отображать внутренние детали ошибки в UI; валидировать входные данные teams перед рендером контента.

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