perf: Reduce initial bundle size / async bundle loading (#1456)

* feat: Move to React.lazy

* perf: Remove duplicate babel/runtime

* fix: Run yarn-deduplicate

* Further attempts to remove rich-markdown-editor from initial chunk

* perf: Lazy loading of authenticated routes

* perf: Move color picker to async loading
fix: Display placeholder when loading rich editor

* fix: Cache bust on auto reload

app/components/InputRich.js

@@ -4,6 +4,8 @@ import { observer, inject } from "mobx-react";
 import * as React from "react";
 import styled, { withTheme } from "styled-components";
 import UiStore from "stores/UiStore";
+import Editor from "components/Editor";
+import HelpText from "components/HelpText";
 import { LabelText, Outline } from "components/Input";
 
 type Props = {
@@ -19,10 +21,6 @@ class InputRich extends React.Component<Props> {
   @observable editorComponent: React.ComponentType<any>;
   @observable focused: boolean = false;
 
-  componentDidMount() {
-    this.loadEditor();
-  }
-
   handleBlur = () => {
     this.focused = false;
   };
@@ -31,36 +29,18 @@ class InputRich extends React.Component<Props> {
     this.focused = true;
   };
 
-  loadEditor = async () => {
-    try {
-      const EditorImport = await import("./Editor");
-      this.editorComponent = EditorImport.default;
-    } catch (err) {
-      if (err.message && err.message.match(/chunk/)) {
-        // If the editor bundle fails to load then reload the entire window. This
-        // can happen if a deploy happens between the user loading the initial JS
-        // bundle and the async-loaded editor JS bundle as the hash will change.
-        window.location.reload();
-        return;
-      }
-      throw err;
-    }
-  };
-
   render() {
     const { label, minHeight, maxHeight, ui, ...rest } = this.props;
-    const Editor = this.editorComponent;
 
     return (
       <>
         <LabelText>{label}</LabelText>
-
         <StyledOutline
           maxHeight={maxHeight}
           minHeight={minHeight}
           focused={this.focused}
         >
-          {Editor ? (
+          <React.Suspense fallback={<HelpText>Loading editor…</HelpText>}>
             <Editor
               onBlur={this.handleBlur}
               onFocus={this.handleFocus}
@@ -68,9 +48,7 @@ class InputRich extends React.Component<Props> {
               grow
               {...rest}
             />
-          ) : (
-            "Loading…"
-          )}
+          </React.Suspense>
         </StyledOutline>
       </>
     );