Скелетон

Плейсхолдер, который показывается, пока содержимое ещё загружается.

Базовое использование

Базовое использование

import { LhSkeleton } from '@lh-ui/react'

export default function Demo() {
  return <LhSkeleton avatar rows={2} sx={{ w: 300 }} />
}

Skeleton Props

Свойство	Описание	Тип	Варианты	По умолчанию
loading	Показывать ли скелетон (при false рендерит дочерние элементы)	boolean	—	true
rows	Количество текстовых строк	number	—	3
avatar	Добавлять ли круглый плейсхолдер аватара	boolean	—	false
animated	Включать ли анимацию	boolean	—	true
sx	Сокращённые props макета	SxProps	—	—

SkeletonItem Props

LhSkeletonItem — независимо экспортируемый плейсхолдер-блок, который можно использовать отдельно для компоновки произвольных скелетных структур.

Свойство	Описание	Тип	Варианты	По умолчанию
variant	Форма плейсхолдера	'text' | 'rect' | 'circle'	—	'text'
animated	Включать ли анимацию	boolean	—	true
className	Добавляемое имя класса	string	—	—
style	Добавляемый inline-стиль	CSSProperties	—	—
sx	Сокращённые props макета	SxProps	—	—

import { LhSkeletonItem } from '@lh-ui/react'

export default function Demo() {
  return (
    <div style={{ display: 'flex', gap: 16, width: 300 }}>
      <LhSkeletonItem variant="circle" />
      <div style={{ flex: 1 }}>
        <LhSkeletonItem style={{ marginBottom: 8 }} />
        <LhSkeletonItem style={{ width: '60%' }} />
      </div>
    </div>
  )
}

Алгоритм ширины строк

При rows > 1 последняя строка сужается до 60%, имитируя реальный набор абзаца; корневой элемент должен иметь определённую ширину (ширины строк заданы в процентах).

Доступность

Контейнер скелетона выводит aria-busy="true" + aria-live="polite"; все плейсхолдеры помечены aria-hidden, а когда данные готовы, скринридер снова объявляет реальное содержимое. При prefers-reduced-motion анимация автоматически деградирует до статического плейсхолдера.

Стили

import '@lh-ui/react/style/skeleton'