[Skeleton] Make demo Facebook closer to the original

mui · Jan 27, 2020 · 19c2ba9 · 19c2ba9
1 parent 2ab33ab
commit 19c2ba9
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 14 deletions.
diff --git a/docs/src/pages/components/skeleton/Facebook.js b/docs/src/pages/components/skeleton/Facebook.js
@@ -30,7 +30,7 @@ function Media(props) {
  <CardHeader
  avatar={
  loading ? (
- <Skeleton variant="circle" width={40} height={40} />
+ <Skeleton animation="wave" variant="circle" width={40} height={40} />
  ) : (
  <Avatar
  alt="Ted talk"
@@ -45,11 +45,17 @@ function Media(props) {
  </IconButton>
  )
  }
- title={loading ? <Skeleton height={10} width="80%" style={{ marginBottom: 6 }} /> : 'Ted'}
- subheader={loading ? <Skeleton height={10} width="40%" /> : '5 hours ago'}
+ title={
+ loading ? (
+ <Skeleton animation="wave" height={10} width="80%" style={{ marginBottom: 6 }} />
+ ) : (
+ 'Ted'
+ )
+ }
+ subheader={loading ? <Skeleton animation="wave" height={10} width="40%" /> : '5 hours ago'}
  />
  {loading ? (
- <Skeleton variant="rect" className={classes.media} />
+ <Skeleton animation="wave" variant="rect" className={classes.media} />
  ) : (
  <CardMedia
  className={classes.media}
@@ -61,8 +67,8 @@ function Media(props) {
  <CardContent>
  {loading ? (
  <React.Fragment>
- <Skeleton height={10} style={{ marginBottom: 6 }} />
- <Skeleton height={10} width="80%" />
+ <Skeleton animation="wave" height={10} style={{ marginBottom: 6 }} />
+ <Skeleton animation="wave" height={10} width="80%" />
  </React.Fragment>
  ) : (
  <Typography variant="body2" color="textSecondary" component="p">

diff --git a/docs/src/pages/components/skeleton/Facebook.tsx b/docs/src/pages/components/skeleton/Facebook.tsx
@@ -35,7 +35,7 @@ function Media(props: MediaProps) {
  <CardHeader
  avatar={
  loading ? (
- <Skeleton variant="circle" width={40} height={40} />
+ <Skeleton animation="wave" variant="circle" width={40} height={40} />
  ) : (
  <Avatar
  alt="Ted talk"
@@ -50,11 +50,17 @@ function Media(props: MediaProps) {
  </IconButton>
  )
  }
- title={loading ? <Skeleton height={10} width="80%" style={{ marginBottom: 6 }} /> : 'Ted'}
- subheader={loading ? <Skeleton height={10} width="40%" /> : '5 hours ago'}
+ title={
+ loading ? (
+ <Skeleton animation="wave" height={10} width="80%" style={{ marginBottom: 6 }} />
+ ) : (
+ 'Ted'
+ )
+ }
+ subheader={loading ? <Skeleton animation="wave" height={10} width="40%" /> : '5 hours ago'}
  />
  {loading ? (
- <Skeleton variant="rect" className={classes.media} />
+ <Skeleton animation="wave" variant="rect" className={classes.media} />
  ) : (
  <CardMedia
  className={classes.media}
@@ -65,8 +71,8 @@ function Media(props: MediaProps) {
  <CardContent>
  {loading ? (
  <React.Fragment>
- <Skeleton height={10} style={{ marginBottom: 6 }} />
- <Skeleton height={10} width="80%" />
+ <Skeleton animation="wave" height={10} style={{ marginBottom: 6 }} />
+ <Skeleton animation="wave" height={10} width="80%" />
  </React.Fragment>
  ) : (
  <Typography variant="body2" color="textSecondary" component="p">

diff --git a/packages/material-ui-lab/src/Skeleton/Skeleton.js b/packages/material-ui-lab/src/Skeleton/Skeleton.js
@@ -48,10 +48,11 @@ export const styles = theme => ({
  position: 'relative',
  overflow: 'hidden',
  '&::after': {
- animation: '$wave 1.5s linear 0.5s infinite',
- background: 'linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent)',
+ animation: '$wave 1.6s linear 0.5s infinite',
+ background: 'linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent)',
  content: '""',
  position: 'absolute',
+ transform: 'translateX(-100%)', // Avoid flash during server-side hydration
  bottom: 0,
  left: 0,
  right: 0,
@@ -63,6 +64,9 @@ export const styles = theme => ({
  '0%': {
  transform: 'translateX(-100%)',
  },
+ '60%': { // +0.5s of delay between each loop
+ transform: 'translateX(100%)',
+ },
  '100%': {
  transform: 'translateX(100%)',
  },