Для создания прелоадера для формы в 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}). Это предотвращает повторную отправку формы во время загрузки и позволяет пользователю понять, что форма всё ещё загружается.