Lazy-load codemirror for bot editing

2026-05-07 13:55:12 +02:00 · 2026-01-27 17:31:34 -08:00
parent 63604aee14
commit 31e31ee7da
11 changed files with 638 additions and 606 deletions
@@ -13,8 +13,8 @@
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="manifest" href="/site.webmanifest" />
-    <script type="module" crossorigin src="/assets/index-DGSv1YM9.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-C2JfQbTz.css">
+    <script type="module" crossorigin src="/assets/index-LNhn5rJq.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-9kq4Muxx.css">
  </head>
  <body>
    <div id="root"></div>
@@ -0,0 +1,28 @@
+import CodeMirror from '@uiw/react-codemirror';
+import { python } from '@codemirror/lang-python';
+import { oneDark } from '@codemirror/theme-one-dark';
+
+interface BotCodeEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+  id?: string;
+}
+
+export function BotCodeEditor({ value, onChange, id }: BotCodeEditorProps) {
+  return (
+    <CodeMirror
+      value={value}
+      onChange={onChange}
+      extensions={[python()]}
+      theme={oneDark}
+      height="256px"
+      basicSetup={{
+        lineNumbers: true,
+        foldGutter: false,
+        highlightActiveLine: true,
+      }}
+      className="rounded-md border border-input overflow-hidden text-sm"
+      id={id}
+    />
+  );
+}
@@ -1,7 +1,8 @@
-import { useState, useEffect, useMemo } from 'react';
-import CodeMirror from '@uiw/react-codemirror';
-import { python } from '@codemirror/lang-python';
-import { oneDark } from '@codemirror/theme-one-dark';
+import { useState, useEffect, useMemo, lazy, Suspense } from 'react';
+
+const BotCodeEditor = lazy(() =>
+  import('./BotCodeEditor').then((m) => ({ default: m.BotCodeEditor }))
+);
 import type {
  AppSettings,
  AppSettingsUpdate,
@@ -983,19 +984,19 @@ export function SettingsModal({
                              Reset to Example
                            </Button>
                          </div>
-                          <CodeMirror
-                            value={bot.code}
-                            onChange={(code) => handleBotCodeChange(bot.id, code)}
-                            extensions={[python()]}
-                            theme={oneDark}
-                            height="256px"
-                            basicSetup={{
-                              lineNumbers: true,
-                              foldGutter: false,
-                              highlightActiveLine: true,
-                            }}
-                            className="rounded-md border border-input overflow-hidden text-sm"
-                          />
+                          <Suspense
+                            fallback={
+                              <div className="h-64 rounded-md border border-input bg-[#282c34] flex items-center justify-center text-muted-foreground">
+                                Loading editor...
+                              </div>
+                            }
+                          >
+                            <BotCodeEditor
+                              value={bot.code}
+                              onChange={(code) => handleBotCodeChange(bot.id, code)}
+                              id={`bot-code-${bot.id}`}
+                            />
+                          </Suspense>
                        </div>
                      )}
                    </div>