feat: add ts demos for SimpleNoSsr and FrameDeferring

Author: ganeshf22

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

@@ -10,7 +10,13 @@ const useStyles = makeStyles({
 });
 
 function LargeTree() {
-  return Array.from(new Array(3000)).map((_, index) => <span key={index}>.</span>);
+  return (
+    <>
+      {Array.from(new Array(3000)).map((_, index) => (
+        <span key={index}>.</span>
+      ))}
+    </>
+  );
 }
 
 function FrameDeferring() {

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import NoSsr from '@material-ui/core/NoSsr';
+
+const useStyles = makeStyles({
+  container: {
+    maxWidth: 300,
+    wordBreak: 'break-all',
+  },
+});
+
+function LargeTree() {
+  return (
+    <>
+      {Array.from(new Array(3000)).map((_, index) => (
+        <span key={index}>.</span>
+      ))}
+    </>
+  );
+}
+
+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>
+      <button
+        type="button"
+        onClick={() =>
+          setState({
+            open: !state.open,
+            defer: true,
+          })
+        }
+      >
+        {'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}
+    </div>
+  );
+}
+
+export default FrameDeferring;

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import { WithStyles } from '@material-ui/styles';
+import NoSsr from '@material-ui/core/NoSsr';
+import Button from '@material-ui/core/Button';
+
+const styles = (theme: any) => ({
+  button: {
+    display: 'block',
+    margin: theme.spacing(2),
+  },
+});
+
+export interface iProps extends WithStyles<typeof styles> {}
+
+function SimpleNoSsr(props: iProps) {
+  const { classes } = props;
+
+  return (
+    <div>
+      <Button className={classes.button} variant="contained" color="primary">
+        Server & Client
+      </Button>
+      <NoSsr>
+        <Button className={classes.button} variant="contained" color="secondary">
+          Client only
+        </Button>
+      </NoSsr>
+    </div>
+  );
+}
+
+export default withStyles(styles)(SimpleNoSsr);