[docs] Add fallbacks high pri actionable areas

mui · Mar 9, 2020 · cdf6bfd · cdf6bfd
1 parent 30fffcb
commit cdf6bfd
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 6 deletions.
diff --git a/docs/src/modules/components/AppFrame.js b/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>
   );

diff --git a/docs/src/modules/components/Demo.js b/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 defer>
+          <NoSsr defer fallback={<DemoToolbarFallback />}>
             <DemoLanguages
               demo={demo}
               codeOpen={codeOpen}