From de7ab8f7ac6a9125efd6d6fad47b2dd4bff6c21b Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 24 Aug 2017 19:05:57 -0300
Subject: [PATCH] With fancy lazy load for the Markdown Editor :D

---
 client/.babelrc                               |  3 +-
 .../components/QuestionBoxBuilder.js          | 29 +++++++++++++++++--
 package.json                                  |  1 +
 3 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/client/.babelrc b/client/.babelrc
index 60be246eb..2af1a3dad 100644
--- a/client/.babelrc
+++ b/client/.babelrc
@@ -9,6 +9,7 @@
     "transform-object-assign",
     "transform-object-rest-spread",
     "transform-async-to-generator",
-    "transform-react-jsx"
+    "transform-react-jsx",
+    "syntax-dynamic-import"
   ]
 }
\ No newline at end of file
diff --git a/client/coral-configure/components/QuestionBoxBuilder.js b/client/coral-configure/components/QuestionBoxBuilder.js
index 5444102d2..d3285b173 100644
--- a/client/coral-configure/components/QuestionBoxBuilder.js
+++ b/client/coral-configure/components/QuestionBoxBuilder.js
@@ -4,11 +4,36 @@ import {Icon} from 'coral-ui';
 import DefaultIcon from './DefaultIcon';
 import cn from 'classnames';
 import styles from './QuestionBoxBuilder.css';
-import MarkdownEditor from 'coral-framework/components/MarkdownEditor';
 
 class QuestionBoxBuilder extends React.Component {
+  constructor() {
+    super();
+    
+    this.state = {
+      loading: true
+    };
+  }
+
+  componentWillMount() {
+    this.loadEditor();
+  }
+  
+  async loadEditor() {
+    const MarkdownEditor = await import('coral-framework/components/MarkdownEditor');
+
+    return this.setState({
+      loading : false,
+      MarkdownEditor
+    });
+  }
+
   render() {
     const {handleChange, questionBoxIcon, questionBoxContent} = this.props;
+    const {loading, MarkdownEditor} = this.state;
+
+    if (loading) {
+      return <div> Loading </div>;
+    }
 
     return (
       <div className={styles.qbBuilder}>
@@ -64,7 +89,7 @@ class QuestionBoxBuilder extends React.Component {
           value={questionBoxContent}
           onChange={(value) => handleChange({}, {questionBoxContent: value})}
         />
-
+      
       </div>
     );
   }
diff --git a/package.json b/package.json
index 71477361e..09980841d 100644
--- a/package.json
+++ b/package.json
@@ -144,6 +144,7 @@
     "babel-jest": "^19.0.0",
     "babel-loader": "^6.4.1",
     "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-plugin-transform-async-to-generator": "^6.16.0",
     "babel-plugin-transform-class-properties": "^6.23.0",
     "babel-plugin-transform-decorators-legacy": "^1.3.4",