Где и как правильно добавлять состояние загрузки (лоадер) при асинхронной валидации?

Концепция асинхронной валидации с лоадером

Асинхронная валидация выполняется, когда нужно проверить данные на сервере, например, уникальность имени пользователя. В это время пользователь должен видеть индикатор загрузки, чтобы понимать, что система работает. Лоадер обычно размещается рядом с полем ввода или внутри кнопки отправки.

Где добавлять состояние загрузки

• На уровне поля: флаг isLoading для каждого поля, которое требует асинхронной проверки.
• На уровне формы: общий флаг isSubmitting для всей формы, когда отправка данных требует валидации.

Как правильно реализовать

Используйте состояние компонента (например, useState в React) для хранения флага загрузки. Установите его в true перед вызовом асинхронной функции и в false после получения ответа. Отобразите спиннер или текст "Проверка..." рядом с полем. Пример на React:

const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);

const validateUsername = async (value) => {
  setIsLoading(true);
  setError(null);
  try {
    const response = await fetch('/api/check-username', { method: 'POST', body: JSON.stringify({ username: value }) });
    if (!response.ok) throw new Error('Username taken');
  } catch (err) {
    setError(err.message);
  } finally {
    setIsLoading(false);
  }
};

Вывод

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