Lazy load monaco editor

related to #262

web/src/components/IdeEditor/IdeEditor.js

@@ -1,7 +1,7 @@
-import { useContext, useEffect } from 'react'
+import { useContext, useEffect, Suspense, lazy } from 'react'
 import { isBrowser } from '@redwoodjs/prerender/browserUtils'
 import { IdeContext } from 'src/components/IdeToolbarNew'
-import Editor from '@monaco-editor/react'
+const Editor = lazy(() => import('@monaco-editor/react'))
 
 const IdeEditor = () => {
   const { state, dispatch } = useContext(IdeContext)
@@ -39,12 +39,14 @@ const IdeEditor = () => {
 
   return (
     <div className="h-full" onKeyDown={handleSaveHotkey}>
-      <Editor
-        defaultValue={state.code}
-        // TODO #247 cpp seems better than js for the time being
-        defaultLanguage="cpp"
-        onChange={handleCodeChange}
-      />
+      <Suspense fallback={<div>. . . loading</div>}>
+        <Editor
+          defaultValue={state.code}
+          // TODO #247 cpp seems better than js for the time being
+          defaultLanguage="cpp"
+          onChange={handleCodeChange}
+        />
+      </Suspense>
     </div>
   )
 }

web/src/helpers/cascadeController.js

@@ -17,7 +17,7 @@ class CascadeController {
     // only inits on first call, after that it just updates the editor and revaluates code, maybe should rename?
     this.incomingOnCodeChang = onCodeChange
     if (!this._hasInitialised) {
-      new initialize(this.controllerOnCodeChange, code, onInit)
+      initialize(this.controllerOnCodeChange, code, onInit)
       this._hasInitialised = true
       return
     }
@@ -25,23 +25,28 @@ class CascadeController {
   }
 
   capture(environment, width = 512, height = 384) {
-    environment.camera.aspect = width / height;
-    environment.camera.updateProjectionMatrix();
-    environment.renderer.setSize(width, height);
-    environment.renderer.render(environment.scene, environment.camera, null, false);
+    environment.camera.aspect = width / height
+    environment.camera.updateProjectionMatrix()
+    environment.renderer.setSize(width, height)
+    environment.renderer.render(
+      environment.scene,
+      environment.camera,
+      null,
+      false
+    )
     let imgBlob = new Promise((resolve, reject) => {
       environment.renderer.domElement.toBlob(
         (blob) => {
-          blob.name = `part_capture-${ Date.now() }`
+          blob.name = `part_capture-${Date.now()}`
           resolve(blob)
         },
         'image/jpeg',
         1
-      );
+      )
     })
 
     // Return to original dimensions
-    environment.onWindowResize();
+    environment.onWindowResize()
 
     return imgBlob
   }