Skeleton

Skeleton — один декоративный плейсхолдер формы text, block или circle. Он не решает, загружается ли область, не хранит количество и не оборачивает готовое содержимое.

Статус: experimental · в системе с 2026-07 · интерактивность: none (нет)

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

Структура области уже известна, а её содержимое ещё не готово.
Нужно сохранить геометрию карточки, списка или аватара до замены данными.

Не использовать:

Время ожидания короткое и раскладка не меняется — плейсхолдер создаст лишний шум.
Нужно показать измеримый ход операции — используй Progress.
Нужно объяснить пустой результат — это empty-состояние области, не Skeleton.

Формы

Три закрытые роли соответствуют строке, области и круглому объекту.

<!--
  🟢

  Пример форм сравнивает text, block и circle без дополнительных режимов.
  Каждый экземпляр остаётся одним декоративным плейсхолдером.
-->

<script>
import Skeleton from "$lib/ui/Skeleton.svelte";
</script>

<div style="display: grid; gap: var(--sp-2);">
	<Skeleton shape="text" />
	<Skeleton shape="block" />
	<Skeleton shape="circle" />
</div>

Строки

Количество плейсхолдеров задаёт композиция списка.

<!--
  🟢

  Пример строк показывает, что количество задаётся композицией демо. Сам
  Skeleton не получает count и не управляет списком.
-->

<script>
import Skeleton from "$lib/ui/Skeleton.svelte";
</script>

<div style="display: grid; gap: var(--sp-1);">
	<Skeleton shape="text" />
	<Skeleton shape="text" />
	<Skeleton shape="text" />
</div>

Карточка

Несколько одиночных Skeleton повторяют будущую структуру.

<!--
  🟢

  Пример карточки собирает круг, строки и блок отдельными Skeleton. Их порядок
  повторяет будущую структуру, не превращая компонент в renderer содержимого.
-->

<script>
import Skeleton from "$lib/ui/Skeleton.svelte";
</script>

<div style="display: grid; gap: var(--sp-2);">
	<Skeleton shape="circle" />
	<Skeleton shape="text" />
	<Skeleton shape="text" />
	<Skeleton shape="block" />
</div>