[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/';
@@ -52,7 +53,7 @@ Router.onRouteChangeError = () => {
 
 const AppSearch = React.lazy(() => import('docs/src/modules/components/AppSearch'));
 function DeferredAppSearch() {
-  const fallback = null;
+  const fallback = <Skeleton height={40} variant="rect" width={200} />;
 
   const [mounted, setMounted] = React.useState(false);
   React.useEffect(() => {
@@ -67,10 +68,12 @@ function DeferredAppSearch() {
         as="style"
       />
       {/* Suspense isn't supported for SSR yet */}
-      {mounted && (
+      {mounted ? (
         <React.Suspense fallback={fallback}>
           <AppSearch />
         </React.Suspense>
+      ) : (
+        fallback
       )}
     </React.Fragment>
   );
@@ -237,7 +240,7 @@ function AppFrame(props) {
               <ExpandMoreIcon fontSize="small" />
             </Button>
           </Tooltip>
-          <NoSsr>
+          <NoSsr defer>
             <Menu
               id="language-menu"
               anchorEl={languageMenu}

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}>