Скелет уместен на первой загрузке блока или страницы. Для ожидания внутри одного действия — отправки формы, сохранения — возьмите проп loading у CdsButton или CdsProgressCircle. Если данных нет вовсе, покажите CdsEmptyState.

Анатомия

Скелет — это контейнер и вложенные «косточки»: каждая косточка повторяет форму одного элемента будущего контента. Тип list-item-avatar-two-line, actions раскрывается в круг под аватар, две строки текста и две кнопки.

Storybook

Вариации

Типы

Свойство type берёт готовую структуру из каталога: article — заголовок и абзац, card — картинка с заголовком, table — шапка, строки и подвал.

Sandbox Storybook

<script setup lang="ts">
import { CdsSkeletonLoader } from '@central-design-system/components';
</script>

<template>
  <div class="flex flex-wrap items-start justify-center gap-4">
    <CdsSkeletonLoader type="article" width="260" />
    <CdsSkeletonLoader type="card" width="260" />
    <CdsSkeletonLoader type="list-item-avatar-three-line" width="260" />
    <CdsSkeletonLoader type="table" width="360" />
  </div>
</template>

Своя структура

Тип можно описать строкой: перечисление через запятую собирает косточки подряд, @N повторяет косточку N раз. Массив строк работает так же, как перечисление через запятую.

Sandbox Storybook

<script setup lang="ts">
import { CdsSkeletonLoader } from '@central-design-system/components';
</script>

<template>
  <div class="flex flex-wrap items-start justify-center gap-4">
    <CdsSkeletonLoader type="heading, text@3, actions" width="260" />
    <CdsSkeletonLoader :type="['avatar', 'sentences', 'divider', 'button']" width="260" />
  </div>
</template>

Каталог типов

Все встроенные типы и их структуры. Любой из них можно вставить в свою строку как косточку — heading, table-row@3.

Storybook

<script setup lang="ts">
import { CdsSkeletonLoader } from '@central-design-system/components';

import { allowedTypes } from '../../api/CdsSkeletonLoader.types';

const types = allowedTypes;
</script>

<template>
  <div class="flex flex-col gap-4 max-w-[420px] m-auto">
    <div v-for="(structure, type) in types" :key="type" class="flex flex-col gap-1">
      <div class="text-sm">
        <strong>{{ type }}</strong> — <code>{{ structure }}</code>
      </div>
      <CdsSkeletonLoader :type="type" boilerplate />
    </div>
  </div>
</template>

Размеры

Свойства width, height, min-width и max-width задают размеры контейнера — косточки растягиваются по нему. Задавайте скелету те же размеры, что и у будущего контента, чтобы вёрстка не прыгала при подстановке данных.

Sandbox Storybook

<script setup lang="ts">
import { CdsSkeletonLoader } from '@central-design-system/components';
</script>

<template>
  <div class="flex flex-wrap items-start justify-center gap-4">
    <CdsSkeletonLoader width="200" height="80" />
    <CdsSkeletonLoader type="article" width="200" />
    <CdsSkeletonLoader type="article" max-width="140" />
  </div>
</template>

Подмена контента

Положите контент в слот по умолчанию: пока loading истинно, на его месте виден скелет, после — сам контент, без обёртки. Свойство loading-text задаёт aria-label — скринридер объявит, что именно загружается.

Sandbox Storybook

<script setup lang="ts">
import {
  CdsButton,
  CdsCard,
  CdsCardActions,
  CdsCardItem,
  CdsCardText,
  CdsSkeletonLoader
} from '@central-design-system/components';
import { ref } from 'vue';

const isLoading = ref(true);
</script>

<template>
  <div class="flex flex-col items-center gap-3">
    <CdsButton variant="soft" color="brand" text="Переключить загрузку" @click="isLoading = !isLoading" />

    <CdsCard width="360">
      <CdsSkeletonLoader :loading="isLoading" type="heading, text@2, actions" height="180">
        <CdsCardItem title="Договор № 1024" subtitle="Поставка комплектующих" />
        <CdsCardText>Срок исполнения — 14 дней с момента подписания.</CdsCardText>
        <CdsCardActions align="end">
          <CdsButton variant="soft" color="neutral" text="Открыть" />
        </CdsCardActions>
      </CdsSkeletonLoader>
    </CdsCard>
  </div>
</template>

Без анимации

Свойство boilerplate выключает мерцание. Такой скелет — заготовка для макетов и статичных прототипов, на боевом экране он не показывает ожидание.

Sandbox Storybook

<script setup lang="ts">
import { CdsSkeletonLoader } from '@central-design-system/components';
</script>

<template>
  <div class="flex flex-wrap items-start justify-center gap-4">
    <CdsSkeletonLoader type="card-avatar, article, actions" width="260" />
    <CdsSkeletonLoader type="card-avatar, article, actions" width="260" boilerplate />
  </div>
</template>

Рекомендации

Storybook

Сценарии использования

Список участников

Пока список грузится, type="list-item-avatar-two-line@3" держит место под три записи: аватар и две строки текста в каждой. Слот отдаёт готовый список, как только данные пришли, поэтому в шаблоне не нужен v-if.

Sandbox Storybook

<script setup lang="ts">
import { CdsAvatar, CdsButton, CdsSkeletonLoader } from '@central-design-system/components';
import { ref } from 'vue';

const isLoading = ref(true);

const members = [
  { id: 1, initials: 'АС', name: 'Анна Соколова', role: 'Менеджер по закупкам' },
  { id: 2, initials: 'ПК', name: 'Пётр Ковалёв', role: 'Юрист' },
  { id: 3, initials: 'МЛ', name: 'Мария Лебедева', role: 'Бухгалтер' }
];

function load() {
  isLoading.value = true;
  setTimeout(() => (isLoading.value = false), 1500);
}

load();
</script>

<template>
  <div class="flex flex-col gap-3 w-[320px] m-auto">
    <CdsButton variant="soft" color="brand" text="Загрузить заново" :disabled="isLoading" @click="load" />

    <CdsSkeletonLoader :loading="isLoading" type="list-item-avatar-two-line@3" loading-text="Загружаем участников">
      <div class="flex flex-col gap-3">
        <div v-for="member in members" :key="member.id" class="flex items-center gap-2">
          <CdsAvatar :content="member.initials" />
          <div class="flex flex-col">
            <span class="font-medium">{{ member.name }}</span>
            <span class="text-sm opacity-70">{{ member.role }}</span>
          </div>
        </div>
      </div>
    </CdsSkeletonLoader>
  </div>
</template>

Таблица договоров

Скелет из table-heading, table-row@3 повторяет шапку и строки таблицы, а loading-text объясняет ожидание озвучке. Число строк совпадает с размером страницы данных — после загрузки высота блока не меняется.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsSkeletonLoader } from '@central-design-system/components';
import { ref } from 'vue';

const isLoading = ref(true);

const rows = [
  { id: 1, number: '1024', customer: 'ООО «Ромашка»', sum: '120 000 ₽' },
  { id: 2, number: '1025', customer: 'АО «Вектор»', sum: '86 400 ₽' },
  { id: 3, number: '1026', customer: 'ИП Смирнов', sum: '15 900 ₽' }
];

function load() {
  isLoading.value = true;
  setTimeout(() => (isLoading.value = false), 1500);
}

load();
</script>

<template>
  <div class="flex flex-col gap-3 w-[420px] m-auto">
    <CdsButton variant="soft" color="brand" text="Обновить данные" :disabled="isLoading" @click="load" />

    <CdsSkeletonLoader :loading="isLoading" type="table-heading, table-row@3" loading-text="Загружаем договоры">
      <table class="w-full text-left">
        <thead>
          <tr class="text-sm opacity-70">
            <th class="py-1 font-medium">Номер</th>
            <th class="py-1 font-medium">Заказчик</th>
            <th class="py-1 font-medium">Сумма</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="row in rows" :key="row.id">
            <td class="py-1">{{ row.number }}</td>
            <td class="py-1">{{ row.customer }}</td>
            <td class="py-1">{{ row.sum }}</td>
          </tr>
        </tbody>
      </table>
    </CdsSkeletonLoader>
  </div>
</template>

Каркас страницы

На первой загрузке страницы блоки грузятся независимо, поэтому у каждого свой скелет: список разделов — list-item@4, содержимое — heading, paragraph, paragraph. Готовый блок появляется сразу, не дожидаясь соседа.

Sandbox Storybook

<script setup lang="ts">
import { CdsButton, CdsLink, CdsSkeletonLoader } from '@central-design-system/components';
import { ref } from 'vue';

const isLoading = ref(true);

const sections = ['Общие сведения', 'Документы', 'Участники', 'История'];

function load() {
  isLoading.value = true;
  setTimeout(() => (isLoading.value = false), 1500);
}

load();
</script>

<template>
  <div class="flex flex-col gap-4 w-[460px] m-auto">
    <CdsButton variant="soft" color="brand" text="Открыть страницу заново" :disabled="isLoading" @click="load" />

    <div class="grid grid-cols-[150px_1fr] gap-4">
      <CdsSkeletonLoader :loading="isLoading" type="list-item@4" loading-text="Загружаем разделы">
        <nav class="flex flex-col gap-2">
          <CdsLink v-for="section in sections" :key="section" href="#" :text="section" />
        </nav>
      </CdsSkeletonLoader>

      <CdsSkeletonLoader :loading="isLoading" type="heading, paragraph, paragraph" loading-text="Загружаем описание">
        <article class="flex flex-col gap-2">
          <h3 class="font-medium">Закупка комплектующих</h3>
          <p class="text-sm">
            Заказчик принимает заявки до 20 числа. Победитель определяется по совокупности цены и срока поставки.
          </p>
          <p class="text-sm">Документы можно подать в электронном виде — подписанные квалифицированной подписью.</p>
        </article>
      </CdsSkeletonLoader>
    </div>
  </div>
</template>

API

Пропсы

Имя	Тип	По умолчанию	Описание
boilerplate	boolean | undefined	false	Режим заготовки: отключает анимацию мерцания (для прототипирования).
height	string | number | undefined	—	Высота компонента
loading	boolean | undefined	false	Показывать скелет вместо контента слота во время загрузки.
loadingText	string | undefined	—	Текст для aria-label во время загрузки.
maxHeight	string | number | undefined	—	Максимальная высота компонента
maxWidth	string | number | undefined	—	Максимальная ширина компонента
minHeight	string | number | undefined	—	Минимальная высота компонента
minWidth	string | number | undefined	—	Минимальная ширина компонента
theme	string | undefined	—	Тема компонента
type	(string & {}) | "text" | "block" | "article" | "button" | "table" | "divider" | "subtitle" | "chip" | "avatar" | "actions" | "heading" | "sentences" | "paragraph" | "card" | "card-avatar" | "date-picker" | "date-picker-options" | "date-picker-days" | "list-item" | "list-item-avatar" | "list-item-two-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-avatar-three-line" | "table-heading" | "table-thead" | "table-tbody" | "table-row-divider" | "table-row" | "table-tfoot" | readonly ((string & {}) | "text" | "block" | "article" | "button" | "table" | "divider" | "subtitle" | "chip" | "avatar" | "actions" | "heading" | "sentences" | "paragraph" | "card" | "card-avatar" | "date-picker" | "date-picker-options" | "date-picker-days" | "list-item" | "list-item-avatar" | "list-item-two-line" | "list-item-avatar-two-line" | "list-item-three-line" | "list-item-avatar-three-line" | "table-heading" | "table-thead" | "table-tbody" | "table-row-divider" | "table-row" | "table-tfoot")[] | undefined	'block'	Тип скелета: предопределённый пресет либо произвольная строка (или массив строк) структуры.
width	string | number | undefined	—	Ширина компонента

Слоты

Имя	Тип	Описание
default	any	Контент, отображаемый вместо скелета после завершения загрузки.