remove skeletons

mui · Mar 20, 2020 · 6f0bb47 · 6f0bb47
1 parent da31b96
commit 6f0bb47
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 40 deletions.
diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
@@ -35,7 +35,6 @@ 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/';
@@ -53,9 +52,7 @@ Router.onRouteChangeError = () => {
 };
 
 const AppSearch = React.lazy(() => import('docs/src/modules/components/AppSearch'));
-function DeferredAppSearch(props) {
-  const { className } = props;
-
+function DeferredAppSearch() {
   const [mounted, setMounted] = React.useState(false);
   React.useEffect(() => {
     setMounted(true);
@@ -70,18 +67,13 @@ function DeferredAppSearch(props) {
       />
       {/* Suspense isn't supported for SSR yet */}
       {mounted ? (
-        <React.Suspense
-          fallback={<Skeleton className={className} height={40} variant="rect" width={200} />}
-        >
-          <AppSearch className={className} />
+        <React.Suspense fallback={null}>
+          <AppSearch />
         </React.Suspense>
       ) : null}
     </React.Fragment>
   );
 }
-DeferredAppSearch.propTypes = {
-  className: PropTypes.string,
-};
 
 const styles = theme => ({
   '@global': {
@@ -123,10 +115,6 @@ const styles = theme => ({
     backgroundColor: theme.palette.type === 'light' ? null : theme.palette.background.level2,
     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',
@@ -228,7 +216,7 @@ function AppFrame(props) {
             <MenuIcon />
           </IconButton>
           <div className={classes.grow} />
-          <DeferredAppSearch className={classes.appSearch} />
+          <DeferredAppSearch />
           <Tooltip title={t('changeLanguage')} enterDelay={300}>
             <Button
               color="inherit"

diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js
@@ -1,5 +1,4 @@
 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';
@@ -9,7 +8,6 @@ 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 => ({
@@ -75,6 +73,8 @@ 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,8 +112,7 @@ 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(props) {
-  const { className } = props;
+export default function AppSearch() {
   const classes = useStyles();
   const inputRef = React.useRef(null);
   const theme = useTheme();
@@ -214,7 +213,7 @@ export default function AppSearch(props) {
   }, [desktop, userLanguage]);
 
   return (
-    <div className={clsx(classes.root, className)} style={{ display: desktop ? 'flex' : 'none' }}>
+    <div className={classes.root} style={{ display: desktop ? 'flex' : 'none' }}>
       <div className={classes.search}>
         <SearchIcon />
       </div>
@@ -235,7 +234,3 @@ export default function AppSearch(props) {
     </div>
   );
 }
-
-AppSearch.propTypes = {
-  className: PropTypes.string,
-};
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
@@ -17,7 +17,6 @@ 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 RefreshIcon from '@material-ui/icons/Refresh';
 import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
 import DemoSandboxed from 'docs/src/modules/components/DemoSandboxed';
@@ -152,19 +151,6 @@ 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>
-  );
-}
-
 // TODO: replace with React.useOpaqueReference if it is released
 function useUniqueId(prefix) {
   // useOpaqueReference
@@ -385,7 +371,7 @@ function Demo(props) {
           className={classes.toolbar}
           role="toolbar"
         >
-          <NoSsr defer fallback={<DemoToolbarFallback />}>
+          <NoSsr defer>
             <DemoLanguages
               demo={demo}
               codeOpen={codeOpen}