¿cómo puedo crear un círculo de carga, por ejemplo, cuando hago una petición XmlHtpp con Axios en mi vista con ReactJS?
Actualmente logro eso con la etiqueta <Get/>
de la dependencia react-axios
.
Ojo: react-axios no es axios. React Axios tiene COMPONENTES con etiquetas Get, Put, etc. Más información: react-axios - npm
Con el component <Get/>
logro algo que me gusta mucho y es que puedo poner un Progress Loading, fijense en lo siguiente:
render() {
return (
<div>
<Get url="/api/user" params={{id: "12345"}}>
{(error, response, isLoading, makeRequest, axios) => {
if(error) {
return (<div>Something bad happened: {error.message} <button onClick={() => makeRequest({ params: { reload: true } })}>Retry</button></div>)
}
else if(isLoading) {
return (<div>Loading...</div>)
}
else if(response !== null) {
return (<div>{response.data.message} <button onClick={() => makeRequest({ params: { refresh: true } })}>Refresh</button></div>)
}
return (<div>Default message before request is made.</div>)
}}
</Get>
</div>
)
}
En la condición if(isLoading)
perfectamente puedo colocar un componente de animación, por ejemplo, el <CircularProgress/>
de MaterialUI. Esto funciona muy bien... Pero la lógica que necesito no me permite usar la etiqueta para peticiones con react-axios <Get/>
.
Por esa razón, quisiera saber cómo o dónde poner un "Loading" durante una petición con Axios... Por ejemplo, si tuviera esto:
async function getUser() {
try {
const response = await axios.get('/user?ID=12345');
console.log(response);
} catch (error) {
console.error(error);
}
}
¿Dónde coloco mi <div>Loading...</div>
mientras espero la respuesta o dónde manipulo una variable booleana para activarlo en el render? Que la variable se mantenga en false mientras espero la respuesta y cambie a true cuando recibe respuesta y ahí detengo la vista de que está cargando...