[docs] Improve loading experience

docs/src/modules/components/AppFrame.js

@@ -34,6 +34,7 @@ import { LANGUAGES_LABEL } from 'docs/src/modules/constants';
 import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
 import { useChangeTheme } from 'docs/src/modules/components/ThemeContext';
 import PageContext from 'docs/src/modules/components/PageContext';
+import Skeleton from '@material-ui/lab/Skeleton';
 
 const LOCALES = { zh: 'zh-CN', pt: 'pt-BR', es: 'es-ES' };
 const CROWDIN_ROOT_URL = 'https://translate.material-ui.com/project/material-ui-docs/';
@@ -51,8 +52,8 @@ Router.onRouteChangeError = () => {
 };
 
 const AppSearch = React.lazy(() => import('docs/src/modules/components/AppSearch'));
-function DeferredAppSearch() {
-  const fallback = null;
+function DeferredAppSearch(props) {
+  const { className } = props;
 
   const [mounted, setMounted] = React.useState(false);
   React.useEffect(() => {
@@ -67,14 +68,19 @@ function DeferredAppSearch() {
         as="style"
       />
       {/* Suspense isn't supported for SSR yet */}
-      {mounted && (
-        <React.Suspense fallback={fallback}>
-          <AppSearch />
+      {mounted ? (
+        <React.Suspense
+          fallback={<Skeleton className={className} height={40} variant="rect" width={200} />}
+        >
+          <AppSearch className={className} />
         </React.Suspense>
-      )}
+      ) : null}
     </React.Fragment>
   );
 }
+DeferredAppSearch.propTypes = {
+  className: PropTypes.string,
+};
 
 const styles = theme => ({
   '@global': {
@@ -116,6 +122,10 @@ const styles = theme => ({
     backgroundColor: theme.palette.type === 'dark' ? theme.palette.background.level2 : null,
     transition: theme.transitions.create('width'),
   },
+  appSearch: {
+    marginRight: theme.spacing(2),
+    marginLeft: theme.spacing(1),
+  },
   language: {
     margin: theme.spacing(0, 0.5, 0, 1),
     display: 'none',
@@ -217,7 +227,7 @@ function AppFrame(props) {
             <MenuIcon />
           </IconButton>
           <div className={classes.grow} />
-          <DeferredAppSearch />
+          <DeferredAppSearch className={classes.appSearch} />
           <Tooltip title={t('changeLanguage')} enterDelay={300}>
             <Button
               color="inherit"
@@ -237,7 +247,7 @@ function AppFrame(props) {
               <ExpandMoreIcon fontSize="small" />
             </Button>
           </Tooltip>
-          <NoSsr>
+          <NoSsr defer>
             <Menu
               id="language-menu"
               anchorEl={languageMenu}

docs/src/modules/components/AppSearch.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import url from 'url';
 import { useSelector } from 'react-redux';
 import { loadCSS } from 'fg-loadcss/src/loadCSS';
@@ -8,6 +9,7 @@ import Input from '@material-ui/core/Input';
 import SearchIcon from '@material-ui/icons/Search';
 import { handleEvent } from 'docs/src/modules/components/MarkdownLinks';
 import docsearch from 'docsearch.js';
+import clsx from 'clsx';
 
 const useStyles = makeStyles(
   theme => ({
@@ -73,8 +75,6 @@ const useStyles = makeStyles(
     root: {
       fontFamily: theme.typography.fontFamily,
       position: 'relative',
-      marginRight: theme.spacing(2),
-      marginLeft: theme.spacing(1),
       borderRadius: theme.shape.borderRadius,
       backgroundColor: fade(theme.palette.common.white, 0.15),
       '&:hover': {
@@ -112,7 +112,8 @@ const useStyles = makeStyles(
  * `<link rel="preload" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" as="style" />`
  * to potentially reduce load times
  */
-export default function AppSearch() {
+export default function AppSearch(props) {
+  const { className } = props;
   const classes = useStyles();
   const inputRef = React.useRef(null);
   const theme = useTheme();
@@ -213,7 +214,7 @@ export default function AppSearch() {
   }, [desktop, userLanguage]);
 
   return (
-    <div className={classes.root} style={{ display: desktop ? 'flex' : 'none' }}>
+    <div className={clsx(classes.root, className)} style={{ display: desktop ? 'flex' : 'none' }}>
       <div className={classes.search}>
         <SearchIcon />
       </div>
@@ -234,3 +235,7 @@ export default function AppSearch() {
     </div>
   );
 }
+
+AppSearch.propTypes = {
+  className: PropTypes.string,
+};

docs/src/modules/components/Demo.js

@@ -17,6 +17,7 @@ import Menu from '@material-ui/core/Menu';
 import MenuItem from '@material-ui/core/MenuItem';
 import MoreVertIcon from '@material-ui/icons/MoreVert';
 import Tooltip from '@material-ui/core/Tooltip';
+import Skeleton from '@material-ui/lab/Skeleton';
 import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
 import DemoSandboxed from 'docs/src/modules/components/DemoSandboxed';
 import DemoLanguages from 'docs/src/modules/components/DemoLanguages';
@@ -98,12 +99,10 @@ const styles = theme => ({
       top: 0,
       right: theme.spacing(1),
       height: theme.spacing(6),
+      marginTop: theme.spacing(1),
     },
     justifyContent: 'space-between',
   },
-  headerButtons: {
-    margin: '2px 0',
-  },
   code: {
     display: 'none',
     padding: 0,
@@ -152,6 +151,19 @@ function getDemoData(codeVariant, demo, githubLocation) {
   };
 }
 
+function DemoToolbarFallback() {
+  return (
+    <React.Fragment>
+      {/* demo languages placeholder
+       * since they're hidden by default we use an empty div to position the next
+       * placeholder properly */}
+      <div />
+      {/* header buttons placeholder */}
+      <Skeleton height={40} variant="rect" width={200} />
+    </React.Fragment>
+  );
+}
+
 function Demo(props) {
   const { classes, demo, demoOptions, githubLocation } = props;
   const dispatch = useDispatch();
@@ -345,7 +357,7 @@ function Demo(props) {
       <div className={classes.anchorLink} id={`${demoName}.tsx`} />
       {demoOptions.hideHeader ? null : (
         <div className={classes.header}>
-          <NoSsr>
+          <NoSsr defer fallback={<DemoToolbarFallback />}>
             <DemoLanguages
               demo={demo}
               codeOpen={codeOpen}

docs/src/modules/components/DemoSandboxed.js

@@ -51,7 +51,7 @@ function DemoFrame(props) {
 
   // NoSsr fixes a strange concurrency issue with iframe and quick React mount/unmount
   return (
-    <NoSsr>
+    <NoSsr defer>
       <Frame
         ref={handleRef}
         className={classes.frame}

docs/src/modules/components/HomeQuickWord.js

@@ -41,7 +41,7 @@ function HomeQuickWord(props) {
   return (
     <div className={classes.root}>
       <Typography variant="caption">{t('homeQuickWord')}</Typography>
-      <NoSsr>
+      <NoSsr defer>
         <Link
           variant="body2"
           display="block"

docs/src/modules/components/HomeQuotes.js

@@ -185,7 +185,7 @@ function HomeQuotes() {
 
   return (
     <div className={classes.root}>
-      <NoSsr>
+      <NoSsr defer>
         <Container maxWidth="md" className={classes.container} disableGutters>
           <Divider />
           <div className={classes.users}>

docs/src/modules/components/HomeSponsors.js

@@ -34,7 +34,7 @@ function HomeSponsors(props) {
 
   return (
     <div className={classes.root}>
-      <NoSsr>
+      <NoSsr defer>
         <Container maxWidth="md">
           <Divider />
           <MarkdownElement className={classes.markdownElement} text={backers[userLanguage]} />

docs/src/modules/components/HomeThemes.js

@@ -52,7 +52,7 @@ function HomeThemes(props) {
 
   return (
     <div className={classes.root}>
-      <NoSsr>
+      <NoSsr defer>
         <Container maxWidth="md">
           <Typography variant="h4" component="h2" align="center" gutterBottom>
             {t('themes')}
@@ -67,7 +67,7 @@ function HomeThemes(props) {
             data-ga-event-label="home-image"
             className={classes.link}
           >
-            <NoSsr>
+            <NoSsr defer>
               <img
                 className={classes.img}
                 alt={t('themesButton')}

docs/src/modules/components/HomeUsers.js

@@ -125,7 +125,7 @@ function HomeUsers(props) {
 
   return (
     <div className={classes.root}>
-      <NoSsr>
+      <NoSsr defer>
         <Container maxWidth="md" className={classes.container} disableGutters>
           <Divider />
           <div className={classes.users}>