Skip to content

[Frontend] Динамическая загрузка группы "Моя команда" в сайдбаре + fallback и раскрытие по умолчанию #63

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

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

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

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

  • Производительность: Использовать точечный динамический импорт только для секции "Моя команда"; не допускать повторной инициализации 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