web/src/components/IdeContainer/IdeContainer.js

@@ -1,13 +1,20 @@
-import { useContext, useRef, useEffect } from 'react'
+import { useContext, useRef, useEffect, lazy, Suspense } from 'react'
 import { Mosaic, MosaicWindow } from 'react-mosaic-component'
 import { IdeContext } from 'src/components/IdeToolbarNew'
-import IdeEditor from 'src/components/IdeEditor'
 import IdeViewer from 'src/components/IdeViewer'
 import IdeConsole from 'src/components/IdeConsole'
 import 'react-mosaic-component/react-mosaic-component.css'
 
+const IdeEditor = lazy(() => import('../IdeEditor/IdeEditor'))
+
+const LazyEditor = () => (
+  <Suspense fallback={<div>...loading</div>}>
+    <IdeEditor />
+  </Suspense>
+)
+
 const ELEMENT_MAP = {
-  Editor: <IdeEditor />,
+  Editor: <LazyEditor />,
   Viewer: <IdeViewer />,
   Console: <IdeConsole />,
 }

web/src/helpers/cascadeController.js

@@ -1,5 +1,5 @@
 import { initialize } from 'src/cascade/js/MainPage/CascadeMain'
-import { monacoEditor } from 'src/cascade/js/MainPage/CascadeState'
+//
 
 class CascadeController {
   _hasInitialised = false
@@ -9,8 +9,10 @@ class CascadeController {
   }
 
   initialise(onCodeChange, code) {
-    const onInit = () => {
+    const monacoEditorPromise = import('src/cascade/js/MainPage/CascadeState')
-      const editor = monacoEditor
+    const onInit = async () => {
+      const awaitedEditor = await monacoEditorPromise
+      const editor = await awaitedEditor.monacoEditor
       editor.setValue(code)
       editor.evaluateCode(false)
     }