[NoSSR] Add a fallback property

Using the React suspense API as inspiration: https://medium.com/@baphemot/understanding-react-suspense-1c73b4b0b1e6
mui · Jun 18, 2018 · b0b2bb2 · b0b2bb2
1 parent 91e355a
commit b0b2bb2
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 11 deletions.
diff --git a/docs/src/pages/customization/overrides/DynamicCSSVariables.js b/docs/src/pages/customization/overrides/DynamicCSSVariables.js
@@ -57,7 +57,7 @@ class DynamicCSSVariables extends React.Component {
                 }
           }
         >
-          {'dynamic CSS variables'}
+          {'CSS variables'}
         </Button>
       </React.Fragment>
     );

diff --git a/docs/src/pages/customization/overrides/DynamicClassName.js b/docs/src/pages/customization/overrides/DynamicClassName.js
@@ -51,7 +51,7 @@ class DynamicClassName extends React.Component {
             [classes.buttonBlue]: this.state.color === 'blue',
           })}
         >
-          {'dynamic class names'}
+          {'Class name branch'}
         </Button>
       </React.Fragment>
     );

diff --git a/docs/src/pages/customization/overrides/DynamicThemeNesting.js b/docs/src/pages/customization/overrides/DynamicThemeNesting.js
@@ -47,7 +47,7 @@ class DynamicThemeNesting extends React.Component {
           }
         >
           <Button variant="raised" color="secondary">
-            {'dynamic theme nesting'}
+            {'Theme nesting'}
           </Button>
         </MuiThemeProvider>
       </React.Fragment>

diff --git a/docs/src/pages/customization/overrides/overrides.md b/docs/src/pages/customization/overrides/overrides.md
@@ -136,7 +136,7 @@ It will come with: [#7633](https://github.com/mui-org/material-ui/issues/7633).
 
 {{"demo": "pages/customization/overrides/DynamicCSSVariables.js"}}
 
-### Dynamic inline style
+### Inline-style
 
 {{"demo": "pages/customization/overrides/DynamicInlineStyle.js"}}
 

diff --git a/packages/material-ui-docs/src/NoSSR/NoSSR.js b/packages/material-ui-docs/src/NoSSR/NoSSR.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const DefaultOnSSR = () => null;
+const Fallback = () => null;
 
 /**
  * Only render the component on the client.
@@ -21,12 +21,19 @@ class NoSSR extends React.Component {
   }
 
   render() {
-    return this.state.mounted ? this.props.children : <DefaultOnSSR />;
+    const { children, fallback } = this.props;
+
+    return this.state.mounted ? children : fallback;
   }
 }
 
 NoSSR.propTypes = {
   children: PropTypes.node.isRequired,
+  fallback: PropTypes.node,
+};
+
+NoSSR.defaultProps = {
+  fallback: <Fallback />,
 };
 
 export default NoSSR;
diff --git a/packages/material-ui/src/GridListTile/GridListTile.js b/packages/material-ui/src/GridListTile/GridListTile.js
@@ -52,11 +52,7 @@ class GridListTile extends React.Component {
   fit = () => {
     const imgElement = this.imgElement;
 
-    if (!imgElement) {
-      return;
-    }
-
-    if (!imgElement.complete) {
+    if (!imgElement || !imgElement.complete) {
       return;
     }