Tag Skeleton для загрузки

Tag Skeleton — это компонент библиотеки Carbon Components Svelte, предназначенный для отображения визуального заглушечного состояния тегов (tags) в интерфейсе, когда данные еще не загружены. Он позволяет поддерживать единый визуальный стиль и предотвращает “скачки” элементов при асинхронной подгрузке контента.

Основные свойства Tag Skeleton

  1. class Позволяет добавлять дополнительные CSS-классы для кастомизации внешнего вида. Обычно используется для настройки размеров, отступов или интеграции с сеткой интерфейса.

  2. style Прямое inline-стилирование. Может использоваться для временного изменения цвета, ширины или других визуальных параметров скелетона без создания отдельного CSS-класса.

  3. size (опционально) Задает размер компонента. Стандартные размеры:

    • sm — маленький тег, обычно используется в компактных списках;
    • md — средний тег, стандартный размер;
    • lg — крупный тег, для особо выделенных элементов интерфейса.

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

Интеграция в список тегов

Когда необходимо отображать несколько тегов в виде скелетонов, рекомендуется использовать цикл each в Svelte. Это позволяет элегантно создавать набор скелетонов:

{#each Array(5) as _, index}
  
{/each}

В этом примере создается пять скелетонов тегов, имитирующих загрузку данных.

Стилизация и анимация

Компонент Tag Skeleton наследует стиль базового тега библиотеки Carbon. Основной визуальный элемент — серый прямоугольник с плавным градиентом для имитации эффекта “loading shimmer”. Для более сложной анимации можно использовать CSS-псевдоклассы или подключать @keyframes:

.skeleton-shimmer {
  background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

После чего класс можно применить к скелетону:

Управление видимостью

Часто Tag Skeleton используют совместно с условной отрисовкой на основе состояния загрузки:

{#if loading}
  
{:else}
  {#each tags as tag}
    {tag}
  {/each}
{/if}
  • loading — булева переменная, определяющая, отображать ли скелетоны или готовые теги.
  • Такой подход обеспечивает плавный переход от состояния загрузки к отображению данных без визуальных сдвигов.

Лучшие практики

  • Использовать скелетоны только для динамически загружаемых данных. Для статических элементов это не имеет смысла.
  • Количество скелетонов должно соответствовать ожидаемому количеству данных, чтобы интерфейс выглядел естественно.
  • Комбинировать Tag Skeleton с состоянием загрузки на уровне списка, а не на уровне каждого элемента отдельно, чтобы избежать чрезмерного количества ререндеров.
  • Сохранять единый стиль с остальными скелетонами Carbon, используя базовые классы и утилиты CSS библиотеки.

Совместимость и ограничения

  • Поддерживаются последние версии Svelte (>=3.38) и Carbon Components Svelte.
  • Tag Skeleton не имеет интерактивных событий, так как предназначен исключительно для визуальной индикации загрузки.
  • Размер и цвет ограничены только базовыми CSS-переменными Carbon (--cds-ui-01, --cds-ui-02), но могут быть изменены через кастомные классы.

Практический пример с сеткой

Для более сложного интерфейса можно комбинировать Tag Skeleton с сеткой Carbon:


  

    {#each Array(3) as _, i}
      

        
      

    {/each}

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

Оглавление