Adding module loading flow

src/components/App/index.js

@@ -1,16 +1,49 @@
 import React from 'react';
+import * as Sentry from '@sentry/browser';
 
 import { AppContextProvider } from 'components/AppContext';
 import Form from 'components/Form';
 import Loader from 'components/Loader';
 import Message from 'components/Message';
-import Render from 'components/Render';
 
 class App extends React.PureComponent {
-  state={}
+  state = {
+    loading: false,
+    loadingError: null,
+    Render: null
+  }
 
-  handleRender = ({ syntax, expr }) => {
+  handleRender = async ({ syntax, expr }) => {
-    this.setState({ syntax, expr });
+    this.setState({
+      syntax,
+      expr,
+      loading: true,
+      loadingError: null,
+      Render: null
+    });
+
+    try {
+      const Render = await import(
+        /* webpackChunkName: "render-[index]" */
+        'components/Render' // TODO: Import syntax-specific render component
+      );
+
+      // HACK: Fake loading time
+      await new Promise(resolve => setTimeout(resolve, 2000));
+
+      this.setState({
+        loading: false,
+        Render: Render.default
+      });
+    }
+    catch (e) {
+      Sentry.captureException(e, { syntax });
+      this.setState({
+        loading: false,
+        loadingError: e
+      });
+      throw e;
+    }
   }
 
   handleRetry = event => {
@@ -19,17 +52,23 @@ class App extends React.PureComponent {
   }
 
   render() {
+    const {
+      loading,
+      loadingError,
+      Render
+    } = this.state;
+
     return <AppContextProvider onExpressionChange={ this.handleRender }>
       <Form />
 
-      <Loader />
+      { loading && <Loader /> }
 
-      <Message type="error" heading="Render Failure">
+      { loadingError && <Message type="error" heading="Render Failure">
         <p>An error occurred while rendering the regular expression.</p>
         <a href="#retry" onClick={ this.handleRetry }>Retry</a>
-      </Message>
+      </Message> }
 
-      <Render />
+      { Render && <Render /> }
     </AppContextProvider>;
   }
 }