Tenho uma aplicação com o front em React e o back com Node, e precisava que no momento que o usuário pressionasse o botão, o loading aparecesse e depois a requisição fosse realizada, ou enquanto o loading ficasse carregando, fosse realizado a requisição. Fiz algumas tentativas mas não deu muito certo.
import spinnerImg from '../../assets/spinner.svg';
async function handleLogin(e){
e.preventDefault();
if(validation){
setValidationId('Invalido');
return;
}else{
setValidationId('');
try {
const response = await api.post('session', { id });
localStorage.setItem('ongId', id);
localStorage.setItem('ongName', response.data.name);
await timeOutSpinner();
history.push('/profile');
} catch (err) {
console.log(err);
alert('Falha no login');
}
}
}
function timeOutSpinner(){
setLoading(true);
setTimeout(() => {
setLoading(false);
}, 8000);
}
// Este trecho de codigo abaixo esta dentro do html, é com ele que eu chamo o loading.
{loading ? <img src={spinnerImg} alt="Loading" style={{ width: 250 }}></img> : false}