diff --git a/client/coral-embed-stream/src/tabs/configure/components/QuestionBoxBuilder.js b/client/coral-embed-stream/src/tabs/configure/components/QuestionBoxBuilder.js
index ae60770d4..e87e7b321 100644
--- a/client/coral-embed-stream/src/tabs/configure/components/QuestionBoxBuilder.js
+++ b/client/coral-embed-stream/src/tabs/configure/components/QuestionBoxBuilder.js
@@ -1,85 +1,11 @@
-import React from 'react';
-import QuestionBox from '../../../components/QuestionBox';
-import { Icon, Spinner } from 'coral-ui';
-import DefaultQuestionBoxIcon from '../../../components/DefaultQuestionBoxIcon';
-import cn from 'classnames';
-import styles from './QuestionBoxBuilder.css';
+import { Spinner } from 'coral-ui';
+import Loadable from 'react-loadable';
-const DefaultIcon = ;
-
-const icons = [{ default: DefaultIcon }, 'forum', 'build', 'format_quote'];
-
-class QuestionBoxBuilder extends React.Component {
- constructor() {
- super();
-
- this.state = {
- loading: true,
- };
- }
-
- componentWillMount() {
- this.loadEditor();
- }
-
- async loadEditor() {
- const {
- default: MarkdownEditor,
- } = await import(/* webpackChunkName: "markdownEditor" */
- 'coral-framework/components/MarkdownEditor');
-
- return this.setState({
- loading: false,
- MarkdownEditor,
- });
- }
-
- render() {
- const {
- questionBoxIcon,
- questionBoxContent,
- onContentChange,
- onIconChange,
- } = this.props;
- const { loading, MarkdownEditor } = this.state;
-
- if (loading) {
- return ;
- }
-
- return (
-
-
Include an Icon
-
-
- {icons.map(item => {
- const name = typeof item === 'object' ? Object.keys(item)[0] : item;
- const icon = typeof item === 'object' ? item[name] : item;
- return (
- -
-
-
- );
- })}
-
-
-
-
-
-
- );
- }
-}
+const QuestionBoxBuilder = Loadable({
+ loader: () =>
+ import(/* webpackChunkName: "questionBoxBuilder" */
+ './loadable/QuestionBoxBuilder'),
+ loading: Spinner,
+});
export default QuestionBoxBuilder;
diff --git a/client/coral-embed-stream/src/tabs/configure/components/QuestionBoxBuilder.css b/client/coral-embed-stream/src/tabs/configure/components/loadable/QuestionBoxBuilder.css
similarity index 100%
rename from client/coral-embed-stream/src/tabs/configure/components/QuestionBoxBuilder.css
rename to client/coral-embed-stream/src/tabs/configure/components/loadable/QuestionBoxBuilder.css
diff --git a/client/coral-embed-stream/src/tabs/configure/components/loadable/QuestionBoxBuilder.js b/client/coral-embed-stream/src/tabs/configure/components/loadable/QuestionBoxBuilder.js
new file mode 100644
index 000000000..837de1280
--- /dev/null
+++ b/client/coral-embed-stream/src/tabs/configure/components/loadable/QuestionBoxBuilder.js
@@ -0,0 +1,56 @@
+import React from 'react';
+import QuestionBox from '../../../../components/QuestionBox';
+import DefaultQuestionBoxIcon from '../../../../components/DefaultQuestionBoxIcon';
+import cn from 'classnames';
+import styles from './QuestionBoxBuilder.css';
+import { Icon } from 'coral-ui';
+import MarkdownEditor from 'coral-framework/components/MarkdownEditor';
+
+const DefaultIcon = ;
+const icons = [{ default: DefaultIcon }, 'forum', 'build', 'format_quote'];
+
+class QuestionBoxBuilder extends React.Component {
+ render() {
+ const {
+ questionBoxIcon,
+ questionBoxContent,
+ onContentChange,
+ onIconChange,
+ } = this.props;
+
+ return (
+
+
Include an Icon
+
+
+ {icons.map(item => {
+ const name = typeof item === 'object' ? Object.keys(item)[0] : item;
+ const icon = typeof item === 'object' ? item[name] : item;
+ return (
+ -
+
+
+ );
+ })}
+
+
+
+
+
+
+ );
+ }
+}
+
+export default QuestionBoxBuilder;
diff --git a/package.json b/package.json
index a807d3321..a3d5f665e 100644
--- a/package.json
+++ b/package.json
@@ -165,6 +165,7 @@
"react-broadcast": "^0.6.2",
"react-dom": "^15.4.2",
"react-input-autosize": "^1.1.4",
+ "react-loadable": "^5.3.1",
"react-mdl": "^1.11.0",
"react-mdl-selectfield": "^0.2.0",
"react-paginate": "^5.0.0",
diff --git a/webpack.config.js b/webpack.config.js
index 184107491..d6f216d02 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -335,7 +335,8 @@ module.exports = [
{
output: {
library: 'Coral',
- // don't hash the embed.
+ // don't hash the embed, cache-busting must be completed by the requester
+ // as this lives in a static template on the embed site.
filename: '[name].js',
},
plugins: [
diff --git a/yarn.lock b/yarn.lock
index 342529006..fd501351e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9217,6 +9217,12 @@ react-linkify@^0.2.1:
prop-types "^15.5.8"
tlds "^1.57.0"
+react-loadable@^5.3.1:
+ version "5.3.1"
+ resolved "https://registry.yarnpkg.com/react-loadable/-/react-loadable-5.3.1.tgz#9699e9a08fed49bacd69caaa282034b62a76bcdd"
+ dependencies:
+ prop-types "^15.5.0"
+
react-mdl-selectfield@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/react-mdl-selectfield/-/react-mdl-selectfield-0.2.0.tgz#36e1a97233036c057ab2bdb31ec09ad8d9988411"