chore: lazy load editor

Signed-off-by: Amy <amy+git@amogus.cloud>

Author: amycatgirl

packages/client/components/app/interface/settings/user/appearance/AppearanceMenu.tsx

@@ -1,4 +1,12 @@
-import { For, Match, Show, Switch, createSignal } from "solid-js";
+import {
+  For,
+  Match,
+  Show,
+  Suspense,
+  Switch,
+  createSignal,
+  lazy,
+} from "solid-js";
 
 import { Trans } from "@lingui-solid/solid/macro";
 import { css } from "styled-system/css";
@@ -30,10 +38,12 @@ import {
   MONOSPACE_FONT_KEYS,
   MonospaceFonts,
 } from "@revolt/ui/themes/fonts";
-import { MonacoEditor } from "@revolt/ui/components/features/monaco/Monaco";
 
 import MDPalette from "@material-design-icons/svg/outlined/palette.svg?component-solid";
 
+const MonacoEditor = lazy(
+  () => import("@revolt/ui/components/features/monaco/Monaco"),
+);
 /**
  * All appearance options for the client
  */
@@ -412,9 +422,15 @@ export function AppearanceMenu() {
         <Text class="label">
           <Trans>Custom CSS (WIP)</Trans>
         </Text>
-        <MonacoEditor defaultValue={state.theme.customCSS} onChange={(_, model) => {
-          state.theme.customCSS = model?.getValue() ?? state.theme.customCSS
-        }} />
+        <Suspense>
+          <MonacoEditor
+            defaultValue={state.theme.customCSS}
+            onChange={(_, model) => {
+              state.theme.customCSS =
+                model?.getValue() ?? state.theme.customCSS;
+            }}
+          />
+        </Suspense>
       </Column>
     </Column>
   );

packages/client/components/ui/components/features/monaco/Monaco.tsx

@@ -1,60 +1,72 @@
-import { onCleanup, onMount } from "solid-js";
 import * as monaco from "monaco-editor";
-import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
-import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
+import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
+import { onCleanup, onMount } from "solid-js";
 
 import { cva } from "styled-system/css";
 
 type Props = {
-  defaultValue: string
-  onChange?: (event: monaco.editor.IModelContentChangedEvent, editor: monaco.editor.IModel | null) => void
-}
+  defaultValue: string;
+  onChange?: (
+    event: monaco.editor.IModelContentChangedEvent,
+    editor: monaco.editor.IModel | null,
+  ) => void;
+};
 
 self.MonacoEnvironment = {
   getWorker(_, label) {
     if (label == "css") {
-      return new cssWorker()
+      return new cssWorker();
     }
 
-    return new editorWorker()
-  }
-}
+    return new editorWorker();
+  },
+};
 
 const monacoStyle = cva({
   base: {
     width: "100%",
     height: "600px",
-    border: "1px solid #ccc"
-  }
-})
+    border: "1px solid #ccc",
+  },
+});
 
-export function MonacoEditor(props: Props) {
-  let element!: HTMLDivElement
+/**
+ * Monaco Editor wrapper
+ */
+export default function MonacoEditor(props: Props) {
+  let element!: HTMLDivElement;
   let editor: monaco.editor.IStandaloneCodeEditor;
-  let disposables: (monaco.IDisposable | undefined)[] = [];
+  const disposables: (monaco.IDisposable | undefined)[] = [];
 
   onMount(() => {
     if (element?.isConnected) {
-        editor = monaco.editor.create(element, {
-            value: props.defaultValue,
-            language: 'css',
-        })
+      editor = monaco.editor.create(element, {
+        value: props.defaultValue,
+        language: "css",
+      });
 
       if (props.onChange) {
-        disposables.push(editor.getModel()?.onDidChangeContent((ev) => props.onChange!(ev, editor.getModel())));
+        disposables.push(
+          editor
+            .getModel()
+            ?.onDidChangeContent((ev) =>
+              props.onChange!(ev, editor.getModel()),
+            ),
+        );
       }
     }
-  })
+  });
 
   onCleanup(() => {
     for (const disposable of disposables) {
       if (!disposable) continue;
 
-      disposable.dispose()
+      disposable.dispose();
     }
 
     editor.dispose();
-  })
+  });
 
-  return <div class={"monaco " + monacoStyle()} ref={element} />
+  return <div class={"monaco " + monacoStyle()} ref={element} />;
 }