[docs] Add TS demos for SimpleNoSsr and FrameDeferring

docs/src/pages/components/no-ssr/FrameDeferring.js

@@ -4,16 +4,17 @@ import NoSsr from '@material-ui/core/NoSsr';
 
 const useStyles = makeStyles({
   container: {
-    maxWidth: 300,
-    wordBreak: 'break-all',
+    width: 300,
+    display: 'flex',
+    flexWrap: 'wrap',
   },
 });
 
 function LargeTree() {
-  return Array.from(new Array(3000)).map((_, index) => <span key={index}>.</span>);
+  return Array.from(new Array(5000)).map((_, index) => <span key={index}>.</span>);
 }
 
-function FrameDeferring() {
+export default function FrameDeferring() {
   const classes = useStyles();
   const [state, setState] = React.useState({ open: false, defer: false });
 
@@ -30,6 +31,7 @@ function FrameDeferring() {
       >
         {'Render NoSsr defer="false"'}
       </button>
+      <br />
       <button
         type="button"
         onClick={() =>
@@ -41,17 +43,19 @@ function FrameDeferring() {
       >
         {'Render NoSsr defer="true"'}
       </button>
-      {state.open ? (
-        <div className={classes.container}>
-          <span>Outside NoSsr</span>
-          <NoSsr defer={state.defer}>
-            ....Inside NoSsr
-            <LargeTree />
-          </NoSsr>
-        </div>
-      ) : null}
+      <br />
+      <br />
+      <div className={classes.container}>
+        {state.open ? (
+          <React.Fragment>
+            <div>Outside NoSsr</div>
+            <NoSsr defer={state.defer}>
+              .....Inside NoSsr
+              <LargeTree />
+            </NoSsr>
+          </React.Fragment>
+        ) : null}
+      </div>
     </div>
   );
 }
-
-export default FrameDeferring;

docs/src/pages/components/no-ssr/FrameDeferring.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import NoSsr from '@material-ui/core/NoSsr';
+
+const useStyles = makeStyles({
+  container: {
+    width: 300,
+    display: 'flex',
+    flexWrap: 'wrap',
+  },
+});
+
+function LargeTree(): any {
+  return Array.from(new Array(5000)).map((_, index) => <span key={index}>.</span>);
+}
+
+export default function FrameDeferring() {
+  const classes = useStyles();
+  const [state, setState] = React.useState({ open: false, defer: false });
+
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() =>
+          setState({
+            open: !state.open,
+            defer: false,
+          })
+        }
+      >
+        {'Render NoSsr defer="false"'}
+      </button>
+      <br />
+      <button
+        type="button"
+        onClick={() =>
+          setState({
+            open: !state.open,
+            defer: true,
+          })
+        }
+      >
+        {'Render NoSsr defer="true"'}
+      </button>
+      <br />
+      <br />
+      <div className={classes.container}>
+        {state.open ? (
+          <React.Fragment>
+            <div>Outside NoSsr</div>
+            <NoSsr defer={state.defer}>
+              .....Inside NoSsr
+              <LargeTree />
+            </NoSsr>
+          </React.Fragment>
+        ) : null}
+      </div>
+    </div>
+  );
+}

docs/src/pages/components/no-ssr/SimpleNoSsr.js

@@ -1,35 +1,18 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { withStyles } from '@material-ui/core/styles';
 import NoSsr from '@material-ui/core/NoSsr';
-import Button from '@material-ui/core/Button';
-
-const styles = theme => ({
-  button: {
-    display: 'block',
-    margin: theme.spacing(2),
-  },
-});
-
-function SimpleNoSsr(props) {
-  const { classes } = props;
+import Box from '@material-ui/core/Box';
 
+export default function SimpleNoSsr() {
   return (
     <div>
-      <Button className={classes.button} variant="contained" color="primary">
-        Server & Client
-      </Button>
+      <Box p={2} bgcolor="primary.main" color="primary.contrastText">
+        Server and Client
+      </Box>
       <NoSsr>
-        <Button className={classes.button} variant="contained" color="secondary">
+        <Box p={2} bgcolor="secondary.main" color="primary.contrastText">
           Client only
-        </Button>
+        </Box>
       </NoSsr>
     </div>
   );
 }
-
-SimpleNoSsr.propTypes = {
-  classes: PropTypes.object.isRequired,
-};
-
-export default withStyles(styles)(SimpleNoSsr);

docs/src/pages/components/no-ssr/SimpleNoSsr.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import NoSsr from '@material-ui/core/NoSsr';
+import Box from '@material-ui/core/Box';
+
+export default function SimpleNoSsr() {
+  return (
+    <div>
+      <Box p={2} bgcolor="primary.main" color="primary.contrastText">
+        Server and Client
+      </Box>
+      <NoSsr>
+        <Box p={2} bgcolor="secondary.main" color="primary.contrastText">
+          Client only
+        </Box>
+      </NoSsr>
+    </div>
+  );
+}