From dab4093103aa4798670f263ab9588142b142cca0 Mon Sep 17 00:00:00 2001
From: Henry Li <henry1943@163.com>
Date: Wed, 28 Jan 2026 10:13:17 +0800
Subject: [PATCH] feat: fallback to textarea when loading

---
 .../src/components/workspace/code-editor.tsx  | 70 ++++++++++++-------
 1 file changed, 44 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/workspace/code-editor.tsx b/frontend/src/components/workspace/code-editor.tsx
index 345dcfc..2004f70 100644
--- a/frontend/src/components/workspace/code-editor.tsx
+++ b/frontend/src/components/workspace/code-editor.tsx
@@ -1,19 +1,22 @@
 "use client";
 
-import CodeMirror from "@uiw/react-codemirror";
+import { css } from "@codemirror/lang-css";
+import { html } from "@codemirror/lang-html";
+import { javascript, javascriptLanguage } from "@codemirror/lang-javascript";
+import { json } from "@codemirror/lang-json";
+import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
+import { python } from "@codemirror/lang-python";
 import { languages } from "@codemirror/language-data";
 import { basicLightInit } from "@uiw/codemirror-theme-basic";
 import { monokaiInit } from "@uiw/codemirror-theme-monokai";
-import { javascript, javascriptLanguage } from "@codemirror/lang-javascript";
-import { json } from "@codemirror/lang-json";
-import { html } from "@codemirror/lang-html";
-import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
-import { python } from "@codemirror/lang-python";
-import { css } from "@codemirror/lang-css";
+import CodeMirror from "@uiw/react-codemirror";
 import { useTheme } from "next-themes";
+import { useMemo } from "react";
 
 import { cn } from "@/lib/utils";
-import { useMemo } from "react";
+
+import { Textarea } from "../ui/textarea";
+import { useThread } from "./messages/context";
 const customDarkTheme = monokaiInit({
   settings: {
     background: "transparent",
@@ -48,6 +51,9 @@ export function CodeEditor({
   autoFocus?: boolean;
   settings?: any;
 }) {
+  const {
+    thread: { isLoading },
+  } = useThread();
   const { resolvedTheme } = useTheme();
 
   const extensions = useMemo(() => {
@@ -71,24 +77,36 @@ export function CodeEditor({
         className,
       )}
     >
-      <CodeMirror
-        readOnly={readonly ?? disabled}
-        placeholder={placeholder}
-        className={cn(
-          "h-full overflow-auto font-mono [&_.cm-editor]:h-full [&_.cm-focused]:outline-none!",
-          "px-2 py-0! [&_.cm-line]:px-2! [&_.cm-line]:py-0!",
-        )}
-        theme={resolvedTheme === "dark" ? customDarkTheme : customLightTheme}
-        extensions={extensions}
-        basicSetup={{
-          foldGutter: settings?.foldGutter ?? false,
-          highlightActiveLine: false,
-          highlightActiveLineGutter: false,
-          lineNumbers: settings?.lineNumbers ?? false,
-        }}
-        autoFocus={autoFocus}
-        value={value}
-      />
+      {isLoading ? (
+        <Textarea
+          className={cn(
+            "h-full overflow-auto font-mono [&_.cm-editor]:h-full [&_.cm-focused]:outline-none!",
+            "resize-none p-4! [&_.cm-line]:px-2! [&_.cm-line]:py-0!",
+            "border-none",
+          )}
+          readOnly
+          value={value}
+        />
+      ) : (
+        <CodeMirror
+          readOnly={readonly ?? disabled}
+          placeholder={placeholder}
+          className={cn(
+            "h-full overflow-auto font-mono [&_.cm-editor]:h-full [&_.cm-focused]:outline-none!",
+            "px-2 py-0! [&_.cm-line]:px-2! [&_.cm-line]:py-0!",
+          )}
+          theme={resolvedTheme === "dark" ? customDarkTheme : customLightTheme}
+          extensions={extensions}
+          basicSetup={{
+            foldGutter: settings?.foldGutter ?? false,
+            highlightActiveLine: false,
+            highlightActiveLineGutter: false,
+            lineNumbers: settings?.lineNumbers ?? false,
+          }}
+          autoFocus={autoFocus}
+          value={value}
+        />
+      )}
     </div>
   );
 }