[docs] Prevent layout shift when rendering ads

[Janpot]

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

Fixes #17887

[mui-pr-bot]

Details of bundle changes.

Comparing: 0f28b62...1fa6b5c

bundle	Size Change	Size	Gzip Change	Gzip
docs.main	▲ +147 B (+0.02% )	599 kB	▲ +78 B (+0.04% )	191 kB
@material-ui/core	--	348 kB	--	95.2 kB
@material-ui/core[umd]	--	307 kB	--	88.3 kB
@material-ui/lab	--	145 kB	--	45 kB
@material-ui/styles	--	51.8 kB	--	15.6 kB
@material-ui/system	--	15.7 kB	--	4.37 kB
AppBar	--	63.9 kB	--	19.9 kB
Avatar	--	62.7 kB	--	19.6 kB
Backdrop	--	67.7 kB	--	20.9 kB
Badge	--	65.4 kB	--	20.2 kB
BottomNavigation	--	62.4 kB	--	19.5 kB
BottomNavigationAction	--	75.3 kB	--	23.8 kB
Box	--	70.8 kB	--	21.4 kB
Breadcrumbs	--	68 kB	--	21.3 kB
Button	--	79.3 kB	--	24.5 kB
ButtonBase	--	73.8 kB	--	23.1 kB
ButtonGroup	--	64.2 kB	--	20 kB
Card	--	62.9 kB	--	19.6 kB
CardActionArea	--	74.9 kB	--	23.6 kB
CardActions	--	62 kB	--	19.3 kB
CardContent	--	62 kB	--	19.3 kB
CardHeader	--	65.1 kB	--	20.4 kB
CardMedia	--	62.4 kB	--	19.5 kB
Checkbox	--	81.6 kB	--	25.6 kB
Chip	--	70.6 kB	--	21.8 kB
CircularProgress	--	64.1 kB	--	20.1 kB
ClickAwayListener	--	3.85 kB	--	1.55 kB
Collapse	--	67.8 kB	--	20.9 kB
colorManipulator	--	3.83 kB	--	1.52 kB
Container	--	63.1 kB	--	19.6 kB
CssBaseline	--	57.6 kB	--	18 kB
Dialog	--	82.5 kB	--	25.6 kB
DialogActions	--	62.1 kB	--	19.4 kB
DialogContent	--	62.2 kB	--	19.4 kB
DialogContentText	--	64 kB	--	20 kB
DialogTitle	--	64.3 kB	--	20.1 kB
Divider	--	62.6 kB	--	19.6 kB
docs.landing	--	54.8 kB	--	14.5 kB
Drawer	--	84.3 kB	--	26 kB
ExpansionPanel	--	71.1 kB	--	22.1 kB
ExpansionPanelActions	--	62.1 kB	--	19.4 kB
ExpansionPanelDetails	--	61.9 kB	--	19.3 kB
ExpansionPanelSummary	--	77.9 kB	--	24.5 kB
Fab	--	76.7 kB	--	23.8 kB
Fade	--	23.1 kB	--	8.05 kB
FilledInput	--	73.1 kB	--	22.6 kB
FormControl	--	64.3 kB	--	19.9 kB
FormControlLabel	--	65.5 kB	--	20.5 kB
FormGroup	--	62 kB	--	19.3 kB
FormHelperText	--	63.3 kB	--	19.7 kB
FormLabel	--	63.3 kB	--	19.5 kB
Grid	--	65.1 kB	--	20.3 kB
GridList	--	62.5 kB	--	19.5 kB
GridListTile	--	63.7 kB	--	19.9 kB
GridListTileBar	--	63.2 kB	--	19.7 kB
Grow	--	23.7 kB	--	8.17 kB
Hidden	--	66.1 kB	--	20.6 kB
Icon	--	62.8 kB	--	19.6 kB
IconButton	--	76 kB	--	23.6 kB
Input	--	72 kB	--	22.4 kB
InputAdornment	--	65.1 kB	--	20.4 kB
InputBase	--	70.2 kB	--	22 kB
InputLabel	--	65.1 kB	--	20.2 kB
LinearProgress	--	65.3 kB	--	20.3 kB
Link	--	66.6 kB	--	21 kB
List	--	62.4 kB	--	19.3 kB
ListItem	--	77 kB	--	24 kB
ListItemAvatar	--	62.1 kB	--	19.4 kB
ListItemIcon	--	62.2 kB	--	19.4 kB
ListItemSecondaryAction	--	62 kB	--	19.3 kB
ListItemText	--	65 kB	--	20.4 kB
ListSubheader	--	62.8 kB	--	19.6 kB
Menu	--	88.3 kB	--	27.6 kB
MenuItem	--	78 kB	--	24.3 kB
MenuList	--	66 kB	--	20.6 kB
MobileStepper	--	67.7 kB	--	21.1 kB
Modal	--	14.3 kB	--	4.96 kB
NativeSelect	--	76.4 kB	--	24 kB
NoSsr	--	2.19 kB	--	1.04 kB
OutlinedInput	--	73.7 kB	--	22.9 kB
Paper	--	62.4 kB	--	19.3 kB
Popover	--	82.6 kB	--	25.4 kB
Popper	--	28.3 kB	--	10.2 kB
Portal	--	2.87 kB	--	1.29 kB
Radio	--	82.5 kB	--	25.9 kB
RadioGroup	--	63.2 kB	--	19.7 kB
Rating	--	69.8 kB	--	22.2 kB
RootRef	--	4.43 kB	--	1.67 kB
Select	--	113 kB	--	33.6 kB
Skeleton	--	62.5 kB	--	19.6 kB
Slide	--	25.1 kB	--	8.68 kB
Slider	--	75.3 kB	--	23.7 kB
Snackbar	--	77.1 kB	--	24 kB
SnackbarContent	--	65.8 kB	--	20.6 kB
SpeedDial	--	85.9 kB	--	27 kB
SpeedDialAction	--	115 kB	--	36.4 kB
SpeedDialIcon	--	64.6 kB	--	20.2 kB
Step	--	62.6 kB	--	19.6 kB
StepButton	--	82.1 kB	--	25.8 kB
StepConnector	--	62.7 kB	--	19.6 kB
StepContent	--	69 kB	--	21.4 kB
StepIcon	--	64.7 kB	--	20.1 kB
StepLabel	--	68.6 kB	--	21.4 kB
Stepper	--	64.9 kB	--	20.3 kB
styles/createMuiTheme	--	16.3 kB	--	5.79 kB
SvgIcon	--	63 kB	--	19.6 kB
SwipeableDrawer	--	90.7 kB	--	28 kB
Switch	--	80.8 kB	--	25.1 kB
Tab	--	76.2 kB	--	24.1 kB
Table	--	62.6 kB	--	19.5 kB
TableBody	--	62.1 kB	--	19.3 kB
TableCell	--	64.1 kB	--	20.1 kB
TableFooter	--	62.1 kB	--	19.3 kB
TableHead	--	62.1 kB	--	19.3 kB
TablePagination	--	140 kB	--	40.7 kB
TableRow	--	62.5 kB	--	19.5 kB
TableSortLabel	--	77.2 kB	--	24.4 kB
Tabs	--	85.3 kB	--	27.1 kB
TextareaAutosize	--	5.06 kB	--	2.11 kB
TextField	--	121 kB	--	35.5 kB
ToggleButton	--	76 kB	--	23.9 kB
ToggleButtonGroup	--	63.2 kB	--	19.8 kB
Toolbar	--	62.3 kB	--	19.5 kB
Tooltip	--	99.1 kB	--	31.4 kB
TreeItem	--	73.4 kB	--	23.1 kB
TreeView	--	66 kB	--	20.6 kB
Typography	--	63.7 kB	--	19.8 kB
useMediaQuery	--	2.49 kB	--	1.05 kB
Zoom	--	23.1 kB	--	8.06 kB

Generated by 🚫 dangerJS against 1fa6b5c

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 1fa6b5c:

Sandbox	Source
create-react-app	Configuration
create-react-app-with-typescript	Configuration
create-react-app	Issue #17887
create-react-app-with-typescript	Issue #17887

[oliviertassinari]

I will follow up to solve an edge case, we don't display the ad on all the pages, for instance, it's excluded from the installation page.

[Janpot]

I see, I guess the style rules should rather go in here, conditionally based on the disableAd prop? Anyway, feel free to work on this, I won't have time to work on this again until tonight.

[oliviertassinari]

What do you think of this solution 1fa6b5c?

[Janpot]

Ok for me

[oliviertassinari]

Thank you for taking the time

[Janpot]

@oliviertassinari 👍 Ok, that works well, I've turned my adblocker off.

[oliviertassinari]

I have created a reminder in 2 months, I'm curious to see how the click/display and user/display metric evolves.

I've turned my adblocker off.

This means an extra ~$0.03 for us at the end of the months. Thanks 😁.