Add desktop skeleton loading for assignment

src/screens/Assignment/View.js

@@ -1,13 +1,22 @@
 import parse from 'html-react-parser';
-import { Box, Button, Container, Stack, Typography } from '@mui/material';
+import {
+  Box,
+  Button,
+  Container,
+  Skeleton,
+  Stack,
+  Typography,
+} from '@mui/material';
 import dayjs from 'dayjs';
 import { capitalizeFirstLetter } from '../../utils/capitalizeFirstLetter';
 
 import styles from './styles';
+import { createArrayFrom1ToN } from '../../utils/createArrayFrom1ToN';
 
 function View({ assignment, dropzone, layoutType }) {
   const {
     container,
+    loadingContainer,
     headerStack,
     title,
     classroomColorStack,
@@ -21,7 +30,40 @@ function View({ assignment, dropzone, layoutType }) {
   } = styles[layoutType];
 
   return assignment === null ? (
-    <h1>Loading...</h1>
+    <Container sx={loadingContainer} disableGutters>
+      <Stack sx={headerStack}>
+        <Skeleton variant="rectangular" width="100%" height={60} />
+        <Skeleton
+          sx={{ marginTop: '20px' }}
+          variant="rectangular"
+          width="30%"
+          height={20}
+        />
+        <Stack sx={subHeaderStack}>
+          <Skeleton variant="rectangular" width="20%" height={20} />
+          <Skeleton variant="rectangular" width="50%" height={20} />
+        </Stack>
+      </Stack>
+      <Stack sx={descriptionStack}>
+        {createArrayFrom1ToN(12).map(i => (
+          <Skeleton
+            key={i}
+            variant="text"
+            sx={{ marginTop: i % 4 === 1 && '20px', fontSize: '1rem' }}
+          />
+        ))}
+      </Stack>
+
+      <Stack sx={dropzoneStack} flexDirection="column" alignItems="flex-end">
+        <Skeleton variant="rectangular" width="100%" height={150} />
+        <Skeleton
+          sx={{ marginTop: '30px' }}
+          variant="rectangular"
+          width="30%"
+          height={40}
+        />
+      </Stack>
+    </Container>
   ) : (
     <Container sx={container} disableGutters>
       <Stack sx={headerStack}>

src/screens/Assignment/styles.js

@@ -7,6 +7,14 @@ const desktopContainer = {
   marginTop: '30px',
 };
 
+const desktopLoadingContainer = {
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  marginTop: '50px',
+};
+
 const desktopHeaderStack = {
   width: '70%',
   paddingBottom: '5px',
@@ -68,6 +76,7 @@ const desktopButton = {
 
 const desktop = {
   container: desktopContainer,
+  loadingContainer: desktopLoadingContainer,
   headerStack: desktopHeaderStack,
   title: desktopTitle,
   classroomColorStack: desktopClassroomColorStack,
@@ -86,6 +95,11 @@ const mobileContainer = {
   marginBottom: '100px',
 };
 
+const mobileLoadingContainer = {
+  ...desktopLoadingContainer,
+  marginBottom: '100px',
+};
+
 const mobileHeaderStack = {
   ...desktopHeaderStack,
   width: '90%',
@@ -136,6 +150,7 @@ const mobileButton = {
 
 const mobile = {
   container: mobileContainer,
+  loadingContainer: mobileLoadingContainer,
   headerStack: mobileHeaderStack,
   title: mobileTitle,
   classroomColorStack: mobileClassroomColorStack,
@@ -151,6 +166,7 @@ const mobile = {
 // ========== Unset ==========
 const unset = {
   container: null,
+  loadingContainer: null,
   headerStack: null,
   title: null,
   classroomColorStack: null,

src/services/user-service.js

@@ -53,7 +53,7 @@ const getAllAssignments = userId =>
   });
 
 const getAssignmentById = assignmentId =>
-  sleep(400).then(() => {
+  sleep(4000).then(() => {
     console.log('Getting assignment by id ' + assignmentId);
     return {
       data: allAssignments.filter(a => a.id === assignmentId)[0],