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/scenes/Document/components/Editor.js

@@ -3,7 +3,6 @@ import { observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
 import Textarea from "react-autosize-textarea";
-import RichMarkdownEditor from "rich-markdown-editor";
 import styled from "styled-components";
 import parseTitle from "shared/utils/parseTitle";
 import Document from "models/Document";
@@ -12,6 +11,7 @@ import DocumentMetaWithViews from "components/DocumentMetaWithViews";
 import Editor from "components/Editor";
 import Flex from "components/Flex";
 import HoverPreview from "components/HoverPreview";
+import LoadingPlaceholder from "components/LoadingPlaceholder";
 import { documentHistoryUrl } from "utils/routeHelpers";
 
 type Props = {
@@ -27,7 +27,7 @@ type Props = {
 @observer
 class DocumentEditor extends React.Component<Props> {
   @observable activeLinkEvent: ?MouseEvent;
-  editor = React.createRef<RichMarkdownEditor>();
+  editor = React.createRef<any>();
 
   focusAtStart = () => {
     if (this.editor.current) {
@@ -78,39 +78,43 @@ class DocumentEditor extends React.Component<Props> {
 
     return (
       <Flex auto column>
-        <Title
-          type="text"
-          onChange={onChangeTitle}
-          onKeyDown={this.handleTitleKeyDown}
-          placeholder={document.placeholder}
-          value={!title && readOnly ? document.titleWithDefault : title}
-          style={startsWithEmojiAndSpace ? { marginLeft: "-1.2em" } : undefined}
-          readOnly={readOnly}
-          autoFocus={!title}
-          maxLength={100}
-        />
-        <DocumentMetaWithViews
-          isDraft={isDraft}
-          document={document}
-          to={documentHistoryUrl(document)}
-        />
-        <Editor
-          ref={this.editor}
-          autoFocus={title && !this.props.defaultValue}
-          placeholder="…the rest is up to you"
-          onHoverLink={this.handleLinkActive}
-          scrollTo={window.location.hash}
-          grow
-          {...this.props}
-        />
-        {!readOnly && <ClickablePadding onClick={this.focusAtEnd} grow />}
-        {this.activeLinkEvent && !isShare && readOnly && (
-          <HoverPreview
-            node={this.activeLinkEvent.target}
-            event={this.activeLinkEvent}
-            onClose={this.handleLinkInactive}
+        <React.Suspense fallback={<LoadingPlaceholder />}>
+          <Title
+            type="text"
+            onChange={onChangeTitle}
+            onKeyDown={this.handleTitleKeyDown}
+            placeholder={document.placeholder}
+            value={!title && readOnly ? document.titleWithDefault : title}
+            style={
+              startsWithEmojiAndSpace ? { marginLeft: "-1.2em" } : undefined
+            }
+            readOnly={readOnly}
+            autoFocus={!title}
+            maxLength={100}
           />
-        )}
+          <DocumentMetaWithViews
+            isDraft={isDraft}
+            document={document}
+            to={documentHistoryUrl(document)}
+          />
+          <Editor
+            ref={this.editor}
+            autoFocus={title && !this.props.defaultValue}
+            placeholder="…the rest is up to you"
+            onHoverLink={this.handleLinkActive}
+            scrollTo={window.location.hash}
+            grow
+            {...this.props}
+          />
+          {!readOnly && <ClickablePadding onClick={this.focusAtEnd} grow />}
+          {this.activeLinkEvent && !isShare && readOnly && (
+            <HoverPreview
+              node={this.activeLinkEvent.target}
+              event={this.activeLinkEvent}
+              onClose={this.handleLinkInactive}
+            />
+          )}
+        </React.Suspense>
       </Flex>
     );
   }