From 1e5a1622fba2902efea2ef80aa85a8cf846a9b8b Mon Sep 17 00:00:00 2001
From: Sam Wright <sam@sams-mbp.lan>
Date: Thu, 20 Jun 2024 01:36:07 +1000
Subject: [PATCH] Add lazy loading

---
 web/src/components/code_editor/CodeEditor.tsx       | 8 ++++----
 web/src/components/code_editor/CodeMirrorEditor.tsx | 2 +-
 web/src/components/code_editor/MonacoEditor.tsx     | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/web/src/components/code_editor/CodeEditor.tsx b/web/src/components/code_editor/CodeEditor.tsx
index 78b560382..c815c8138 100644
--- a/web/src/components/code_editor/CodeEditor.tsx
+++ b/web/src/components/code_editor/CodeEditor.tsx
@@ -1,6 +1,6 @@
 import { isDesktop } from "react-device-detect";
-import { MonacoEditor } from "./MonacoEditor";
-import { CodeMirrorEditor } from "./CodeMirrorEditor";
+import { lazy } from "react";
+import MonacoEditor from "./MonacoEditor";
 
 /**
  * Provides an interface for a Code Editor, to enable easy swapping between different implementations
@@ -18,6 +18,6 @@ export type CodeEditorProps = {
  *
  * It would be great to revisit this in in the future if/when Monaco improves mobile support.
  */
-export const CodeEditor: (props: CodeEditorProps) => JSX.Element = isDesktop
+export const CodeEditor: (props: CodeEditorProps) => React.ReactNode = isDesktop
   ? MonacoEditor
-  : CodeMirrorEditor;
+  : lazy(() => import("./CodeMirrorEditor"));
diff --git a/web/src/components/code_editor/CodeMirrorEditor.tsx b/web/src/components/code_editor/CodeMirrorEditor.tsx
index 6df71d6cb..33078bac1 100644
--- a/web/src/components/code_editor/CodeMirrorEditor.tsx
+++ b/web/src/components/code_editor/CodeMirrorEditor.tsx
@@ -41,7 +41,7 @@ import { useTheme } from "@/context/theme-provider";
  * Uses `CodeMirror` as a code editor implementation.
  * Currently doesn't support yaml schema validation or linting.
  */
-export function CodeMirrorEditor({
+export default function CodeMirrorEditor({
   initialContent,
   onDidChangeContent,
 }: Omit<CodeEditorProps, "schemaUrl">) {
diff --git a/web/src/components/code_editor/MonacoEditor.tsx b/web/src/components/code_editor/MonacoEditor.tsx
index 1b56b9f34..1798ece5d 100644
--- a/web/src/components/code_editor/MonacoEditor.tsx
+++ b/web/src/components/code_editor/MonacoEditor.tsx
@@ -4,7 +4,7 @@ import { configureMonacoYaml } from "monaco-yaml";
 import { useEffect, useRef, useState } from "react";
 import type { CodeEditorProps } from "./CodeEditor";
 
-export function MonacoEditor({
+export default function MonacoEditor({
   initialContent,
   yamlSchemaUrl,
   onDidChangeContent,