From 1f950a0a22cea165a285c6cdc1d0aadbd3dac82f Mon Sep 17 00:00:00 2001
From: alexandrev-tibco <alexandre.vazquez@cloud.com>
Date: Fri, 17 Apr 2026 12:24:15 +0200
Subject: [PATCH] Perf: defer Monaco mount until browser idle to reduce TBT

All editors were mounting simultaneously on initial render, causing
Monaco to block the main thread (TBT 1520ms). Now uses requestIdleCallback
(timeout 1.5s) to defer Monaco initialization until after first paint.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/App.jsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index f622fb5c..13572454 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -37,6 +37,13 @@ function runWhenIdle(callback, timeout = 2000) {
 }
 
 function Editor({ height, ...props }) {
+  const [ready, setReady] = useState(false);
+  useEffect(() => {
+    const id = requestIdleCallback
+      ? requestIdleCallback(() => setReady(true), { timeout: 1500 })
+      : setTimeout(() => setReady(true), 300);
+    return () => (requestIdleCallback ? cancelIdleCallback(id) : clearTimeout(id));
+  }, []);
   const fallbackStyle = height ? { height } : undefined;
   return (
     <Suspense
@@ -51,7 +58,11 @@ function Editor({ height, ...props }) {
         </div>
       }
     >
-      <MonacoEditor height={height} {...props} />
+      {ready ? (
+        <MonacoEditor height={height} {...props} />
+      ) : (
+        <div className="editor-loading" style={fallbackStyle} aria-hidden="true" />
+      )}
     </Suspense>
   );
 }