como puedo hacer que aparezca un loader, mientras se están cargando los datos en la pagina, lo he intentado pero me aparece los datos y el loader a la vez, entonces no entiendo como puedo hacerlo en la petición.
Este es el componente roles, que carga dos tablas con los tipos de roles, una es administradores y la otra tabla es el tipo de rol usuario, pero antes de cargar esas dos tablas quiero que aparezca el spinner, mientras se carga, una vez cargado los datos que aparezcan las dos tablas y desaparezca el spinner.
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import React from 'react';
import { useEffect, useState } from "react";
import axios from 'axios';
import Card from 'react-bootstrap/Card';
import { Link } from 'react-router-dom';
import * as ReactBootStrap from 'react-bootstrap';
const baseURL = "http://localhost/repositorio/Clinica-Veterinaria/backend/crud/api/leerRoles.php";
const AllRoles = () => {
const [loading, setLoading] = useState(true);
const [roles, setRol] = useState([]);
///FORMA CON FETCH
useEffect(() => {
axios
.get(`${baseURL}`)
.then((response) => {
setRol(response.data);
})
.catch(err => { console.log(err.message) });
}, []);
console.log(roles);
const renderCard = (card, index) => {
return <>
<Card className=" col-1 col-md-4 mx-auto" key={index}>
<Card.Header className='text-center bg-primary text-white'>
<h3>Tipo de rol</h3>
</Card.Header>
<Card.Body className='text-center'>
<Link to={card.rol} className="text-capitalize text-decoration-none fs-2 text-dark">{card.rol}</Link>
</Card.Body>
</Card>
</>
}
return <div className='app row row-cols-12 gap-5 justify-content-md-center'>
<ReactBootStrap.Spinner animation="border"/>
{roles.length ? roles.map(renderCard) : "No se encontraron elementos para mostrar en el menu de roles"}
</div>
}
export default AllRoles;