SearchSkeleton для загрузки

SearchSkeleton — это компонент для отображения состояния загрузки интерфейса поиска, используемый, когда данные еще не получены или результаты поиска загружаются. Он является частью набора компонентов Carbon Design System и предназначен для улучшения пользовательского опыта, обеспечивая визуальную индикацию активности.

Импорт и подключение

Чтобы использовать SearchSkeleton в проекте на Svelte, необходимо импортировать его из пакета carbon-components-svelte:

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

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

SearchSkeleton поддерживает минимальный набор свойств, что делает его простым в использовании:

  • small (boolean) — отображение уменьшенной версии компонента. Полезно для компактных форм или мобильных интерфейсов.
  • class (string) — добавление собственных CSS-классов для кастомизации стилей.
  • style (string) — возможность инлайн-стилизации, если нужно изменить визуальные параметры без подключения отдельного CSS.

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

Варианты применения

  1. Показывать скелетон вместо поля поиска на этапе загрузки данных Обычно SearchSkeleton размещают на месте настоящего поля поиска до того момента, пока компонент Search не получит состояние готовности.
{#if loading}
  
{:else}
  
{/if}
  1. Скелетон в списке автозаполнения Если поисковая форма включает динамический список подсказок, скелетоны можно использовать для каждой строки списка до появления реальных данных.
{#each Array(3) as _}
  
{/each}

Стилизация и кастомизация

SearchSkeleton наследует базовые стили Carbon, что обеспечивает визуальное соответствие остальным компонентам интерфейса. Однако при необходимости можно:

  • Менять цвет скелетона через CSS-переменные Carbon (--cds-skeleton-color).
  • Добавлять анимацию мерцания для эффекта загрузки:
.my-custom-skeleton .bx--skeleton {
  animation: pulse 1.2s infinite;
}

@keyframes pulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}
  • Изменять размеры через классы или инлайн-стили для адаптации под конкретные макеты.

Важные особенности

  • Легковесность: компонент не зависит от данных, не вызывает повторных рендеров и минимально нагружает DOM.
  • Адаптивность: корректно отображается в различных ширинах контейнера.
  • Совместимость с Carbon: полностью интегрируется с системой сетки, типографикой и другими элементами дизайна.

Скелетон удобно комбинировать с реальными компонентами Search и SearchFilter. Например, в панели фильтров с асинхронной подгрузкой данных:



{#if loading}
  
{:else}
  
{/if}

После завершения загрузки loading меняется на false, и скелетон автоматически заменяется настоящим полем поиска без дополнительных усилий.

Рекомендации по использованию

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