preview and store token

src/Components/Home/Candidato.jsx

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

src/Components/Home/Candidatos.js

@@ -3,18 +3,19 @@ import React, { useState, useEffect } from 'react';
 import UpdateIcon from '@mui/icons-material/Update';
 
 import {
-    Typography, Pagination, Stack, CircularProgress, Box
+    Typography, Pagination, Stack, 
+    // CircularProgress, Box
 } from '@mui/material'
 
 import { Row, Col } from 'react-bootstrap';
 
-import { Candidato } from './Candidato'
+import { Candidato, Preview } from './Candidato'
 // const USER_LENGTH = 14
-const USER_LENGTH = 99
+const USER_LENGTH = 120
 
 
 function Divide(arregloOriginal){
-    const LONGITUD_PEDAZOS = 10;
+    const LONGITUD_PEDAZOS = 6;
     let arregloDeArreglos = [];
     for (let i = 0; i < arregloOriginal.length; i += LONGITUD_PEDAZOS) {
         let pedazo = arregloOriginal.slice(i, i + LONGITUD_PEDAZOS);
@@ -39,8 +40,6 @@ export default function Candidatos () {
     useEffect(() => {
 
         setTimeout(() => {
-
-
             let list =  [{
                 password : 'tester',
                 puesto : "Piloto Repartidor",
@@ -93,14 +92,9 @@ export default function Candidatos () {
                     </Row>
                 </div>
                 {
-                    users.length ?
-                    users[page - 1].map( user => (<Candidato key={user.DPI} user={user}/>)) 
-                    : 
-                        <center>
-                            <Box sx={{ display: 'flex', padding : '5%',  maginTop : 100,  }}> 
-                                <CircularProgress /> 
-                            </Box>
-                        </center>
+                    users.length 
+                    ? users[page - 1].map( user => (<Candidato key={user.DPI} user={user}/>)) 
+                    : <Preview lenght={10}/>
                 }
                 <Row style={{ padding : 5 }}>
                     <Col>

src/Pages/Login.jsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import toast, { Toaster } from 'react-hot-toast';
-import jwt_decode from "jwt-decode";
+// import jwt_decode from "jwt-decode";
 
 import { 
     Paper, Box, Grid, Checkbox, FormControlLabel, Typography,