Состояния loading и disabled

В Chakra UI компоненты часто поддерживают встроенные пропсы для управления состояниями взаимодействия пользователя, такими как loading и disabled. Эти состояния позволяют легко контролировать визуальные и функциональные эффекты без написания дополнительной логики вручную.

Проп `isLoading`

Проп isLoading используется для отображения состояния загрузки. Он часто применяется на кнопках, индикаторах и других интерактивных элементах. При установке isLoading={true} компонент автоматически показывает индикатор загрузки и блокирует пользовательское взаимодействие с элементом.

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

import { Button } from '@chakra-ui/react';
import { useState } from 'react';

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

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

  return (
    <Button colorScheme="blue" isLoading={loading} onCl ick={handleClick}>
      Отправить
    </Button>
  );
}

Ключевые моменты:

Кнопка блокируется автоматически при isLoading.
Текст кнопки можно менять с помощью loadingText:

<Button
  colorScheme="green"
  isLoading={loading}
  loadingText="Сохраняем..."
>
  Сохранить
</Button>

spinnerPlacement задаёт позицию индикатора загрузки относительно текста (start или end).

Проп `isDisabled`

Проп isDisabled полностью блокирует компонент для взаимодействия, сохраняя его визуально активным, но делая недоступным для кликов или ввода.

Пример на форме:

import { Input, Button, Stack } from '@chakra-ui/react';

function DisabledFormExample() {
  return (
    <Stack spacing={3}>
      <Input placeholder="Имя" isDisabled />
      <Input placeholder="Email" isDisabled />
      <Button colorScheme="teal" isDisabled>
        Отправить
      </Button>
    </Stack>
  );
}

Особенности:

Компоненты не реагируют на события onClick или onChange.
Можно комбинировать с isLoading для более сложной логики:

<Button colorScheme="purple" isLoading={loading} isDisabled={formInvalid}>
  Отправить
</Button>

Комбинирование `isLoading` и `isDisabled`

Chakra UI автоматически предотвращает конфликт этих состояний: когда isLoading={true}, кнопка ведёт себя как isDisabled, блокируя взаимодействие. Однако isDisabled можно использовать отдельно для случаев, когда элемент должен быть недоступен, но не показывать индикатор загрузки.

Пример логики на основе формы:

function FormWithLoading() {
  const [loading, setLoading] = useState(false);
  const [input, setInput] = useState('');

  const handleSubmit = () => {
    setLoading(true);
    setTimeout(() => setLoading(false), 1500);
  };

  return (
    <Stack spacing={3}>
      <Input
        placeholder="Введите текст"
        value={input}
        onCha nge={(e) => setInput(e.target.value)}
      />
      <Button
        colorScheme="orange"
        isLoading={loading}
        isDisabled={!input}
        onCl ick={handleSubmit}
      >
        Отправить
      </Button>
    </Stack>
  );
}

В этом примере кнопка становится недоступной (isDisabled) пока поле пустое, а при отправке показывается индикатор загрузки (isLoading).

Визуальные настройки состояния загрузки

spinner: можно заменить стандартный индикатор на кастомный компонент Spinner:

<Button
  isLoading={loading}
  spinner={<Spinner size="sm" color="red.500" />}
>
  Загружается
</Button>

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

Поддержка других компонентов

Помимо кнопок, многие компоненты Chakra UI поддерживают isDisabled:

Input, Textarea, Select – блокируют ввод.
Switch, Checkbox, Radio – блокируют переключение.
MenuItem – недоступен для клика.

Для isLoading чаще всего применимо к интерактивным кнопкам и компонентам, где необходимо показать прогресс выполнения действия.

Динамическое управление состояниями

Состояния loading и disabled удобно управлять через React state или форму управления состоянием:

function DynamicStates() {
  const [loading, setLoading] = useState(false);
  const [enabled, setEnabled] = useState(true);

  return (
    <Stack spacing={3}>
      <Button
        isLoading={loading}
        isDisabled={!enabled}
        onCl ick={() => {
          setLoading(true);
          setTimeout(() => setLoading(false), 2000);
        }}
      >
        Кнопка
      </Button>
      <Button onCl ick={() => setEnabled((prev) => !prev)}>
        {enabled ? 'Выключить кнопку' : 'Включить кнопку'}
      </Button>
    </Stack>
  );
}

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