From 76e1c096326029f5dd7b4141d9d37b7ce7476bc0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= <leo@leomurca.xyz>
Date: Tue, 23 Aug 2022 20:48:47 -0300
Subject: [PATCH] Add Skeleton loading for desktop AssignmentTab

---
 src/screens/Classroom/AssignmentsTab/index.js | 76 ++++++++++++++++++-
 src/screens/Classroom/index.js                |  3 +-
 2 files changed, 74 insertions(+), 5 deletions(-)

diff --git a/src/screens/Classroom/AssignmentsTab/index.js b/src/screens/Classroom/AssignmentsTab/index.js
index 96e3dec..bafd34a 100644
--- a/src/screens/Classroom/AssignmentsTab/index.js
+++ b/src/screens/Classroom/AssignmentsTab/index.js
@@ -1,14 +1,84 @@
-import { Container, Link, Stack, Typography } from '@mui/material';
+import { Container, Link, Skeleton, Stack, Typography } from '@mui/material';
 import dayjs from 'dayjs';
 import { capitalizeFirstLetter } from '../../../utils/capitalizeFirstLetter';
 
 function AssignmentsTab({ assignmentsTabData, layoutType }) {
-  console.log(assignmentsTabData);
   const layoutResolver = (state, assignments, layoutType) => {
     if (layoutType === 'desktop') {
       switch (state) {
         case 'loading':
-          return <h1>Loading...</h1>;
+          return (
+            <Container
+              sx={{ marginTop: '50px', height: '100vh' }}
+              disableGutters
+            >
+              <Stack alignItems="center">
+                <Skeleton
+                  variant="rectangular"
+                  width="90%"
+                  height={70}
+                  sx={{ marginBottom: '30px' }}
+                />
+                <Stack alignItems="flex-start" sx={{ width: '90%' }}>
+                  <Skeleton variant="rectangular" height={50} width="95%" />
+                  <Skeleton
+                    variant="rectangular"
+                    height={20}
+                    width={450}
+                    sx={{ marginTop: '25px' }}
+                  />
+                  <Skeleton
+                    variant="rectangular"
+                    height={20}
+                    width={300}
+                    sx={{ marginTop: '15px' }}
+                  />
+                </Stack>
+                <Stack
+                  alignItems="flex-start"
+                  sx={{ width: '90%', marginTop: '30px' }}
+                >
+                  <Skeleton variant="rectangular" height={50} width="95%" />
+                  <Skeleton
+                    variant="rectangular"
+                    height={20}
+                    width={450}
+                    sx={{ marginTop: '25px' }}
+                  />
+                  <Skeleton
+                    variant="rectangular"
+                    height={20}
+                    width={300}
+                    sx={{ marginTop: '15px' }}
+                  />
+                </Stack>
+              </Stack>
+
+              <Stack sx={{ marginTop: '50px' }} alignItems="center">
+                <Skeleton
+                  variant="rectangular"
+                  width="90%"
+                  height={70}
+                  sx={{ marginBottom: '30px' }}
+                />
+                <Stack alignItems="flex-start" sx={{ width: '90%' }}>
+                  <Skeleton variant="rectangular" height={50} width="95%" />
+                  <Skeleton
+                    variant="rectangular"
+                    height={20}
+                    width={450}
+                    sx={{ marginTop: '25px' }}
+                  />
+                  <Skeleton
+                    variant="rectangular"
+                    height={20}
+                    width={300}
+                    sx={{ marginTop: '15px' }}
+                  />
+                </Stack>
+              </Stack>
+            </Container>
+          );
 
         case 'idle':
           return (
diff --git a/src/screens/Classroom/index.js b/src/screens/Classroom/index.js
index 00c2491..aa2663d 100644
--- a/src/screens/Classroom/index.js
+++ b/src/screens/Classroom/index.js
@@ -15,12 +15,11 @@ function Classroom() {
     fetchAssignmentsByClassId,
   } = useUser();
   const [classroom, setClassroom] = useState(null);
+  const [tabData, setTabData] = useState(null);
   const [selectedTabOption, setSelectedTabOption] = useState(
     TAB_OPTIONS.announcements.value
   );
 
-  const [tabData, setTabData] = useState(null);
-
   const fetchAndPopulateAnnouncementsTabData = useCallback(async () => {
     setTabData({ tab: 'announcements', state: 'loading' });
     const announcements = await fetchClassroomAnnouncements(params.id);