Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Skeleton] Make the demos feel more realistic #38212

Merged
merged 2 commits into from
Aug 5, 2023
Merged

[Skeleton] Make the demos feel more realistic #38212

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
df9b497
[Skeleton] Make the demos feel more realistic
oliviertassinari Jul 29, 2023
04d66ed
Merge remote-tracking branch 'upstream/master' into pr/38212
zanivan Aug 1, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions docs/data/joy/components/skeleton/AnimationSkeleton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import AspectRatio from '@mui/joy/AspectRatio';
import Box from '@mui/joy/Box';
import Stack from '@mui/joy/Stack';
import Button from '@mui/joy/Button';
import Card from '@mui/joy/Card';
import CardContent from '@mui/joy/CardContent';
Expand All @@ -9,7 +9,7 @@ import Typography from '@mui/joy/Typography';

export default function AnimationSkeleton() {
return (
<Box sx={{ display: 'flex', gap: 2 }}>
<Stack spacing={2} useFlexGap>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

More idomatic?

<Card variant="outlined" sx={{ width: 343 }}>
<CardContent orientation="horizontal">
<Skeleton animation="wave" variant="circular" width={48} height={48} />
Expand All @@ -27,7 +27,7 @@ export default function AnimationSkeleton() {
<Skeleton animation="wave" variant="overlay">
<img
alt=""
src="https://images.unsplash.com/photo-1686548812883-9d3777f4c137?h=400&fit=crop&auto=format&dpr=2"
src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are not supposed to have the real data at this point in time.

/>
</Skeleton>
</AspectRatio>
Expand All @@ -42,6 +42,6 @@ export default function AnimationSkeleton() {
<Skeleton animation="wave" />
</Button>
</Card>
</Box>
</Stack>
);
}
8 changes: 4 additions & 4 deletions docs/data/joy/components/skeleton/AnimationSkeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import AspectRatio from '@mui/joy/AspectRatio';
import Box from '@mui/joy/Box';
import Stack from '@mui/joy/Stack';
import Button from '@mui/joy/Button';
import Card from '@mui/joy/Card';
import CardContent from '@mui/joy/CardContent';
Expand All @@ -9,7 +9,7 @@ import Typography from '@mui/joy/Typography';

export default function AnimationSkeleton() {
return (
<Box sx={{ display: 'flex', gap: 2 }}>
<Stack spacing={2} useFlexGap>
<Card variant="outlined" sx={{ width: 343 }}>
<CardContent orientation="horizontal">
<Skeleton animation="wave" variant="circular" width={48} height={48} />
Expand All @@ -27,7 +27,7 @@ export default function AnimationSkeleton() {
<Skeleton animation="wave" variant="overlay">
<img
alt=""
src="https://images.unsplash.com/photo-1686548812883-9d3777f4c137?h=400&fit=crop&auto=format&dpr=2"
src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
/>
</Skeleton>
</AspectRatio>
Expand All @@ -42,6 +42,6 @@ export default function AnimationSkeleton() {
<Skeleton animation="wave" />
</Button>
</Card>
</Box>
</Stack>
);
}
20 changes: 9 additions & 11 deletions docs/data/joy/components/skeleton/AvatarSkeleton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import * as React from 'react';
import Avatar from '@mui/joy/Avatar';
import Box from '@mui/joy/Box';
import FormControl from '@mui/joy/FormControl';
import FormLabel from '@mui/joy/FormLabel';
import Skeleton from '@mui/joy/Skeleton';
Expand All @@ -10,16 +9,15 @@ import Switch from '@mui/joy/Switch';
export default function AvatarSkeleton() {
const [loading, setLoading] = React.useState(true);
return (
<Stack spacing={2} useFlexGap sx={{ width: 200, height: 100 }}>
<Box sx={{ m: 'auto' }}>
<Avatar src={loading ? '' : '/static/images/avatar/1.jpg'}>
<Skeleton loading={loading} />
</Avatar>
</Box>
<FormControl
orientation="horizontal"
sx={{ gap: 1, justifyContent: 'center' }}
>
<Stack
spacing={4}
useFlexGap
sx={{ width: 200, height: 100, alignItems: 'center' }}
>
<Avatar src={loading ? '' : '/static/images/avatar/1.jpg'}>
<Skeleton loading={loading} />
</Avatar>
<FormControl orientation="horizontal" sx={{ gap: 1 }}>
<Switch
size="sm"
checked={loading}
Expand Down
20 changes: 9 additions & 11 deletions docs/data/joy/components/skeleton/AvatarSkeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import * as React from 'react';
import Avatar from '@mui/joy/Avatar';
import Box from '@mui/joy/Box';
import FormControl from '@mui/joy/FormControl';
import FormLabel from '@mui/joy/FormLabel';
import Skeleton from '@mui/joy/Skeleton';
Expand All @@ -10,16 +9,15 @@ import Switch from '@mui/joy/Switch';
export default function AvatarSkeleton() {
const [loading, setLoading] = React.useState(true);
return (
<Stack spacing={2} useFlexGap sx={{ width: 200, height: 100 }}>
<Box sx={{ m: 'auto' }}>
<Avatar src={loading ? '' : '/static/images/avatar/1.jpg'}>
<Skeleton loading={loading} />
</Avatar>
</Box>
<FormControl
orientation="horizontal"
sx={{ gap: 1, justifyContent: 'center' }}
>
<Stack
spacing={4}
useFlexGap
sx={{ width: 200, height: 100, alignItems: 'center' }}
>
<Avatar src={loading ? '' : '/static/images/avatar/1.jpg'}>
<Skeleton loading={loading} />
</Avatar>
<FormControl orientation="horizontal" sx={{ gap: 1 }}>
<Switch
size="sm"
checked={loading}
Expand Down
13 changes: 4 additions & 9 deletions docs/data/joy/components/skeleton/AvatarSkeleton.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,7 @@
<Box sx={{ m: 'auto' }}>
<Avatar src={loading ? '' : '/static/images/avatar/1.jpg'}>
<Skeleton loading={loading} />
</Avatar>
</Box>
<FormControl
orientation="horizontal"
sx={{ gap: 1, justifyContent: 'center' }}
>
<Avatar src={loading ? '' : '/static/images/avatar/1.jpg'}>
<Skeleton loading={loading} />
</Avatar>
<FormControl orientation="horizontal" sx={{ gap: 1 }}>
<Switch
size="sm"
checked={loading}
Comment on lines -1 to 7
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Simpler preview

Expand Down
2 changes: 1 addition & 1 deletion docs/data/joy/components/skeleton/BasicSkeleton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export default function BasicSkeleton() {
<Skeleton variant="overlay">
<img
alt=""
src="https://images.unsplash.com/photo-1686548812883-9d3777f4c137?h=400&fit=crop&auto=format&dpr=2"
src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
/>
</Skeleton>
</AspectRatio>
Expand Down
2 changes: 1 addition & 1 deletion docs/data/joy/components/skeleton/BasicSkeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export default function BasicSkeleton() {
<Skeleton variant="overlay">
<img
alt=""
src="https://images.unsplash.com/photo-1686548812883-9d3777f4c137?h=400&fit=crop&auto=format&dpr=2"
src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
/>
</Skeleton>
</AspectRatio>
Expand Down
2 changes: 1 addition & 1 deletion docs/data/joy/components/skeleton/BasicSkeleton.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<Skeleton variant="overlay">
<img
alt=""
src="https://images.unsplash.com/photo-1686548812883-9d3777f4c137?h=400&fit=crop&auto=format&dpr=2"
src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
/>
</Skeleton>
</AspectRatio>
Expand Down
41 changes: 7 additions & 34 deletions docs/data/joy/components/skeleton/GeometrySkeleton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,17 @@
import * as React from 'react';
import Box from '@mui/joy/Box';
import FormControl from '@mui/joy/FormControl';
import FormLabel from '@mui/joy/FormLabel';
import Skeleton from '@mui/joy/Skeleton';
import Stack from '@mui/joy/Stack';
import Switch from '@mui/joy/Switch';

export default function GeometrySkeleton() {
const [loading, setLoading] = React.useState(true);
return (
<Stack spacing={2} useFlexGap>
<div>
<Box sx={{ m: 'auto', display: 'flex', alignItems: 'center', gap: 2 }}>
<Skeleton loading={loading} variant="circular" width={48} height={48} />
<Box>
<Skeleton
loading={loading}
variant="rectangular"
width={200}
height="1em"
sx={{ mb: 1 }}
/>
<Skeleton
loading={loading}
variant="rectangular"
width={140}
height="1em"
/>
</Box>
<Skeleton variant="circular" width={48} height={48} />
<div>
<Skeleton variant="rectangular" width={200} height="1em" sx={{ mb: 1 }} />
<Skeleton variant="rectangular" width={140} height="1em" />
</div>
</Box>
<FormControl
orientation="horizontal"
sx={{ gap: 1, justifyContent: 'center' }}
>
<Switch
size="sm"
checked={loading}
onChange={(event) => setLoading(event.target.checked)}
/>
<FormLabel>Loading</FormLabel>
</FormControl>
</Stack>
</div>
);
}
41 changes: 7 additions & 34 deletions docs/data/joy/components/skeleton/GeometrySkeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,17 @@
import * as React from 'react';
import Box from '@mui/joy/Box';
import FormControl from '@mui/joy/FormControl';
import FormLabel from '@mui/joy/FormLabel';
import Skeleton from '@mui/joy/Skeleton';
import Stack from '@mui/joy/Stack';
import Switch from '@mui/joy/Switch';

export default function GeometrySkeleton() {
const [loading, setLoading] = React.useState(true);
return (
<Stack spacing={2} useFlexGap>
<div>
<Box sx={{ m: 'auto', display: 'flex', alignItems: 'center', gap: 2 }}>
<Skeleton loading={loading} variant="circular" width={48} height={48} />
<Box>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Empty boxes like this one looks wrong, I'm expanding the thought on this in mui/mui-x#9831.

<Skeleton
loading={loading}
variant="rectangular"
width={200}
height="1em"
sx={{ mb: 1 }}
/>
<Skeleton
loading={loading}
variant="rectangular"
width={140}
height="1em"
/>
</Box>
<Skeleton variant="circular" width={48} height={48} />
<div>
<Skeleton variant="rectangular" width={200} height="1em" sx={{ mb: 1 }} />
<Skeleton variant="rectangular" width={140} height="1em" />
</div>
</Box>
<FormControl
orientation="horizontal"
sx={{ gap: 1, justifyContent: 'center' }}
>
<Switch
size="sm"
checked={loading}
onChange={(event) => setLoading(event.target.checked)}
/>
<FormLabel>Loading</FormLabel>
</FormControl>
</Stack>
</div>
);
}
7 changes: 7 additions & 0 deletions docs/data/joy/components/skeleton/GeometrySkeleton.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<Box sx={{ m: 'auto', display: 'flex', alignItems: 'center', gap: 2 }}>
<Skeleton variant="circular" width={48} height={48} />
<div>
<Skeleton variant="rectangular" width={200} height="1em" sx={{ mb: 1 }} />
<Skeleton variant="rectangular" width={140} height="1em" />
</div>
</Box>
13 changes: 7 additions & 6 deletions docs/data/joy/components/skeleton/ImageSkeleton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,21 +10,22 @@ import Switch from '@mui/joy/Switch';
export default function ImageSkeleton() {
const [loading, setLoading] = React.useState(true);
return (
<Stack spacing={2} useFlexGap>
<Stack spacing={2} useFlexGap sx={{ alignItems: 'center' }}>
<Box sx={{ m: 'auto' }}>
<AspectRatio variant="plain" sx={{ width: 300 }}>
<Skeleton loading={loading}>
<img
src="https://images.unsplash.com/photo-1686548812883-9d3777f4c137?h=400&fit=crop&auto=format&dpr=2"
src={
loading
? 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='
: 'https://images.unsplash.com/photo-1686548812883-9d3777f4c137?h=400&fit=crop&auto=format&dpr=2'
}
alt=""
/>
</Skeleton>
</AspectRatio>
</Box>
<FormControl
orientation="horizontal"
sx={{ gap: 1, justifyContent: 'center' }}
>
<FormControl orientation="horizontal" sx={{ gap: 1 }}>
<Switch
size="sm"
checked={loading}
Expand Down
13 changes: 7 additions & 6 deletions docs/data/joy/components/skeleton/ImageSkeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,21 +10,22 @@ import Switch from '@mui/joy/Switch';
export default function ImageSkeleton() {
const [loading, setLoading] = React.useState(true);
return (
<Stack spacing={2} useFlexGap>
<Stack spacing={2} useFlexGap sx={{ alignItems: 'center' }}>
<Box sx={{ m: 'auto' }}>
<AspectRatio variant="plain" sx={{ width: 300 }}>
<Skeleton loading={loading}>
<img
src="https://images.unsplash.com/photo-1686548812883-9d3777f4c137?h=400&fit=crop&auto=format&dpr=2"
src={
loading
? 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='
: 'https://images.unsplash.com/photo-1686548812883-9d3777f4c137?h=400&fit=crop&auto=format&dpr=2'
}
alt=""
/>
</Skeleton>
</AspectRatio>
</Box>
<FormControl
orientation="horizontal"
sx={{ gap: 1, justifyContent: 'center' }}
>
<FormControl orientation="horizontal" sx={{ gap: 1 }}>
<Switch
size="sm"
checked={loading}
Expand Down
5 changes: 1 addition & 4 deletions docs/data/joy/components/skeleton/InlineSkeleton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,7 @@ export default function InlineSkeleton() {
</Skeleton>
</Typography>
</Box>
<FormControl
orientation="horizontal"
sx={{ gap: 1, justifyContent: 'center' }}
>
<FormControl orientation="horizontal" sx={{ gap: 1 }}>
<Switch
size="sm"
checked={loading}
Expand Down
5 changes: 1 addition & 4 deletions docs/data/joy/components/skeleton/InlineSkeleton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,7 @@ export default function InlineSkeleton() {
</Skeleton>
</Typography>
</Box>
<FormControl
orientation="horizontal"
sx={{ gap: 1, justifyContent: 'center' }}
>
<FormControl orientation="horizontal" sx={{ gap: 1 }}>
<Switch
size="sm"
checked={loading}
Expand Down
Loading