refactor: handle lazy-loaded modules for spa-like behavior

Author: skipjack

src/components/Page/Page.jsx

@@ -10,52 +10,74 @@ import Gitter from '../Gitter/Gitter';
 // Load Styling
 import './Page.scss';
 
-const Page = ({
-  title,
-  content,
-  contributors = [],
-  related = [],
-  ...props
-}) => (
-  <section className="page">
-    <PageLinks page={ props } />
-
-    <Markdown>
-      <h1>{ title }</h1>
-
-      <div dangerouslySetInnerHTML={{
-        __html: content
-      }} />
-
-      { related && related.length > 0 && (
-        <div>
-          <hr />
-          <h3>Further Reading</h3>
-          <ul>
-            {
-              related.map((link, index) => (
-                <li key={ index }>
-                  <a href={ link.url }>
-                    { link.title }
-                  </a>
-                </li>
-              ))
-            }
-          </ul>
-        </div>
-      )}
-
-      { contributors && contributors.length > 0 && (
-        <div>
-          <hr />
-          <h3>Contributors</h3>
-          <Contributors contributors={ contributors } />
-        </div>
-      )}
-    </Markdown>
-
-    <Gitter />
-  </section>
-);
+class Page extends React.Component {
+  state = {
+    content: this.props.content instanceof Promise ? 'Loading...' : this.props.content
+  }
+
+  render() {
+    let {
+      title,
+      content,
+      contributors = [],
+      related = [],
+      ...rest
+    } = this.props;
+
+    return (
+      <section className="page">
+        <PageLinks page={ rest } />
+
+        <Markdown>
+          <h1>{ title }</h1>
+
+          <div dangerouslySetInnerHTML={{
+            __html: this.state.content
+          }} />
+
+          { related && related.length > 0 && (
+            <div>
+              <hr />
+              <h3>Further Reading</h3>
+              <ul>
+                {
+                  related.map((link, index) => (
+                    <li key={ index }>
+                      <a href={ link.url }>
+                        { link.title }
+                      </a>
+                    </li>
+                  ))
+                }
+              </ul>
+            </div>
+          )}
+
+          { contributors && contributors.length > 0 && (
+            <div>
+              <hr />
+              <h3>Contributors</h3>
+              <Contributors contributors={ contributors } />
+            </div>
+          )}
+        </Markdown>
+
+        <Gitter />
+      </section>
+    );
+  }
+
+  componentDidMount() {
+    if ( this.props.content instanceof Promise ) {
+      this.props.content
+        .then(content => this.setState({
+          content
+        }))
+        .catch(error => this.setState({
+          content: 'Error loading content.'
+        }));
+    }
+  }
+}
 
 export default Page;

src/components/Site/Site.jsx

@@ -87,7 +87,7 @@ class Site extends React.Component {
                 path={ page.url }
                 render={ props => {
                   let path = page.path.replace('src/content/', '');
-                  let module = this.props.import(path);
+                  let content = this.props.import(path);
 
                   return (
                     <React.Fragment>
@@ -100,9 +100,7 @@ class Site extends React.Component {
                         ))) } />
                       <Page
                         { ...page }
-                        content={ module instanceof Promise ? (
-                          'TODO: Use `LazyLoad` component with nprogress'
-                        ) : module } />
+                        content={ content } />
                     </React.Fragment>
                   );
                 }} />