Skeleton

Installation

npm i @snack-uikit/skeleton

Changelog

Description

• Пакет @snack-uikit/skeleton предоставляет компоненты для отображения индикаторов загрузки (скелетонов) во время асинхронных операций.
• Skeleton — базовый компонент для создания блочных скелетонов произвольной формы с настраиваемыми размерами (ширина, высота) и радиусом скругления.
• SkeletonText — специализированный компонент для имитации текстового контента: отображает несколько строк скелетона с учётом типографики (размер шрифта, межстрочный интервал), что позволяет точно соответствовать реальному тексту по высоте и визуальному стилю.
• WithSkeleton — компонент-обёртка для группировки блоков скелетона: принимает JSX-ноду скелетона в проп skeleton и контент в children, автоматически переключаясь между ними в зависимости от состояния загрузки.
• SkeletonContextProvider — контекст-провайдер для централизованного управления состоянием загрузки: находящиеся внутри этого контекста компоненты Skeleton и SkeletonText автоматически получают значение loading из контекста и не требуют явной передачи этого пропа.
• Все компоненты поддерживают работу как с явным пропом loading, так и с контекстом: если проп не передан, значение берётся из SkeletonContextProvider.

Example

import { Skeleton, SkeletonText, SkeletonContextProvider, WithSkeleton } from '@snack-uikit/skeleton';

function Example() {
  const isLoading = true;

  return (
    <>
      {/* Базовое использование Skeleton */}
      <Skeleton loading={isLoading} width={200} height={100} borderRadius={8}>
        <div>Контент после загрузки</div>
      </Skeleton>

      {/* Использование SkeletonText с типографикой */}
      <SkeletonText loading={isLoading} lines={3} typography="body-m" width="100%">
        <p>Текст, который появится после загрузки</p>
      </SkeletonText>

      {/* Централизованное управление через контекст */}
      <SkeletonContextProvider loading={isLoading}>
        <Skeleton width={100} height={100} borderRadius={50}>
          <Avatar />
        </Skeleton>
        <SkeletonText lines={2}>
          <Title />
        </SkeletonText>
      </SkeletonContextProvider>

      {/* Группировка блоков с WithSkeleton */}
      <SkeletonContextProvider loading={isLoading}>
        <WithSkeleton
          skeleton={
            <div>
              <Skeleton width={100} height={100} borderRadius={50} />
              <SkeletonText lines={3} />
            </div>
          }
        >
          <Card />
        </WithSkeleton>
      </SkeletonContextProvider>
    </>
  );
}

Skeleton

Props

| name | type | default value | description | |------|------|---------------|-------------| | loading | boolean | - | Флаг состояния загрузки. Если значение true, будет отрисован блок скелетона, если false - children. | | width | Width<string \| number> | - | Ширина блока. Можно указать значение допустимое для CSSProperty.width (пример '60%', '400px' и т.д) | | height | Height<string \| number> | - | Высота блока. Можно указать значение допустимое для CSSProperty.height (пример '60%', '400px' и т.д) | | borderRadius | BorderRadius<string \| number> | - | Радиус скругления. Можно указать значение допустимое для CSSProperty.borderRadius (пример '10px', '50%' и т.д) | | className | string | - | CSS-класс |

SkeletonText

Props

| name | type | default value | description | |------|------|---------------|-------------| | loading | boolean | - | Флаг состояния загрузки. Если значение true, будет отрисован блок скелетона, если false - children. | | width | Width<string \| number> | - | Ширина блока. Можно указать значение допустимое для CSSProperty.width (пример '60%', '400px' и т.д) | | className | string | - | CSS-класс | | lines | number | 3 | Количество строк. | | rowClassName | string | - | CSS-класс строки | | lineClassName | string | - | CSS-класс линии | | typography | "display-l" | "display-m" | "display-s" | "headline-l" | "headline-m" | "headline-s" | "title-l" | "title-m" | "title-s" | "label-l" | "label-m" | "label-s" | "body-l" | "body-m" | "body-s" | body-m | Типографика |

WithSkeleton

Props

| name | type | default value | description | |------|------|---------------|-------------| | skeleton* | ReactNode | - | JSX скелетон | | loading | boolean | - | Флаг состояния загрузки. Если значение true, будет отрисован блок скелетона, если false - children. |

SkeletonContextProvider

Props

| name | type | default value | description | |------|------|---------------|-------------| | loading* | boolean | - | Флаг состояния загрузки. Если значение true, будут отрисованы блоки скелетона. |