0

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;

Y este es el visual de como lo tengo yo ahora introducir la descripción de la imagen aquí

2
  • 1
    Estas inicializando el loader en true, por eso lo muestra. La idea es que sea false primero, y cuando haces la petición con axios manejas la visualización. Commented el 10 ene. 2023 a las 12:56
  • 1
    De hecho no está usando para nada loading y setLoading Commented el 10 ene. 2023 a las 17:13

1 respuesta 1

0

Puedes hacerlo utilizando el estado loading para controlar la visualización del spinner true para mostrarlo y false para ocultarlo, lo harías usando el callback en el then de la promesa del get.

useEffect(() => {
    setLoading(true);
    axios
        .get(`${baseURL}`)
        .then((response) => {
            setRol(response.data);
            setLoading(false);
        })
        .catch(err => { console.log(err.message) });
}, []);

Ya en el render si loading es true se mostrará el spinner, de lo contrario se mostrarán los datos de la tabla.

return <div className='app row row-cols-12 gap-5 justify-content-md-center'>
    {loading ? <ReactBootStrap.Spinner animation="border"/> : 
      roles.length ? roles.map(renderCard) : "No se encontraron elementos para mostrar en el menu de roles"
    }
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.