From a126ca9419d51022b2d73fd35e073bae4ee316b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= <leo@leomurca.xyz>
Date: Tue, 21 Jun 2022 15:56:36 -0300
Subject: [PATCH] Add skeleton loading

---
 src/screens/Home/index.js | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/screens/Home/index.js b/src/screens/Home/index.js
index 24bd98a..f74912e 100644
--- a/src/screens/Home/index.js
+++ b/src/screens/Home/index.js
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { CircularProgress, Grid, Stack } from '@mui/material';
+import { Grid, Skeleton, Stack } from '@mui/material';
 import { useUser } from '../../context/user';
 
 import ClassCard from '../../components/ClassCard';
@@ -22,7 +22,16 @@ function Home() {
         <h1>Turmas</h1>
         <Stack alignItems="center" flexWrap="wrap" direction="row" gap="30px">
           {classrooms === null ? (
-            <CircularProgress sx={{ margin: '0 auto' }} thickness={5} />
+            Array(6)
+              .fill()
+              .map((_, index) => (
+                <Skeleton
+                  key={index}
+                  variant="rectangular"
+                  width={420}
+                  height={145}
+                />
+              ))
           ) : classrooms.length !== 0 ? (
             classrooms.map(classroom => (
               <ClassCard
@@ -42,7 +51,16 @@ function Home() {
         <h2>Atribuídas</h2>
         <Stack alignItems="end" flexWrap="wrap" direction="row" gap="30px">
           {classrooms === null ? (
-            <CircularProgress sx={{ margin: '0 auto' }} thickness={5} />
+            Array(6)
+              .fill()
+              .map((_, index) => (
+                <Skeleton
+                  key={index}
+                  variant="rectangular"
+                  width={420}
+                  height={145}
+                />
+              ))
           ) : classrooms.length !== 0 ? (
             classrooms.map(classroom => (
               <ClassCard