AsyncBoundary
Headless-компонент состояний загрузки данных из @reformer/cdk: Root / Idle /
Loading / Content / Empty / Error / Retry. Разметки и стилей не навязывает —
слоты возвращают голые фрагменты, а вёрстку задаёте вы. Готовый визуальный вариант —
AsyncBoundary из @reformer/ui-kit.
Работает в двух режимах:
- self-managed — передан
load: компонент грузит данные сам, ведёт статус, отменяет запрос при сменеloadKeyи размонтировании, даёт повтор из коробки. Снаружи остаются только «как загрузить» и «что сделать с ответом» (onSuccess). - controlled —
loadне передан: состояние приходит пропомstatus. Нужен там, где загрузкой владеет кто-то другой — например behavior рендерера сpatchProps({ status }).
Ключевые отличия от «просто тернарника по статусу»:
- Слот
Errorполучает саму ошибку иretryчерез render-функцию — текст сбоя не приходится хардкодить в отдельном компоненте-обёртке. - Императивный
ref(AsyncBoundaryHandle) —reload()/abort()для триггеров вне дерева границы: кнопки «Обновить» в шапке, пункта меню, события сокета. idle— отдельное состояние: «грузить нечего» (форма создания, id не выбран) не то же самое, что «успешно загружено».delayMsоткладывает показ слотаLoading, гася вспышку спиннера при быстром ответе. Подменяется только момент показа UI — самstatusостаётся честным.refreshingоставляет контент на экране во время фонового обновления (stale-while-revalidate).- Пустота — не пятый статус, а предикат
whenуAsyncBoundary.Emptyвнутриready: считать его умеет только консумент.
Это не Suspense-boundary: ничего не throw'ится и не перехватывается, статусом управляете вы, данные компонент не загружает.
Variants — готовые конфигурации компонента: один и тот же компонент с разными преднастроенными пропсами. Витрина состояний (напр. обычный Select и Select с расширенной информацией — два варианта).
Examples — приёмы в коде: как решить задачу. Напр. как разные Data Provider’ы работают с компонентом (рецепты использования).