InlineLoading для индикации загрузки

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

Основная структура InlineLoading

Компонент InlineLoading имеет три ключевых состояния:

  1. Inactive (неактивное) – компонент скрыт или ожидает запуска.
  2. Active (загрузка) – отображает индикатор процесса.
  3. Finished (завершено) – отображает успешное завершение операции с иконкой подтверждения или сообщение об успехе.

Простейший пример использования в Svelte выглядит так:

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

  let loadingState = 'inactive'; // inactive | active | finished
  let statusText = 'Сохранение...';

  function startLoading() {
    loadingState = 'active';
    setTimeout(() => {
      loadingState = 'finished';
      statusText = 'Сохранено';
    }, 2000);
  }
</script>

<button on:click={startLoading}>Сохранить</button>
<InlineLoading {loadingState} {statusText} />

Пояснения:

  • loadingState управляет состоянием компонента.
  • statusText отображает текст текущей операции.
  • Использование setTimeout имитирует асинхронный процесс, который можно заменить вызовом API.

Управление состояниями

Компонент реагирует на изменение свойства loadingState:

  • inactive — скрыт или отображает только текст без индикатора.
  • active — появляется анимированный спиннер с текстом операции.
  • finished — заменяет спиннер на иконку подтверждения и меняет текст на успешное завершение.

Можно динамически менять текст в зависимости от состояния:

<InlineLoading
  loadingState={loadingState}
  statusText={loadingState === 'active' ? 'Обработка...' : 'Готово!'}
/>

Настройка отображения

InlineLoading поддерживает следующие свойства:

  • size — размер индикатора (sm, md, lg).
  • successDelay — задержка перед переходом из состояния finished в inactive (мс).
  • description — дополнительный текст под основной строкой статуса.

Пример:

<InlineLoading
  loadingState={loadingState}
  statusText="Загрузка данных..."
  description="Пожалуйста, подождите"
  size="md"
  successDelay={1500}
/>

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

События InlineLoading

Компонент поддерживает события для интеграции с логикой приложения:

  • on:stateChange — вызывается при изменении состояния.

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

<InlineLoading
  bind:loadingState
  statusText="Сохраняем..."
  on:stateChange={(e) => console.log('Новое состояние:', e.detail)}
/>

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

Интеграция с асинхронными операциями

InlineLoading идеально подходит для работы с асинхронными функциями:

<script>
  async function saveData() {
    loadingState = 'active';
    try {
      await fetch('/api/save', { method: 'POST', body: JSON.stringify({ data: 123 }) });
      loadingState = 'finished';
    } catch (error) {
      loadingState = 'inactive';
      console.error('Ошибка сохранения:', error);
    }
  }
</script>

<button on:click={saveData}>Сохранить данные</button>
<InlineLoading {loadingState} statusText="Сохраняем..." />

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

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

Carbon Components Svelte использует CSS-переменные и классы для изменения внешнего вида:

  • .bx--inline-loading__animation — кастомизация спиннера.
  • .bx--inline-loading__text — стили текста статуса.

Можно переопределять цвета и размеры через глобальные CSS-переменные:

:root {
  --inline-loading-color: #0f62fe;
  --inline-loading-success-color: #24a148;
}

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

Комбинирование с другими компонентами

InlineLoading часто используют совместно с Button, TextInput и Form:

<TextInput labelText="Имя пользователя" bind:value={username} />
<Button on:click={submitForm}>Отправить</Button>
<InlineLoading {loadingState} statusText="Отправка..." />

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

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

  • Использовать InlineLoading для кратковременных действий, где результат должен быть виден в месте действия.
  • Не применять для длительных загрузок — лучше глобальные спиннеры или прогресс-бары.
  • Обязательно управлять состоянием через реактивные переменные или асинхронные функции для точного отображения прогресса.
  • Настраивать successDelay для удобного визуального отклика после завершения операции.

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

Оглавление