ButtonSkeleton для состояния загрузки

ButtonSkeleton — это компонент, предназначенный для визуализации загрузки кнопки, когда данные ещё не готовы к отображению. Он позволяет поддерживать консистентный интерфейс и улучшает восприятие пользователем состояния ожидания без резких скачков контента. В библиотеке Carbon Components Svelte этот компонент является частью системы скелетон-компонентов, которые имитируют будущий контент.

Основное использование

Компонент ButtonSkeleton импортируется из пакета carbon-components-svelte:

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

После импорта его можно использовать как отдельный элемент в любом контейнере интерфейса:

<ButtonSkeleton />

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

Настройка размеров

Компонент поддерживает разные размеры кнопки через проп size:

<ButtonSkeleton size="sm" />
<ButtonSkeleton size="md" />
<ButtonSkeleton size="lg" />
  • sm — маленькая кнопка, используется в компактных интерфейсах или в строках форм.
  • md — стандартная средняя кнопка, чаще всего применяемая в основных действиях.
  • lg — большая кнопка, привлекающая внимание или используемая для ключевых действий на странице.

Использование с различными стилями кнопок

ButtonSkeleton может имитировать разные стили кнопок Carbon:

  • Primary — основной акцентный стиль кнопки.
  • Secondary — менее акцентная кнопка.
  • Danger — кнопка для опасных действий.

Применение стиля осуществляется через проп kind:

<ButtonSkeleton kind="primary" />
<ButtonSkeleton kind="secondary" />
<ButtonSkeleton kind="danger" />

Эти значения соответствуют визуальной теме Carbon, обеспечивая единообразие интерфейса даже в состоянии загрузки.

Контроль состояния и доступности

ButtonSkeleton не требует ручного контроля состояния загрузки, так как предназначен только для отображения скелетона. Однако важно учитывать доступность:

  • Использовать скрытые текстовые элементы для скринридеров.
  • Не назначать обработчики событий on:click, так как кнопка временно неактивна.
  • Обеспечить согласованное расстояние с другими элементами интерфейса, чтобы предотвратить смещение контента после загрузки данных.

Анимация и кастомизация

По умолчанию ButtonSkeleton использует CSS-анимацию пульсации. Можно изменить скорость или стили, добавив собственные классы:

<ButtonSkeleton class="custom-skeleton" />

<style>
  .custom-skeleton {
    animation-duration: 1.5s;
    border-radius: 8px;
  }
</style>
  • animation-duration позволяет управлять скоростью пульсации.
  • border-radius позволяет подстроить визуальный стиль под кастомные кнопки.

Композиция с другими скелетонами

ButtonSkeleton хорошо сочетается с TextSkeleton, CheckboxSkeleton, SelectSkeleton для построения комплексных форм и интерфейсов в состоянии загрузки:

<TextSkeleton width="150px" />
<ButtonSkeleton />
<SelectSkeleton />

Такой подход позволяет создавать согласованные скелетон-структуры, минимизируя визуальные скачки при загрузке данных.

Примеры практического применения

  1. Форма авторизации: показывается ButtonSkeleton вместо кнопки “Войти”, пока загружается состояние формы.
  2. Списки действий: кнопки “Редактировать” или “Удалить” заменяются ButtonSkeleton до полной загрузки данных.
  3. Карточки продуктов: кнопки “Купить” или “Добавить в корзину” визуализируются с помощью скелетона, чтобы пользователь видел структуру интерфейса.

Советы по использованию

  • Размещать ButtonSkeleton только там, где ожидается интерактивная кнопка.
  • Поддерживать размеры и стили идентичными будущей кнопке, чтобы после загрузки интерфейс не смещался.
  • Совмещать с другими компонентами скелетонов для создания цельной визуальной иерархии страницы.
  • Не использовать для сложной логики, так как ButtonSkeleton предназначен исключительно для визуальной индикации загрузки.

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

Оглавление