0

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}
1
  • Você pode criar um state chamado loading é assim que o método assíncrono seu é chamado para fazer a chamada da API, você muda o state do loading pra true antes de chamar o método com o await e depois do await você pode mudar o state de loading pra falar. Você só precisa tomar cuidado, pois podem ocorrer exceções durante a requisição, então trate o state loading nesses casos também. Commented 3/04/2020 às 3:00

1 Resposta 1

1

Seguindo o comentário feito pelo Vinicius: Você cria o estado de loading, e inicia ele com false. Imediatamente antes de fazer a chamada na API, você altera o estado para TRUE e, quando a requisição terminar, você volta a setar como false.

Você deve criar o estado no inicio do seu componente, algo assim:

const [loading, setLoading] = useState(false);

Lembre de importar o useState. Na sua função de handle, deve ficar algo assim (com o setLoading(true) antes da chamada à api:

import spinnerImg from '../../assets/spinner.svg';


async function handleLogin(e){
    e.preventDefault();

    if(validation){
        setValidationId('Invalido');
        return;
    }else{
        setValidationId('');

        try {
            setLoading(true);
            const response = await api.post('session', { id });
            localStorage.setItem('ongId', id);
            localStorage.setItem('ongName', response.data.name);

            setLoading(false);
            history.push('/profile');

        } catch (err) {
            console.log(err);
            alert('Falha no login');
        }
    }

}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .