diff --git a/client/package-lock.json b/client/package-lock.json index 28c3f9f777..f536bf9565 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -1740,6 +1740,16 @@ "@types/yargs": "^13.0.0" } }, + "@loadable/component": { + "version": "5.13.1", + "resolved": "https://registry.npmjs.org/@loadable/component/-/component-5.13.1.tgz", + "integrity": "sha512-qTNfTv5bVfb9eTKNUOMzPweRnxzNaxCmLZEsFEMn+kxpd86iXae+IpibXFJlnb052Q4fVkcWM2tvmWLc/+HzLg==", + "requires": { + "@babel/runtime": "^7.7.7", + "hoist-non-react-statics": "^3.3.1", + "react-is": "^16.12.0" + } + }, "@mdx-js/mdx": { "version": "1.6.1", "resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-1.6.1.tgz", diff --git a/client/package.json b/client/package.json index c7793ce636..311ad9727a 100644 --- a/client/package.json +++ b/client/package.json @@ -17,6 +17,7 @@ "@freecodecamp/loop-protect": "^2.2.1", "@freecodecamp/react-bootstrap": "^0.32.3", "@freecodecamp/react-calendar-heatmap": "^1.0.0", + "@loadable/component": "^5.13.1", "@reach/router": "^1.2.1", "algoliasearch": "^3.35.1", "axios": "^0.19.0", diff --git a/client/src/templates/Challenges/classic/Editor.js b/client/src/templates/Challenges/classic/Editor.js index 4b66fdabe3..31d2265e6d 100644 --- a/client/src/templates/Challenges/classic/Editor.js +++ b/client/src/templates/Challenges/classic/Editor.js @@ -3,6 +3,7 @@ import PropTypes from 'prop-types'; import { connect } from 'react-redux'; import { createSelector } from 'reselect'; import isEqual from 'lodash/isEqual'; +import Loadable from '@loadable/component'; import { canFocusEditorSelector, @@ -20,7 +21,7 @@ import { toSortedArray } from '../../../../../utils/sort-files'; import './editor.css'; -const MonacoEditor = React.lazy(() => import('react-monaco-editor')); +const MonacoEditor = Loadable(() => import('react-monaco-editor')); const propTypes = { canFocus: PropTypes.bool,