cómo crear una declaración de carga mientras se está recuperando
useEffect(() => { fetch('https://hidden-shore-3231.herokuapp.com/allCarsHomePage') .then(res => res.json()) .then(data => { setCards(data) }) }, [])Puede intentar crear la rueda giratoria de carga justo antes de buscarla y luego ocultarla/eliminarla después de que se resuelva la promesa.
Agregue un nuevo estado que sea booleano. Cuando se llame al punto final, actualice ese estado con true , y luego, cuando los datos se hayan enviado y analizado, vuelva a establecer el estado en false .
Mientras tanto, agregue un return separado que muestre la flecha giratoria si el estado de carga es verdadero.
const { useEffect, useState } = React; function mockAPI() { return new Promise(res => { const json = JSON.stringify({"text": "Done!"}); setTimeout(() => res(json), 3000); }); } function Example() { const [ text, setText ] = useState(''); const [ isLoading, setIsLoading ] = useState(false); useEffect(() => { function getData() { setIsLoading(true); mockAPI().then(json => { const data = JSON.parse(json); setText(data.text); setIsLoading(false); }); } getData(); }, []); if (isLoading) return 'Spinner'; return ( <div>{text}</div> ); } ReactDOM.render( <Example />, document.getElementById('react') ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>