feat: fallback to textarea when loading

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 CodeMirror from "@uiw/react-codemirror";
-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 { 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,6 +77,17 @@ export function CodeEditor({
         className,
       )}
     >
+      {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}
@@ -89,6 +106,7 @@ export function CodeEditor({
           autoFocus={autoFocus}
           value={value}
         />
+      )}
     </div>
   );
 }