feat(v2): live playground should be lazily loaded on visibility (#1557)

* feat(v2): live playground should kbe lazily loaded on visibility

* add docs

* nits

* nits

packages/docusaurus-theme-classic/package.json

@@ -12,9 +12,11 @@
     "@mdx-js/react": "^1.0.20",
     "classnames": "^2.2.6",
     "docsearch.js": "^2.5.2",
+    "infima": "0.2.0-alpha.1",
     "prism-react-renderer": "^0.1.6",
     "react-live": "^2.1.2",
-    "infima": "0.2.0-alpha.1",
+    "react-loadable": "^5.5.0",
+    "react-loadable-visibility": "^2.5.1",
     "react-toggle": "^4.0.2"
   },
   "peerDependencies": {

packages/docusaurus-theme-classic/src/theme/components/CodeBlock/index.js

@@ -6,10 +6,17 @@
  */
 
 import React from 'react';
+import LoadableVisibility from 'react-loadable-visibility/react-loadable';
 import Highlight, {defaultProps} from 'prism-react-renderer';
 import nightOwlTheme from 'prism-react-renderer/themes/nightOwl';
 
-import Playground from '@theme/components/Playground';
+import Loading from '@theme/Loading';
+
+/* Live playground is not small in size, lazy load it is better */
+const Playground = LoadableVisibility({
+  loader: () => import('@theme/components/Playground'),
+  loading: Loading,
+});
 
 export default ({children, className: languageClassName, live, ...props}) => {
   if (live) {

website/docs/writing-documentation.md

@@ -97,3 +97,74 @@ TODO: Talk more about using the official docs plugin and how to configure the si
 References:
 - https://docusaurus.io/docs/en/navigation
 -->
+
+## Syntax highlighting
+
+If you're writing technical documentation you may want a way to delineate blocks of 
+code, sometimes known as a *code fence*. The result is also known as a *code block*.
+The simplest way to show code is to wrap it between two lines consisting of 3 backticks in a row.
+
+Example:
+
+    ```jsx
+	  console.log("Hello world");
+    ```
+
+And the result would be:
+
+```jsx
+console.log("Hello world");
+```
+
+## Live Editor
+
+You can also create live code editors with a code block `live` meta string.
+
+Example:
+
+    ```jsx live
+    function Clock(props) {
+      const [date, setDate] = useState(new Date());
+      useEffect(() => {
+        var timerID = setInterval(() => tick(), 1000);
+
+        return function cleanup() {
+          clearInterval(timerID);
+        };
+      });
+
+      function tick() {
+        setDate(new Date());
+      }
+
+      return (
+        <div>
+          <h2>It is {date.toLocaleTimeString()}.</h2>
+        </div>
+      );
+    }
+    ```
+And the result would be:
+
+```jsx live
+function Clock(props) {
+  const [date, setDate] = useState(new Date());
+  useEffect(() => {
+    var timerID = setInterval(() => tick(), 1000);
+
+    return function cleanup() {
+      clearInterval(timerID);
+    };
+  });
+
+  function tick() {
+    setDate(new Date());
+  }
+
+  return (
+    <div>
+      <h2>It is {date.toLocaleTimeString()}.</h2>
+    </div>
+  );
+}
+```

yarn.lock

@@ -11546,6 +11546,11 @@ react-loadable-ssr-addon@^0.1.8:
   resolved "https://registry.yarnpkg.com/react-loadable-ssr-addon/-/react-loadable-ssr-addon-0.1.9.tgz#c134275fd36637a554f6438a0b78e0d1f70a8260"
   integrity sha512-mjk0ykDmmgPvkoFVwjbhev/VtarlpdR7B9FzuFFxtviFWVjaL8ddw4J89uFvUkC1KtFmXdQ6BF7yzUB54QqmXg==
 
+react-loadable-visibility@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/react-loadable-visibility/-/react-loadable-visibility-2.5.1.tgz#713ad70967865a0db1f4dc918228a29a59a593d5"
+  integrity sha512-rIwqjznjAi7i9K+BF/SUCcQZaiIhoPbbMj9aLceHeH093kL4aJ0bdj/iUG6E+ohIkKliKgKB2RKSai0MwNH51g==
+
 react-loadable@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/react-loadable/-/react-loadable-5.5.0.tgz#582251679d3da86c32aae2c8e689c59f1196d8c4"