Пропсы загрузочных состояний (references/loading-props.md)

Источник: ds-skills/core-ui-development-skills/src/skills/build-core-ui-components/references/loading-props.md — справочник скилла build-core-ui-components

Перед добавлением пропса проверить ближайшие актуальные компоненты и сохранить терминологию семейства.

skeleton

Использовать skeleton?: boolean, когда проп включает визуальный placeholder вместо готового содержимого или поверх него.

  • Задавать skeleton = false в деструктуризации.
  • Указывать @default false в JSDoc.
  • Не создавать enum default | skeleton, если это единственная бинарная ось состояния.
  • Переиспользовать Skeleton, SkeletonText или SkeletonContainer согласно геометрии компонента.
  • Явно определить, сохраняются ли размеры и DOM реального содержимого во время skeleton.
type ComponentProps = {
  /**
   * Включает состояние загрузки.
   * @default false
   */
  skeleton?: boolean;
};

isLoading

Использовать isLoading?: boolean, когда проп описывает выполняющееся действие или процесс и влияет на интерактивность: отправку, подтверждение, загрузку вариантов или блокировку повторного действия.

  • Задавать isLoading = false, если проп необязательный.
  • Указывать @default false в JSDoc.
  • Проверять блокировку обработчиков, disabled-семантику и индикатор процесса по ближайшему аналогу.
  • Не заменять isLoading на skeleton, если пользователь ожидает сохранения интерактивного контрола с индикатором действия.

Выбор и совместное использование

  • skeleton отвечает за представление ещё не готового контента.
  • isLoading отвечает за выполняющийся процесс или действие.
  • Не добавлять оба пропса, если они переключают одну и ту же визуализацию.
  • Если оба состояния действительно нужны, описать различие, приоритет одновременных значений и покрыть его тестом.
  • Не добавлять отдельный state только для значений default и skeleton; использовать skeleton?: boolean.
  • Не добавлять ARIA-атрибуты автоматически. Следовать подтверждённым требованиям доступности и паттернам ближайших компонентов core-ui.

Проверка

Покрыть тестами default false, включённое состояние, публично наблюдаемую визуализацию и влияние isLoading на интерактивность. Для Storybook использовать boolean control.