SkeletonText и SkeletonPlaceholder

SkeletonText и SkeletonPlaceholder представляют собой ключевые компоненты для создания эффектов «скелета» при загрузке данных в приложениях, построенных с использованием Svelte и библиотеки Carbon Components. Эти компоненты позволяют визуально обозначить места, где впоследствии будут отображены реальные элементы интерфейса, создавая плавный пользовательский опыт и предотвращая резкую перестройку страницы при подгрузке контента.

SkeletonText

SkeletonText используется для имитации текстового контента. Он обычно применяется в местах, где необходимо показать пользователю, что данные еще загружаются, но структура текста уже известна.

Основные свойства:

  • heading (boolean) — задает, будет ли скелет имитировать заголовок. При значении true элемент отображается шире и выше, подчеркивая визуально важный текст.
  • width (string | number) — ширина элемента. Можно задавать в пикселях (px) или в процентах (%), что позволяет подстраивать скелет под реальный контент.
  • paragraph (boolean) — указывает, будет ли отображаться несколько строк текста, имитируя абзац.
  • lines (number) — количество строк текста при использовании абзаца (paragraph).

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

<script>
  import { SkeletonText } from 'carbon-components-svelte';
</script>

<SkeletonText heading={true} width="60%" />
<SkeletonText paragraph={true} lines={3} />

В этом примере создается заголовок шириной 60% и абзац из трех строк, что позволяет визуально подготовить макет до загрузки данных.

Особенности работы:

  • Скелет автоматически адаптируется к размеру контейнера.
  • Можно комбинировать с другими skeleton-компонентами, создавая комплексные макеты страниц.
  • Для динамического контента можно управлять видимостью через условные блоки Svelte ({#if}), скрывая скелет после загрузки данных.

SkeletonPlaceholder

SkeletonPlaceholder служит для имитации произвольных блоков интерфейса, таких как изображения, карточки, кнопки или другие визуальные элементы. Он универсален и используется там, где текстовый скелет неприменим.

Основные свойства:

  • width и height (string | number) — размеры блока. Ширина и высота могут задаваться в пикселях или процентах.
  • circle (boolean) — формирует круглую область, полезно для аватаров и круглых иконок.
  • style (string) — позволяет добавлять дополнительные CSS-свойства для кастомизации внешнего вида.

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

<script>
  import { SkeletonPlaceholder } from 'carbon-components-svelte';
</script>

<SkeletonPlaceholder width="100px" height="100px" circle={true} />
<SkeletonPlaceholder width="300px" height="200px" />

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

Рекомендации по применению:

  • Использовать с динамическими списками и сетками карточек.
  • Комбинировать с SkeletonText, создавая полноценные «скелетные» интерфейсы, которые отражают структуру будущего контента.
  • Для сложных макетов можно применять CSS Grid или Flexbox совместно с SkeletonPlaceholder, чтобы сохранить визуальное соответствие реальному контенту.

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

<script>
  import { SkeletonText, SkeletonPlaceholder } from 'carbon-components-svelte';
</script>

<div class="card">
  <SkeletonPlaceholder width="100%" height="150px" />
  <div class="card-content">
    <SkeletonText heading={true} width="80%" />
    <SkeletonText paragraph={true} lines={2} />
  </div>
</div>

В данном примере создается карточка с изображением, заголовком и текстом, полностью имитируя структуру реального компонента. Такой подход позволяет пользователю видеть макет страницы сразу, даже если данные еще загружаются с сервера.

Стилизация и адаптивность:

  • Оба компонента поддерживают адаптивное поведение и наследуют CSS-свойства родительского контейнера.
  • Для изменения анимации «пульсации» можно использовать CSS-переменные, предоставляемые Carbon, такие как --cds-skeleton-animation-duration.
  • При желании можно создавать свои кастомные скелеты, комбинируя SkeletonText и SkeletonPlaceholder с дополнительными стилями.

Skeleton-компоненты Carbon Components Svelte значительно упрощают процесс создания плавного UX, обеспечивая визуальную предзагрузку данных и уменьшая «прыжки» элементов на странице. Их гибкость позволяет воспроизводить как текстовые, так и графические элементы интерфейса, делая пользовательский интерфейс более предсказуемым и профессиональным.

Оглавление