005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
63 lines
1.7 KiB
TypeScript
63 lines
1.7 KiB
TypeScript
import { styled } from '@mui/material/styles';
|
|
import Box from '@mui/material/Box';
|
|
import Typography from '@mui/material/Typography';
|
|
import Avatar from '@mui/material/Avatar';
|
|
import Grid from '@mui/material/Grid';
|
|
import Skeleton from '@mui/material/Skeleton';
|
|
|
|
const Image = styled('img')({
|
|
width: '100%',
|
|
});
|
|
|
|
function SkeletonChildrenDemo(props: { loading?: boolean }) {
|
|
const { loading = false } = props;
|
|
|
|
return (
|
|
<div>
|
|
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
|
<Box sx={{ margin: 1 }}>
|
|
{loading ? (
|
|
<Skeleton variant="circular">
|
|
<Avatar />
|
|
</Skeleton>
|
|
) : (
|
|
<Avatar src="https://pbs.twimg.com/profile_images/877631054525472768/Xp5FAPD5_reasonably_small.jpg" />
|
|
)}
|
|
</Box>
|
|
<Box sx={{ width: '100%' }}>
|
|
{loading ? (
|
|
<Skeleton width="100%">
|
|
<Typography>.</Typography>
|
|
</Skeleton>
|
|
) : (
|
|
<Typography>Ted</Typography>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
{loading ? (
|
|
<Skeleton variant="rectangular" width="100%">
|
|
<div style={{ paddingTop: '57%' }} />
|
|
</Skeleton>
|
|
) : (
|
|
<Image
|
|
src="https://pi.tedcdn.com/r/talkstar-photos.s3.amazonaws.com/uploads/72bda89f-9bbf-4685-910a-2f151c4f3a8a/NicolaSturgeon_2019T-embed.jpg?w=512"
|
|
alt=""
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function SkeletonChildren() {
|
|
return (
|
|
<Grid container spacing={8}>
|
|
<Grid size="grow">
|
|
<SkeletonChildrenDemo loading />
|
|
</Grid>
|
|
<Grid size="grow">
|
|
<SkeletonChildrenDemo />
|
|
</Grid>
|
|
</Grid>
|
|
);
|
|
}
|