From 91613d6bb0c274a7e63561ad20a7b870c6aa9b54 Mon Sep 17 00:00:00 2001
From: dannyrb <danny.ri.brown@gmail.com>
Date: Mon, 29 Apr 2019 08:31:40 -0400
Subject: [PATCH] Async component for dynamic imports

---
 src/components/AsyncComponent.js | 37 ++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 src/components/AsyncComponent.js

diff --git a/src/components/AsyncComponent.js b/src/components/AsyncComponent.js
new file mode 100644
index 000000000..de95a835c
--- /dev/null
+++ b/src/components/AsyncComponent.js
@@ -0,0 +1,37 @@
+/**
+ * We use this component to leverage "Code Splitting"
+ *
+ * Link: https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html
+ */
+
+import React, { Component } from 'react'
+
+export default function asyncComponent(importComponent) {
+  class AsyncComponent extends Component {
+    constructor(props) {
+      super(props)
+
+      this.state = {
+        component: null,
+      }
+    }
+
+    async componentDidMount() {
+      // Add dynamically loaded component to state
+      const { default: component } = await importComponent()
+
+      this.setState({
+        component: component,
+      })
+    }
+
+    render() {
+      const C = this.state.component
+
+      // Render the loaded component, or null
+      return C ? <C {...this.props} /> : null
+    }
+  }
+
+  return AsyncComponent
+}