leomurca/if-salas-web
leomurca/if-salas-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add skeleton loading for classroom

Browse source
This commit is contained in:
Leonardo Murça 2022-08-03 20:01:21 -03:00
parent 62def4510d
commit b27b8cc5b1
1 changed files with 40 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
src/screens/Classroom/View.js
View file

@ -6,6 +6,7 @@ import {
Grid, Grid,
Link, Link,
Paper, Paper,
Skeleton,
Stack, Stack,
Tab, Tab,
Tabs, Tabs,
@ -15,6 +16,7 @@ import {
import { TAB_OPTIONS } from './tabOptions'; import { TAB_OPTIONS } from './tabOptions';
import styles from './styles'; import styles from './styles';
import AnnouncementCard from '../../components/AnnouncementCard'; import AnnouncementCard from '../../components/AnnouncementCard';
import { createArrayFrom1ToN } from '../../utils/createArrayFrom1ToN';
function View({ function View({
layoutType, layoutType,
@ -28,7 +30,7 @@ function View({
return ( return (
<Container disableGutters sx={container}> <Container disableGutters sx={container}>
{classroom === null ? ( {classroom === null ? (
<h1>Loading...</h1> <Skeleton variant="rectangular" width="100%" height={240} />
) : ( ) : (
<Container disableGutters> <Container disableGutters>
<Paper <Paper
@ -73,7 +75,22 @@ function View({
</Container> </Container>
)} )}
{announcementsTabData === null ? ( {announcementsTabData === null ? (
<h1>Loading...</h1> <Grid sx={container} container spacing={2}>
<Grid item xs={4}>
<Skeleton variant="rectangular" width="100%" height={200} />
</Grid>
<Grid item xs={8}>
{createArrayFrom1ToN(4).map(i => (
<Skeleton
key={i}
variant="rectangular"
width="100%"
height={250}
sx={{ marginBottom: '30px' }}
/>
))}
</Grid>
</Grid>
) : ( ) : (
<Grid sx={container} container spacing={2}> <Grid sx={container} container spacing={2}>
<Grid item xs={4}> <Grid item xs={4}>
@ -119,7 +136,7 @@ function View({
return ( return (
<Container disableGutters sx={container}> <Container disableGutters sx={container}>
{classroom === null ? ( {classroom === null ? (
<h1>Loading...</h1> <Skeleton variant="rectangular" width="100%" height={240} />
) : ( ) : (
<Container disableGutters> <Container disableGutters>
<Paper <Paper
@ -164,7 +181,26 @@ function View({
</Container> </Container>
)} )}
{announcementsTabData === null ? ( {announcementsTabData === null ? (
<h1>Loading...</h1> <Stack
alignItems="center"
justifyContent="center"
flexWrap="wrap"
direction="row"
gap="30px"
sx={{ marginTop: '30px' }}
>
<Skeleton variant="rectangular" width="100%" height={200} />
{createArrayFrom1ToN(4).map(i => (
<Skeleton
key={i}
variant="rectangular"
width="100%"
height={250}
sx={{ marginBottom: '30px' }}
/>
))}
</Stack>
) : ( ) : (
<Stack <Stack
alignItems="center" alignItems="center"