From b3c483cccaced9917ff48efd4b86b8829c674e9e Mon Sep 17 00:00:00 2001
From: Kurt Hutten <kurt@kurthutten.com>
Date: Wed, 17 Mar 2021 06:59:03 +1100
Subject: [PATCH] Make monaco lazy

---
 web/src/components/IdeContainer/IdeContainer.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/web/src/components/IdeContainer/IdeContainer.js b/web/src/components/IdeContainer/IdeContainer.js
index 08127d6..fb92fa5 100644
--- a/web/src/components/IdeContainer/IdeContainer.js
+++ b/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 />,
 }