feat(client): lazy load Monaco editor

client/gatsby-node.js

@@ -137,7 +137,7 @@ exports.createPages = function createPages({ graphql, actions }) {
 
 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 
-exports.onCreateWebpackConfig = ({ stage, plugins, actions }) => {
+exports.onCreateWebpackConfig = ({ plugins, actions }) => {
   actions.setWebpackConfig({
     node: {
       fs: 'empty'
@@ -153,24 +153,10 @@ exports.onCreateWebpackConfig = ({ stage, plugins, actions }) => {
           process.env.FREECODECAMP_NODE_ENV || 'development'
         ),
         PAYPAL_SUPPORTERS: JSON.stringify(process.env.PAYPAL_SUPPORTERS || 404)
-      })
+      }),
+      new MonacoWebpackPlugin()
     ]
   });
-  if (stage !== 'build-html') {
-    actions.setWebpackConfig({
-      plugins: [new MonacoWebpackPlugin()]
-    });
-  }
-  if (stage === 'build-html') {
-    actions.setWebpackConfig({
-      plugins: [
-        plugins.normalModuleReplacement(
-          /react-monaco-editor/,
-          require.resolve('./src/__mocks__/monacoEditorMock.js')
-        )
-      ]
-    });
-  }
 };
 
 exports.onCreateBabelConfig = ({ actions }) => {

client/src/__mocks__/monacoEditorMock.js

@@ -1,15 +0,0 @@
-/* eslint-disable */
-import React from 'react';
-
-export default props => {
-  const { width = '100%', height = '100%' } = props;
-  const fixedWidth =
-    width.toString().indexOf('%') !== -1 ? width : `${width}px`;
-  const fixedHeight =
-    height.toString().indexOf('%') !== -1 ? height : `${height}px`;
-  const style = {
-    width: fixedWidth,
-    height: fixedHeight
-  };
-  return <div style={style} className="react-monaco-editor-container" />;
-};

client/src/templates/Challenges/classic/Editor.js

@@ -1,12 +1,13 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component, Suspense } from 'react';
 import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import MonacoEditor from 'react-monaco-editor';
+import { createSelector } from 'reselect';
 
 import { executeChallenge, updateFile } from '../redux';
 import { userSelector } from '../../../redux';
-import { createSelector } from 'reselect';
+
+const MonacoEditor = React.lazy(() => import('react-monaco-editor'));
 
 const propTypes = {
   contents: PropTypes.string,
@@ -45,7 +46,7 @@ const defineMonacoThemes = monaco => {
     return;
   }
   monacoThemesDefined = true;
-  const yellowCollor = 'FFFF00';
+  const yellowColor = 'FFFF00';
   const lightBlueColor = '9CDCFE';
   const darkBlueColor = '00107E';
   monaco.editor.defineTheme('vs-dark-custom', {
@@ -56,9 +57,9 @@ const defineMonacoThemes = monaco => {
     },
     rules: [
       { token: 'delimiter.js', foreground: lightBlueColor },
-      { token: 'delimiter.parenthesis.js', foreground: yellowCollor },
+      { token: 'delimiter.parenthesis.js', foreground: yellowColor },
-      { token: 'delimiter.array.js', foreground: yellowCollor },
+      { token: 'delimiter.array.js', foreground: yellowColor },
-      { token: 'delimiter.bracket.js', foreground: yellowCollor }
+      { token: 'delimiter.bracket.js', foreground: yellowColor }
     ]
   });
   monaco.editor.defineTheme('vs-custom', {
@@ -129,8 +130,7 @@ class Editor extends Component {
     const { contents, ext, theme, fileKey } = this.props;
     const editorTheme = theme === 'night' ? 'vs-dark-custom' : 'vs-custom';
     return (
-      <Fragment>
+      <Suspense fallback={<div />}>
-        <base href='/' />
         <MonacoEditor
           editorDidMount={this.editorDidMount}
           editorWillMount={this.editorWillMount}
@@ -141,7 +141,7 @@ class Editor extends Component {
           theme={editorTheme}
           value={contents}
         />
-      </Fragment>
+      </Suspense>
     );
   }
 }