¿Cómo puedo mostrar una animación de carga mientras se carga ajax? hasta ahora pude hacer una animación usando el paquete web de carga de reacción y ahora quiero que se muestre cuando se está cargando ajax, ¿es posible?
class PersonList extends React.Component { state = { persons: [] } componentDidMount() { axios.get(`https://jsonplaceholder.typicode.com/users`) .then(res => { const persons = res.data; this.setState({ persons }); }) } render() { return ( <tbody style={{"background":"#c3e6cb"}}> { this.state.persons .map(person => <tr key={person.id}> <td>{person.name}</td> </tr> ) } </tbody> ) } } function Preloader(){ const [data, setData] = useState([]); const [done, setDone] = useState(undefined); useEffect(() => { setTimeout(() => { fetch('https://jsonplaceholder.typicode.com/todos/1') .then(response => response.json()) .then(json => { setData(json); setDone(true); }); }, 1000); })Primero establecido en su estado cuando se está cargando
componentDidMount() { this.setState({isLoading: true}); axios.get(`https://jsonplaceholder.typicode.com/users`) .then(res => { const persons = res.data; this.setState({ persons }); }) .finally(() => { this.setState({isLoading: true}); }) }Luego, en su función de renderizado, tenga eso en cuenta.
render() { return ( <> {this.state.isLoading ? <div>**Some loading animation**</div> : <tbody style={{"background":"#c3e6cb"}}> { this.state.persons .map(person => <tr key={person.id}> <td>{person.name}</td> </tr> ) } </tbody> } </> ) }