¿Cuál es la forma correcta de agregar un control giratorio al obtener datos de la API en reaccionar js? Traté de mostrar la rueda giratoria hasta que data.length > 0 funciona bien cuando los datos son más que cero. Pero cuando en realidad es cero, la rueda de carga no se detiene. ¿Hay alguna buena solución para esto?
No proporcionó suficiente información o código para decir exactamente qué hacer, pero le daré un ejemplo simple
simplemente cree un estado para la carga, configúrelo como verdadero y cuando finalice la búsqueda, configúrelo como falso
Espero que este ejemplo sea claro.
import { useEffect,useState } from 'react' export default function Page() { const [data, setData] = useState(null) const [loading, setLoading] = useState(true) useEffect(() => { fetch('/api/test',{method: 'GET'}) .then(res => res.json()) .then(data => { console.log(data) setData(data) } ) .catch(err => { console.log(err) } ) .finally(() => { setLoading(false) }) }, []) if(loading) return <div>Loading...</div> // or your loading spinner return ( <div>{JSON.stringify(data)}</div> ) }