[Skeleton] Delay the animation by 500ms

[bowann]

• I have followed (at least) the PR section of the contributing guide.

Improve the case where the skeleton is shown for a short period of time, it reduces the mental overhead of seeing an animation, if the skeleton is shown for less than 500ms, it will feels like the content is static.

[mui-pr-bot]

Details of bundle changes.

Comparing: 55e12c9...9c06323

bundle	Size Change	Size	Gzip Change	Gzip
@material-ui/lab	▲ +5 B (0.00% )	175 kB	▲ +3 B (+0.01% )	52.7 kB
Skeleton	▲ +5 B (+0.01% )	61.2 kB	▲ +3 B (+0.02% )	19.3 kB
@material-ui/core	--	357 kB	--	97.4 kB
@material-ui/core[umd]	--	314 kB	--	90.4 kB
@material-ui/styles	--	50.8 kB	--	15.3 kB
@material-ui/system	--	14.5 kB	--	4.04 kB
AppBar	--	62.6 kB	--	19.5 kB
Autocomplete	--	128 kB	--	40 kB
Avatar	--	63.9 kB	--	20.1 kB
AvatarGroup	--	60.9 kB	--	19.1 kB
Backdrop	--	66.4 kB	--	20.5 kB
Badge	--	64 kB	--	19.8 kB
BottomNavigation	--	61.1 kB	--	19.1 kB
BottomNavigationAction	--	74.1 kB	--	23.4 kB
Box	--	69.4 kB	--	21 kB
Breadcrumbs	--	66.7 kB	--	20.8 kB
Button	--	78.4 kB	--	23.9 kB
ButtonBase	--	72.6 kB	--	22.7 kB
ButtonGroup	--	81.8 kB	--	25 kB
Card	--	61.5 kB	--	19.2 kB
CardActionArea	--	73.7 kB	--	23.1 kB
CardActions	--	60.7 kB	--	19 kB
CardContent	--	60.7 kB	--	18.9 kB
CardHeader	--	63.7 kB	--	20 kB
CardMedia	--	61 kB	--	19.1 kB
Checkbox	--	80.6 kB	--	25.4 kB
Chip	--	81.2 kB	--	24.8 kB
CircularProgress	--	62.8 kB	--	19.7 kB
ClickAwayListener	--	3.85 kB	--	1.55 kB
Collapse	--	66.6 kB	--	20.6 kB
colorManipulator	--	3.85 kB	--	1.52 kB
Container	--	61.9 kB	--	19.3 kB
CssBaseline	--	56.2 kB	--	17.6 kB
Dialog	--	81.4 kB	--	25.4 kB
DialogActions	--	60.8 kB	--	19 kB
DialogContent	--	60.9 kB	--	19 kB
DialogContentText	--	62.7 kB	--	19.7 kB
DialogTitle	--	63 kB	--	19.7 kB
Divider	--	61.3 kB	--	19.2 kB
docs.landing	--	50.3 kB	--	12.2 kB
docs.main	--	611 kB	--	195 kB
Drawer	--	83.2 kB	--	25.2 kB
ExpansionPanel	--	70.1 kB	--	21.9 kB
ExpansionPanelActions	--	60.8 kB	--	19 kB
ExpansionPanelDetails	--	60.6 kB	--	18.9 kB
ExpansionPanelSummary	--	76.8 kB	--	24.2 kB
Fab	--	75.5 kB	--	23.4 kB
Fade	--	22.2 kB	--	7.68 kB
FilledInput	--	72.2 kB	--	22.4 kB
FormControl	--	63.1 kB	--	19.6 kB
FormControlLabel	--	64.2 kB	--	20.1 kB
FormGroup	--	60.7 kB	--	19 kB
FormHelperText	--	61.9 kB	--	19.4 kB
FormLabel	--	62.1 kB	--	19.2 kB
Grid	--	63.8 kB	--	19.9 kB
GridList	--	61.2 kB	--	19.2 kB
GridListTile	--	62.4 kB	--	19.5 kB
GridListTileBar	--	61.9 kB	--	19.3 kB
Grow	--	22.8 kB	--	7.8 kB
Hidden	--	64.6 kB	--	20.2 kB
Icon	--	61.5 kB	--	19.2 kB
IconButton	--	74.8 kB	--	23.3 kB
Input	--	71.2 kB	--	22.1 kB
InputAdornment	--	63.8 kB	--	20 kB
InputBase	--	69.3 kB	--	21.7 kB
InputLabel	--	64 kB	--	19.9 kB
LinearProgress	--	64 kB	--	19.9 kB
Link	--	65.3 kB	--	20.5 kB
List	--	61 kB	--	19 kB
ListItem	--	75.8 kB	--	23.6 kB
ListItemAvatar	--	60.8 kB	--	19 kB
ListItemIcon	--	60.9 kB	--	19 kB
ListItemSecondaryAction	--	60.7 kB	--	19 kB
ListItemText	--	63.6 kB	--	19.9 kB
ListSubheader	--	61.4 kB	--	19.3 kB
Menu	--	87.1 kB	--	26.8 kB
MenuItem	--	76.8 kB	--	23.9 kB
MenuList	--	64.6 kB	--	20.2 kB
MobileStepper	--	66.5 kB	--	20.8 kB
Modal	--	14.3 kB	--	5 kB
NativeSelect	--	75.5 kB	--	23.7 kB
NoSsr	--	2.19 kB	--	1.03 kB
OutlinedInput	--	72.6 kB	--	22.6 kB
Paper	--	61 kB	--	19 kB
Popover	--	81.5 kB	--	25.1 kB
Popper	--	28.7 kB	--	10.3 kB
Portal	--	2.9 kB	--	1.3 kB
Radio	--	81.5 kB	--	25.6 kB
RadioGroup	--	61.9 kB	--	19.3 kB
Rating	--	68.7 kB	--	22 kB
RootRef	--	4.21 kB	--	1.64 kB
Select	--	113 kB	--	33.6 kB
Slide	--	24.3 kB	--	8.3 kB
Slider	--	74.3 kB	--	23.3 kB
Snackbar	--	73.8 kB	--	23 kB
SnackbarContent	--	62.2 kB	--	19.5 kB
SpeedDial	--	84.7 kB	--	26.7 kB
SpeedDialAction	--	116 kB	--	36.6 kB
SpeedDialIcon	--	63.2 kB	--	19.8 kB
Step	--	61.3 kB	--	19.2 kB
StepButton	--	80.9 kB	--	25.5 kB
StepConnector	--	61.4 kB	--	19.3 kB
StepContent	--	67.7 kB	--	21.1 kB
StepIcon	--	63.3 kB	--	19.7 kB
StepLabel	--	67.3 kB	--	21.1 kB
Stepper	--	63.6 kB	--	20 kB
styles/createMuiTheme	--	15.4 kB	--	5.44 kB
SvgIcon	--	61.7 kB	--	19.2 kB
SwipeableDrawer	--	90.5 kB	--	28 kB
Switch	--	79.8 kB	--	25 kB
Tab	--	75 kB	--	23.7 kB
Table	--	61.2 kB	--	19.2 kB
TableBody	--	60.8 kB	--	19 kB
TableCell	--	62.7 kB	--	19.7 kB
TableContainer	--	60.6 kB	--	18.9 kB
TableFooter	--	60.8 kB	--	19 kB
TableHead	--	60.8 kB	--	19 kB
TablePagination	--	140 kB	--	40.9 kB
TableRow	--	61.2 kB	--	19.1 kB
TableSortLabel	--	76 kB	--	23.8 kB
Tabs	--	84.1 kB	--	26.5 kB
TextareaAutosize	--	5.09 kB	--	2.13 kB
TextField	--	122 kB	--	35.6 kB
ToggleButton	--	74.8 kB	--	23.6 kB
ToggleButtonGroup	--	61.9 kB	--	19.4 kB
Toolbar	--	61 kB	--	19.1 kB
Tooltip	--	99.5 kB	--	31.4 kB
TreeItem	--	72.4 kB	--	22.9 kB
TreeView	--	65 kB	--	20.4 kB
Typography	--	62.3 kB	--	19.4 kB
useAutocomplete	--	12.6 kB	--	4.7 kB
useMediaQuery	--	2.5 kB	--	1.06 kB
Zoom	--	22.3 kB	--	7.68 kB

Generated by 🚫 dangerJS against 9c06323

[oliviertassinari]

What's wrong with the style prop?

[bowann]

Not all knows about the style animation-delay, so just thought it would make it easier to understand the possibility with a prop.

[bowann]

What's wrong with the style prop?

I can remove the prop, and just make a example in the guide using styles, if thats ok?

[oliviertassinari]

Interesting, I was wondering about the motivation, thanks. So your main concern is about discoverability.

[bowann]

Yes

[mbrookes]

What's wrong with the style prop?

We could make the same argument for a few other component props that only apply a single CSS property. Is there a good rule of thumb for when to have a prop vs using style?

[oliviertassinari]

@mbrookes Not I'm aware of. I think that the higher the probability of needing the behavior, the more we should consider having a built-in prop.

[mbrookes]

This seems like a pretty strong use case then.

[bowann]

is it possible to restart a build, when it fails on connection to host github.com?

[bowann]

Sounds good I'll dig in to it. :) tor. 19. dec. 2019 15.44 skrev Olivier Tassinari <notifications@github.com>:

…

***@***.**** commented on this pull request. ------------------------------ In docs/src/pages/components/skeleton/skeleton.md <#18913 (comment)>: > @@ -33,3 +33,7 @@ The component supports 3 variants. ## Facebook example {{"demo": "pages/components/skeleton/Facebook.js", "defaultCodeOpen": false, "bg": true}} + +## Delay example This is the only study I could find: https://uxdesign.cc/what-you-should-know-about-skeleton-screens-a820c45a571a. It suggests that we could support a wave and pulsating animation. This could be an interesting improvement. Regarding the delay, I think that we should give up on the demo and new props, to reduce the number of animation on the screen. The new demo personally gives me motion sickness, I don't know about you guys. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#18913>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABZEJL6GG4IU45MILITR5HTQZOCDJANCNFSM4J4KFUGA> .

updated

[oliviertassinari]

Thank you for the contribution, I wish we could backed this change with a specific user study, the closest we have to justify the changes is https://www.nngroup.com/articles/response-times-3-important-limits/.

[bowann]

Thank you for the contribution, I wish we could backed this change with a specific user study, the closest we have to justify the changes is https://www.nngroup.com/articles/response-times-3-important-limits/.

Thx, i kinda think we have, since i read it (skimming), an choose 0.5s after reading this.

1 second: Limit for users feeling that they are freely navigating the command space without having to unduly wait for the computer. A delay of 0.2–1.0 seconds does mean that users notice the delay and thus feel the computer is "working" on the command, as opposed to having the command be a direct effect of the users' actions. Example: If sorting a table according to the selected column can't be done in 0.1 seconds, it certainly has to be done in 1 second, or users will feel that the UI is sluggish and will lose the sense of "flow" in performing their task. For delays of more than 1 second, indicate to the user that the computer is working on the problem, for example by changing the shape of the cursor.