Как сделать прелоадер для формы?

Для создания прелоадера для формы в React можно использовать различные подходы. Один из самых популярных способов - использование условных рендеров и состояния компонента.

В первую очередь, вам понадобится компонент формы, который будет иметь состояние isLoading, отображающее, загружается ли сейчас форма или нет. В начальном состоянии isLoading должно быть установлено в false.

import React, { useState } from "react";

const Form = () => {
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    setIsLoading(true);

    // Здесь происходит обработка данных из формы, например, отправка на сервер

    // После обработки данных, можно сбросить isLoading на false
    setIsLoading(false);
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* Ваша форма */}
      <button type="submit" disabled={isLoading}>
        Submit
      </button>
      {isLoading && <div>Загрузка...</div>}
    </form>
  );
};

export default Form;

В данном примере компонент Form содержит состояние isLoading, которое определяет, загружается ли форма или нет. При отправке формы мы устанавливаем isLoading в true, чтобы отобразить прелоадер. После обработки данных, isLoading снова устанавливается в false, что приводит к скрытию прелоадера.

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

Компонент также содержит кнопку Submit, которая является активной только при отсутствии загрузки (disabled={isLoading}). Это предотвращает повторную отправку формы во время загрузки и позволяет пользователю понять, что форма всё ещё загружается.