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 desktop AssignmentTab

Browse source
This commit is contained in:
Leonardo Murça 2022-08-23 20:48:47 -03:00
parent 34c10d23f1
commit 76e1c09632
2 changed files with 74 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
src/screens/Classroom/AssignmentsTab/index.js
View file

@ -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 dayjs from 'dayjs';
import { capitalizeFirstLetter } from '../../../utils/capitalizeFirstLetter'; import { capitalizeFirstLetter } from '../../../utils/capitalizeFirstLetter';
function AssignmentsTab({ assignmentsTabData, layoutType }) { function AssignmentsTab({ assignmentsTabData, layoutType }) {
console.log(assignmentsTabData);
const layoutResolver = (state, assignments, layoutType) => { const layoutResolver = (state, assignments, layoutType) => {
if (layoutType === 'desktop') { if (layoutType === 'desktop') {
switch (state) { switch (state) {
case 'loading': 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': case 'idle':
return ( return (

3
src/screens/Classroom/index.js
View file

@ -15,12 +15,11 @@ function Classroom() {
fetchAssignmentsByClassId, fetchAssignmentsByClassId,
} = useUser(); } = useUser();
const [classroom, setClassroom] = useState(null); const [classroom, setClassroom] = useState(null);
const [tabData, setTabData] = useState(null);
const [selectedTabOption, setSelectedTabOption] = useState( const [selectedTabOption, setSelectedTabOption] = useState(
TAB_OPTIONS.announcements.value TAB_OPTIONS.announcements.value
); );
const [tabData, setTabData] = useState(null);
const fetchAndPopulateAnnouncementsTabData = useCallback(async () => { const fetchAndPopulateAnnouncementsTabData = useCallback(async () => {
setTabData({ tab: 'announcements', state: 'loading' }); setTabData({ tab: 'announcements', state: 'loading' });
const announcements = await fetchClassroomAnnouncements(params.id); const announcements = await fetchClassroomAnnouncements(params.id);