Loading для полноэкранной загрузки

Компонент Loading в Carbon Components Svelte предназначен для отображения индикатора активности во время загрузки данных или выполнения асинхронных операций. Для полноэкранного применения он обеспечивает блокировку взаимодействия с интерфейсом и визуальную индикацию состояния загрузки.

Подключение и установка

Для использования компонента необходимо установить пакет carbon-components-svelte:

npm install carbon-components-svelte

Затем в Svelte-файле импортируется компонент Loading:

<script>
  import { Loading } from 'carbon-components-svelte';
  let isLoading = true;
</script>

Основная структура компонента

Компонент Loading поддерживает два режима отображения:

  1. Inline — для локальной загрузки внутри блока интерфейса.
  2. Full screen (fullscreen) — блокирует весь интерфейс и визуально центрирует индикатор на экране.

Для полноэкранного режима используется свойство fullscreen:

<Loading fullscreen bind:active={isLoading} description="Загрузка данных..." />

Ключевые свойства:

  • active — булево значение, определяющее, видим ли индикатор.
  • fullscreen — переключает режим на полноэкранный.
  • description — текст под индикатором.
  • withOverlay — добавляет затемнённый фон поверх интерфейса.
  • size — задаёт размер индикатора (small, medium, large).

Управление состоянием загрузки

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

<script>
  import { onMount } from 'svelte';
  import { Loading } from 'carbon-components-svelte';

  let isLoading = true;
  let data = [];

  onMount(async () => {
    try {
      const response = await fetch('https://api.example.com/items');
      data = await response.json();
    } catch (error) {
      console.error('Ошибка загрузки данных:', error);
    } finally {
      isLoading = false;
    }
  });
</script>

<Loading fullscreen bind:active={isLoading} description="Загрузка данных..." />

{#if !isLoading}
  <ul>
    {#each data as item}
      <li>{item.name}</li>
    {/each}
  </ul>
{/if}

Здесь bind:active связывает видимость компонента с переменной isLoading, что обеспечивает автоматическое отображение и скрытие индикатора.

Кастомизация индикатора

Размер и цвет

Свойство size позволяет выбрать визуальный масштаб:

<Loading fullscreen bind:active={isLoading} size="large" />

Цвет индикатора и overlay можно настраивать через CSS-переменные Carbon:

:global(.bx--loading__svg) {
  stroke: #0f62fe;
}

:global(.bx--loading-overlay) {
  background-color: rgba(0, 0, 0, 0.5);
}

Описание и локализация

Текст под индикатором передаётся через description. Для поддержки разных языков можно динамически обновлять значение:

<Loading fullscreen bind:active={isLoading} description={loadingText} />

<script>
  let loadingText = "Загрузка...";
</script>

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

Полноэкранный индикатор хорошо сочетается с Modal и DataTable. При открытии модального окна или загрузке таблицы можно автоматически активировать Loading:

<Modal bind:open={isModalOpen}>
  {#if isLoading}
    <Loading fullscreen description="Подготовка данных..." />
  {/if}
  <DataTable {data} />
</Modal>

Рекомендации по UX

  • Использовать fullscreen только для критичных процессов, которые блокируют всю работу с интерфейсом.
  • Для мелких запросов или локальных обновлений лучше применять inline-версию Loading.
  • Добавлять информативное описание (description), чтобы пользователь понимал причину ожидания.
  • При долгих операциях рекомендуется использовать overlay с частичной прозрачностью, чтобы визуально отделить рабочую область от интерфейса.

Пример расширенной реализации

Можно создать компонент-обёртку для централизованного управления состоянием загрузки:

<script>
  import { Loading } from 'carbon-components-svelte';
  export let loading = false;
  export let message = "Пожалуйста, подождите...";
</script>

<Loading fullscreen bind:active={loading} description={message} withOverlay />
<slot />

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

Хотите, я могу подготовить подробный разбор анимации и кастомных индикаторов загрузки с Carbon Svelte, чтобы сделать страницу более живой и отзывчивой?

Оглавление