Skeleton

Пакет @cloud-ru/ds-skeleton предоставляет примитивы для индикации загрузки: блочный Skeleton, многострочный SkeletonText и контейнер-переключатель WithSkeleton, который сам выбирает, что показывать — скелетон или реальный контент.

Демо

<Skeleton loading width={240} height={24} borderRadius={4} />

Когда использовать

• Когда данные подгружаются асинхронно и отображение контента задерживается более 200 мс.
• Чтобы зарезервировать место под контент и избежать layout shift при появлении данных.
• Для списков, карточек и текстовых блоков — как визуальная подсказка «идёт загрузка».

Когда не нужен скелетон: для мгновенных переходов (< 200 мс), для обычных спиннеров поверх модальных окон (используйте Loader), для пустых состояний (используйте EmptyState).

Секция описывает семантику и поведение скелетонов в макетах.

Анатомия

Variant

Типографическая роль строки для SkeletonText: display, headline, title, label, body — совпадают с осями Typography и задают высоту/межстрочник плейсхолдера.

Size

Размер текста: s, m, l — подбирается под размер реального контента, который заменяет скелетон.

Align

Выравнивание хвостовой (неполной) строки в SkeletonText: left — хвост слева, right — справа.

Установка

pnpm add @cloud-ru/ds-skeleton

import { Skeleton, SkeletonText, WithSkeleton } from '@cloud-ru/ds-skeleton'

Примеры использования

1. Блок фиксированного размера

import { Skeleton } from '@cloud-ru/ds-skeleton';

export function Block() {
  return <Skeleton loading width={240} height={24} borderRadius={4} />;
}

2. Круглый блок

import { Skeleton } from '@cloud-ru/ds-skeleton';

export function Circle() {
  return <Skeleton loading width={48} height={48} borderRadius='50%' />;
}

3. Текстовые строки

import { SkeletonText } from '@cloud-ru/ds-skeleton';

export function TextLines() {
  return <SkeletonText loading lines={3} variant='body' size='m' />;
}

4. Переключение loading → content

import { SkeletonText, WithSkeleton } from '@cloud-ru/ds-skeleton';

export function WithToggle() {
  const loading = true;
  return (
    <WithSkeleton loading={loading} skeleton={<SkeletonText loading lines={2} variant='body' size='m' />}>
      <p>Реальный контент после загрузки.</p>
    </WithSkeleton>
  );
}

Props

Skeleton

Types

SkeletonProps

SkeletonText

Types

SkeletonTextProps

Unions

Align

Size

Variant

WithSkeleton

Types

WithSkeletonProps

Storybook

Figma