Dynamic loading for Editor

.babelrc

@@ -1,5 +1,8 @@
 {
-  "presets": ["react", "env"],
+  "presets": [
+    "react",
+    "env"
+  ],
   "plugins": [
     "lodash",
     "styled-components",
@@ -7,11 +10,14 @@
     "transform-es2015-destructuring",
     "transform-object-rest-spread",
     "transform-regenerator",
-    "transform-class-properties"
+    "transform-class-properties",
+    "syntax-dynamic-import"
   ],
   "env": {
     "development": {
-      "presets": ["react-hmre"]
+      "presets": [
+        "react-hmre"
+      ]
     }
   }
 }

app/scenes/Document/Document.js

@@ -25,8 +25,8 @@ import DocumentsStore from 'stores/DocumentsStore';
 import CollectionsStore from 'stores/CollectionsStore';
 import DocumentMenu from 'menus/DocumentMenu';
 import SaveAction from './components/SaveAction';
+import type EditorType from 'components/Editor';
 import LoadingPlaceholder from 'components/LoadingPlaceholder';
-import Editor from 'components/Editor';
 import LoadingIndicator from 'components/LoadingIndicator';
 import Collaborators from 'components/Collaborators';
 import CenteredContent from 'components/CenteredContent';
@@ -56,6 +56,7 @@ class DocumentScene extends Component {
   props: Props;
   savedTimeout: number;
 
+  @observable editorComponent;
   @observable editCache: ?string;
   @observable newDocument: ?Document;
   @observable isLoading = false;
@@ -65,6 +66,7 @@ class DocumentScene extends Component {
 
   componentDidMount() {
     this.loadDocument(this.props);
+    this.loadEditor();
   }
 
   componentWillReceiveProps(nextProps) {
@@ -128,6 +130,11 @@ class DocumentScene extends Component {
     }
   };
 
+  loadEditor = async () => {
+    const EditorImport = await import('components/Editor');
+    this.editorComponent = EditorImport.default;
+  };
+
   get isEditing() {
     return (
       this.props.match.path === matchDocumentEdit || this.props.newDocument
@@ -208,6 +215,7 @@ class DocumentScene extends Component {
   }
 
   render() {
+    const Editor = this.editorComponent;
     const isNew = this.props.newDocument;
     const isMoving = this.props.match.path === matchDocumentMove;
     const document = this.document;
@@ -225,7 +233,7 @@ class DocumentScene extends Component {
           {isMoving && document && <DocumentMove document={document} />}
           {titleText && <PageTitle title={titleText} />}
           {(this.isLoading || this.isSaving) && <LoadingIndicator />}
-          {!document ? (
+          {!document || !Editor ? (
             <CenteredContent>
               <LoadingState />
             </CenteredContent>

package.json

@@ -68,6 +68,7 @@
     "babel-loader": "^7.1.2",
     "babel-plugin-lodash": "^3.2.11",
     "babel-plugin-styled-components": "^1.1.7",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-decorators-legacy": "1.3.4",
     "babel-plugin-transform-es2015-destructuring": "^6.23.0",

yarn.lock

@@ -697,6 +697,10 @@ babel-plugin-syntax-decorators@^6.1.18:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz#312563b4dbde3cc806cee3e416cceeaddd11ac0b"
 
+babel-plugin-syntax-dynamic-import@^6.18.0:
+  version "6.18.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz#8d6a26229c83745a9982a441051572caa179b1da"
+
 babel-plugin-syntax-exponentiation-operator@^6.8.0:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"