import { Fade, Skeleton, Stack, Typography } from '@mui/material';

export default function OverviewSkeleton() {
  return (
    <Fade in>
      <Stack direction="column">
        <Stack
          direction="row"
          spacing={2}
          sx={{
            alignItems: 'center',
          }}>
          <Skeleton variant="text" sx={{ fontSize: '1.75rem', width: '40%' }} />
        </Stack>
        <Skeleton sx={{ mt: 2 }} variant="rounded" height={100} />
        <Typography
          component="div"
          variant="h4"
          sx={{
            mt: 2,
          }}>
          <Skeleton />
        </Typography>
        <Typography component="div" variant="h2">
          <Skeleton />
        </Typography>
      </Stack>
    </Fade>
  );
}