Spin

Компонент Spin в библиотеке Ant Design служит для отображения состояния загрузки или ожидания данных. Он визуально сигнализирует пользователю, что процесс обработки данных ещё не завершён, предотвращая взаимодействие с интерфейсом до готовности контента. Spin реализуется как обёртка над другими элементами или как самостоятельный индикатор.

Импорт и базовое использование

Для начала необходимо импортировать компонент из библиотеки:

import { Spin } from 'antd';

Самый простой способ использования Spin — отображение спиннера без обёртки:

<Spin />

По умолчанию появляется вращающийся индикатор с классической анимацией. Если требуется текстовый индикатор состояния, используется проп tip:

<Spin tip="Загрузка..." />

Размеры и стилизация

Spin поддерживает три стандартных размера через проп size:

  • small — маленький спиннер
  • default — стандартный (по умолчанию)
  • large — крупный спиннер

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

<Spin size="small" />
<Spin size="default" />
<Spin size="large" />

Для изменения цвета или позиционирования можно использовать CSS через обёртку:

<div style={{ textAlign: 'center', padding: '50px' }}>
  <Spin tip="Загрузка..." />
</div>

Индикатор загрузки с обёрткой контента

Spin часто используется для отображения загрузки конкретного блока. Для этого компонент оборачивает содержимое. Проп spinning управляет видимостью спиннера:

<Spin spinning={loading}>
  <div>
    <p>Контент, который будет загружен</p>
    <p>Дополнительная информация</p>
  </div>
</Spin>

При spinning={true} поверх содержимого отображается спиннер, а сам контент затемняется, предотвращая действия пользователя. При spinning={false} спиннер скрывается.

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

Spin позволяет заменять стандартный индикатор на кастомный через проп indicator. Это особенно полезно для соблюдения фирменного стиля приложения:

import { LoadingOutlined } from '@ant-design/icons';

const customIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;

<Spin indicator={customIcon} />

Можно изменять размер, цвет и скорость анимации иконки. При этом Spin продолжает управлять состоянием видимости.

Встроенные свойства

Основные свойства компонента:

  • spinning (boolean) — управляет видимостью спиннера.
  • size (small | default | large) — задаёт размер.
  • tip (string | ReactNode) — текст или элемент для отображения под спиннером.
  • delay (number) — задержка перед отображением спиннера, мс. Полезно для предотвращения мелькания при коротких загрузках.
  • indicator (ReactNode) — кастомный элемент индикатора.

Пример с задержкой:

<Spin spinning={loading} delay={500} tip="Загрузка данных..." />

Задержка в 500 мс предотвращает кратковременное появление спиннера при очень быстрой загрузке.

Комбинация с другими компонентами Ant Design

Spin отлично интегрируется с компонентами Card, Table, List, позволяя показывать загрузку конкретного блока данных без блокировки всего интерфейса:

<Spin spinning={loading} tip="Загрузка таблицы">
  <Table dataSource={data} columns={columns} />
</Spin>

Также возможно комбинировать с Modal, чтобы отображать состояние ожидания при асинхронных действиях:

<Modal visible={isModalVisible}>
  <Spin spinning={modalLoading}>
    <p>Содержимое модального окна</p>
  </Spin>
</Modal>

Лёгкий контроль через состояние

Обычно для управления спиннером используют состояние React:

import React, { useState, useEffect } from 'react';
import { Spin, Button } from 'antd';

function Demo() {
  const [loading, setLoading] = useState(false);

  const fetchData = () => {
    setLoading(true);
    setTimeout(() => setLoading(false), 2000);
  };

  return (
    <div>
      <Button onCl ick={fetchData}>Загрузить данные</Button>
      <Spin spinning={loading} tip="Загрузка...">
        <div>Данные появятся здесь</div>
      </Spin>
    </div>
  );
}

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

Адаптивность и UX

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

Spin является базовым инструментом для работы с асинхронными процессами в Ant Design, обеспечивая прозрачное и гибкое отображение состояний загрузки в интерфейсе. Его простота интеграции и расширяемость делают его ключевым элементом при построении отзывчивых React-приложений с Ant Design.

Оглавление