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

Рейтинг: -1Ответов: 1Опубликовано: 09.01.2023

Здраствуйте. У меня есть форма, в которой при нажатии на button она долго отправляется, и после автоматически переносит пользователя на другой сайт. Как сделать так, чтобы появлялся прелоадер на 2 секунды например, и затем пользователь отправлялся на другой сайт. Пробовал найти сам, но везде сделано на ajax.

<form action="https://app.0xProcessing.com/Payment" method="post">
    <input type="hidden" name="test" value="false" />
    <input type="hidden" name="email" value="test@test.com" />
    <input type="hidden" name="name" value="name" />
    <input type="hidden" name="lastname" value="lastname" />
    <input type="hidden" name="amountusd" value="115" />
    <input type="hidden" name="currency" value="BTC" />
    <input type="hidden" name="ShopId" value="Asv0232SSd" />
    <input type="hidden" name="ClientId" value="1000" />
    <input type="hidden" name="BillingId" value="13304" />
    <button type="submit">Send</button>
</form>
reactjs
Источник: Stack Overflow на русском

Ответы

▲ 1

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

const [isPreloader, setIsPreloader] = useState(false);

const handler = (e) => {
e.preventDefault()
setIsPreloader(true)
}

return (
{ isPreloader
? <Preloader />
: 
<form onSubmit={handler}>
<input />
<form />
})

Код выше примерный, чтобы показать общую идею.