[Skeleton] Keep the size 1:1 to replaced text content

[julie-volkova]

fixes #18170

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

[mui-pr-bot]

Details of bundle changes.

Comparing: d1aae91...11363d7

bundle	Size Change	Size	Gzip Change	Gzip
Skeleton	▲ +121 B (+0.20% )	61.2 kB	▲ +76 B (+0.40% )	19.3 kB
@material-ui/lab	▲ +121 B (+0.07% )	172 kB	▲ +61 B (+0.12% )	51.8 kB
@material-ui/core	--	351 kB	--	96 kB
@material-ui/core[umd]	--	310 kB	--	89.3 kB
@material-ui/styles	--	50.8 kB	--	15.4 kB
@material-ui/system	--	14.8 kB	--	4.06 kB
AppBar	--	62.4 kB	--	19.5 kB
Autocomplete	--	126 kB	--	40 kB
Avatar	--	61.4 kB	--	19.3 kB
Backdrop	--	66.4 kB	--	20.5 kB
Badge	--	64 kB	--	19.8 kB
BottomNavigation	--	61 kB	--	19.1 kB
BottomNavigationAction	--	74 kB	--	23.4 kB
Box	--	69.4 kB	--	21 kB
Breadcrumbs	--	66.6 kB	--	20.9 kB
Button	--	78 kB	--	23.8 kB
ButtonBase	--	72.5 kB	--	22.7 kB
ButtonGroup	--	80.6 kB	--	24.7 kB
Card	--	61.3 kB	--	19.2 kB
CardActionArea	--	73.6 kB	--	23.2 kB
CardActions	--	60.7 kB	--	19 kB
CardContent	--	60.6 kB	--	18.9 kB
CardHeader	--	63.7 kB	--	20 kB
CardMedia	--	61 kB	--	19.1 kB
Checkbox	--	80.4 kB	--	25.2 kB
Chip	--	81.1 kB	--	24.8 kB
CircularProgress	--	62.7 kB	--	19.7 kB
ClickAwayListener	--	3.87 kB	--	1.56 kB
Collapse	--	66.5 kB	--	20.5 kB
colorManipulator	--	3.83 kB	--	1.52 kB
Container	--	61.8 kB	--	19.3 kB
CssBaseline	--	56.2 kB	--	17.6 kB
Dialog	--	81.2 kB	--	25.2 kB
DialogActions	--	60.7 kB	--	19 kB
DialogContent	--	60.8 kB	--	19.1 kB
DialogContentText	--	62.7 kB	--	19.7 kB
DialogTitle	--	62.9 kB	--	19.8 kB
Divider	--	61.2 kB	--	19.2 kB
docs.landing	--	55.5 kB	--	14.4 kB
docs.main	--	609 kB	--	194 kB
Drawer	--	82.9 kB	--	25.7 kB
ExpansionPanel	--	69.8 kB	--	21.8 kB
ExpansionPanelActions	--	60.7 kB	--	19 kB
ExpansionPanelDetails	--	60.6 kB	--	18.9 kB
ExpansionPanelSummary	--	76.7 kB	--	24.1 kB
Fab	--	75.4 kB	--	23.4 kB
Fade	--	22.2 kB	--	7.66 kB
FilledInput	--	72.2 kB	--	22.3 kB
FormControl	--	63 kB	--	19.5 kB
FormControlLabel	--	64.1 kB	--	20.1 kB
FormGroup	--	60.6 kB	--	19 kB
FormHelperText	--	61.9 kB	--	19.4 kB
FormLabel	--	62.1 kB	--	19.2 kB
Grid	--	63.7 kB	--	20 kB
GridList	--	61.1 kB	--	19.2 kB
GridListTile	--	62.3 kB	--	19.5 kB
GridListTileBar	--	61.8 kB	--	19.4 kB
Grow	--	22.8 kB	--	7.79 kB
Hidden	--	64.5 kB	--	20.2 kB
Icon	--	61.4 kB	--	19.2 kB
IconButton	--	74.7 kB	--	23.2 kB
Input	--	71.1 kB	--	22.1 kB
InputAdornment	--	63.7 kB	--	20.1 kB
InputBase	--	69.2 kB	--	21.7 kB
InputLabel	--	63.9 kB	--	19.9 kB
LinearProgress	--	64 kB	--	19.9 kB
Link	--	65.2 kB	--	20.7 kB
List	--	61 kB	--	18.9 kB
ListItem	--	75.7 kB	--	23.6 kB
ListItemAvatar	--	60.7 kB	--	19 kB
ListItemIcon	--	60.8 kB	--	19 kB
ListItemSecondaryAction	--	60.6 kB	--	19 kB
ListItemText	--	63.6 kB	--	20 kB
ListSubheader	--	61.4 kB	--	19.3 kB
Menu	--	86.9 kB	--	27.3 kB
MenuItem	--	76.7 kB	--	23.9 kB
MenuList	--	64.6 kB	--	20.1 kB
MobileStepper	--	66.3 kB	--	20.7 kB
Modal	--	14.2 kB	--	4.98 kB
NativeSelect	--	75.4 kB	--	23.7 kB
NoSsr	--	2.19 kB	--	1.03 kB
OutlinedInput	--	72.6 kB	--	22.5 kB
Paper	--	60.9 kB	--	18.9 kB
Popover	--	81.2 kB	--	25.1 kB
Popper	--	28.6 kB	--	10.2 kB
Portal	--	2.87 kB	--	1.29 kB
Radio	--	81.2 kB	--	25.5 kB
RadioGroup	--	61.8 kB	--	19.3 kB
Rating	--	68.6 kB	--	22 kB
RootRef	--	4.43 kB	--	1.67 kB
Select	--	113 kB	--	33.5 kB
Slide	--	24.3 kB	--	8.27 kB
Slider	--	74.2 kB	--	23.4 kB
Snackbar	--	75.7 kB	--	23.6 kB
SnackbarContent	--	64.3 kB	--	20.2 kB
SpeedDial	--	84.6 kB	--	26.6 kB
SpeedDialAction	--	115 kB	--	36.4 kB
SpeedDialIcon	--	63.2 kB	--	19.8 kB
Step	--	61.2 kB	--	19.2 kB
StepButton	--	80.9 kB	--	25.4 kB
StepConnector	--	61.3 kB	--	19.3 kB
StepContent	--	67.6 kB	--	21.1 kB
StepIcon	--	63.3 kB	--	19.7 kB
StepLabel	--	67.2 kB	--	21.1 kB
Stepper	--	63.4 kB	--	19.9 kB
styles/createMuiTheme	--	15.4 kB	--	5.43 kB
SvgIcon	--	61.7 kB	--	19.2 kB
SwipeableDrawer	--	90.3 kB	--	28.1 kB
Switch	--	79.7 kB	--	24.8 kB
Tab	--	74.9 kB	--	23.7 kB
Table	--	61.2 kB	--	19.2 kB
TableBody	--	60.7 kB	--	19 kB
TableCell	--	62.7 kB	--	19.7 kB
TableFooter	--	60.7 kB	--	19 kB
TableHead	--	60.7 kB	--	19 kB
TablePagination	--	139 kB	--	40.7 kB
TableRow	--	61.1 kB	--	19.1 kB
TableSortLabel	--	75.9 kB	--	24 kB
Tabs	--	84 kB	--	26.8 kB
TextareaAutosize	--	5.06 kB	--	2.11 kB
TextField	--	122 kB	--	35.5 kB
ToggleButton	--	74.7 kB	--	23.6 kB
ToggleButtonGroup	--	61.8 kB	--	19.4 kB
Toolbar	--	60.9 kB	--	19.1 kB
Tooltip	--	99.1 kB	--	31.3 kB
TreeItem	--	72.2 kB	--	22.7 kB
TreeView	--	65 kB	--	20.3 kB
Typography	--	62.3 kB	--	19.4 kB
useAutocomplete	--	12.2 kB	--	4.5 kB
useMediaQuery	--	2.49 kB	--	1.05 kB
Zoom	--	22.3 kB	--	7.67 kB

Generated by 🚫 dangerJS against 11363d7

[oliviertassinari]

We need to do something with the demos: https://deploy-preview-18451--material-ui.netlify.com/components/skeleton/. It doesn't look OK anymore.

[julie-volkova]

@oliviertassinari are you talking about the thickness of skeleton's lines?

[oliviertassinari]

Yes, the second card demos looks off. What if we increase the height prop value, would it look closer to the original?

[julie-volkova]

I've noticed I forgot to apply some of the styles for the actual issue fix. Also updated the demos so they look closer to the original, is that sufficient or do we want it pixel-perfect?

[oliviertassinari]

@macfire10 Well done

[estebansolisd]

When this feature will be available for the core ?

[oliviertassinari]

The patch will be release this weekend.

[Slavenin]

Hi!
We have a problem with this style:

[oliviertassinari]

@Slavenin Already fixed, wait for the next release.

[oliviertassinari]

@estebansolisd As for moving the lab components in the core, we will likely wait v5, to give an incentive to upgrade.