fix(FR-2874): defer BAICodeEditor reveal until Monaco CSS commits

The earlier `onMount` overlay still let Monaco's `.inputarea` flash through. Root cause: `editor.main.css` is loaded by Monaco's AMD `css!` plugin asynchronously, while `onMount` fires synchronously inside `monaco.editor.create()` — *before* the browser has committed the new stylesheet. Flipping the overlay off in `onMount` therefore still exposes one paint of the unstyled native textarea.

Wait two `requestAnimationFrame`s in `onMount` before flipping `isEditorReady`: the first lets the stylesheet commit, the second lets the browser paint the new styles. Then drop the overlay. Also switch the hidden state from `visibility: hidden` to `opacity: 0` + `pointer-events: none` (and the overlay to `z-index: 1`) so the unstyled textarea can't be tabbed into during the brief window.

Author: yomybaby

react/src/components/BAICodeEditor.tsx

@@ -57,16 +57,25 @@ const BAICodeEditor: React.FC<BAICodeEditorProps> = ({
   const { isDarkMode } = useThemeMode();
   const { token } = theme.useToken();
 
-  // Monaco's `loading` prop only covers the AMD loader phase. Once the loader
-  // finishes, @monaco-editor/react mounts a container whose initial DOM
-  // (a raw `<textarea>` used for input capture) renders before the Monaco
-  // instance has applied its own stylesheet, producing a brief flash of an
-  // unstyled textarea. Track the post-mount transition explicitly and keep
-  // the skeleton on top until `onMount` fires.
-  const [isEditorMounted, setIsEditorMounted] = useState(false);
+  // Monaco's `.inputarea` is a real `<textarea>` Monaco uses for keyboard
+  // input. Its "invisible" styling (opacity 0, 1×1 px, etc.) lives in
+  // `editor.main.css`, which is loaded via Monaco's own AMD `css!` plugin
+  // asynchronously. There is a window where Monaco's JS has already
+  // appended the textarea to the DOM but the stylesheet has not been
+  // committed by the browser yet — so it renders with default browser
+  // textarea chrome and flashes visibly.
+  //
+  // `onMount` fires synchronously inside `monaco.editor.create`, *before*
+  // the next paint, so flipping the overlay off there can still expose
+  // the unstyled textarea for one frame. Defer the reveal by two rAFs:
+  // the first lets Monaco's stylesheet commit; the second lets the new
+  // styles paint. Only then do we drop the skeleton overlay.
+  const [isEditorReady, setIsEditorReady] = useState(false);
   const handleMount: OnMount = (editor, monaco) => {
-    setIsEditorMounted(true);
     onMount?.(editor, monaco);
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => setIsEditorReady(true));
+    });
   };
 
   const [script, setScript] = useControllableState_deprecated<string>({
@@ -96,7 +105,16 @@ const BAICodeEditor: React.FC<BAICodeEditorProps> = ({
       }}
     >
       <Suspense fallback={loadingFallback}>
-        <div style={{ visibility: isEditorMounted ? 'visible' : 'hidden' }}>
+        <div
+          style={{
+            opacity: isEditorReady ? 1 : 0,
+            // Stay in layout so Monaco can measure the container, but suppress
+            // input/focus while we still consider the editor "not ready" —
+            // otherwise tabbing into the unstyled native textarea is possible.
+            pointerEvents: isEditorReady ? 'auto' : 'none',
+            transition: isEditorReady ? 'opacity 60ms linear' : 'none',
+          }}
+        >
           <MonacoEditor
             language={MONACO_LANGUAGE_MAP[language]}
             height={height}
@@ -117,11 +135,12 @@ const BAICodeEditor: React.FC<BAICodeEditorProps> = ({
             {...editorProps}
           />
         </div>
-        {!isEditorMounted && (
+        {!isEditorReady && (
           <div
             style={{
               position: 'absolute',
               inset: 0,
+              zIndex: 1,
               background: token.colorBgContainer,
             }}
           >