g sign loading numers

src/Components/Card.js

@@ -1,6 +1,18 @@
 import { Link } from 'react-router-dom'
+import { CircularProgress, } from '@mui/material'
+import { useEffect, useState } from 'react'
 
 export function Card( props ){
+
+    let [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        setTimeout(() =>{
+            setLoading(false)
+        },3000)
+    },[loading])
+
+
     return(
         <div className="panel" >
             <Link to={props.to}>
@@ -12,7 +24,13 @@ export function Card( props ){
                         <props.icon style={{ color :'#fd4b4b', fontSize : 45, margin : 5}}/>
                     </div>
                     <div className="content_info">
-                        <p>{props.quantity}</p>
+                        {
+                        loading ?
+                            <p style={{ paddingTop : 10}}>
+                                <CircularProgress />
+                            </p>
+                            : <h3>{ props.quantity }</h3>
+                    }
                     </div>
                 </div>
             </Link>

src/Components/Home/Candidato.jsx

@@ -1,6 +1,6 @@
 import { Skeleton, Box } from '@mui/material';
 import React from 'react'
-const big_as = 40
+const big_as = 50
 
 export function Candidato (props) {
     let { password,puesto,DPI, aplicacion,pendientes } = props.user
@@ -30,7 +30,7 @@ export function Candidato (props) {
 
 export function Preview() {
     return(
-        <Box sx={{ width: '100%' }}>
+        <Box sx={{ width: '100%'}}>
             <Skeleton height={big_as} animation="wave" />
             <Skeleton height={big_as} animation="wave" />
             <Skeleton height={big_as} animation="wave" />

src/Components/Home/Candidatos.js

@@ -1,11 +1,7 @@
 import React, { useState, useEffect } from 'react';
-
 import UpdateIcon from '@mui/icons-material/Update';
 
-import {
-    Typography, Pagination, Stack, 
-    // CircularProgress, Box
-} from '@mui/material'
+import { Typography, Pagination, Stack, } from '@mui/material'
 
 import { Row, Col } from 'react-bootstrap';
 
@@ -93,7 +89,7 @@ export default function Candidatos () {
                 {
                     users.length 
                     ? users[page - 1].map( user => (<Candidato key={user.DPI} user={user}/>)) 
-                    : <Preview lenght={10}/>
+                    : <Preview style={{ paddingTop:10}} lenght={10}/>
                 }
                 <Row style={{ padding : 5 }}>
                     <Col>