From 999cfef6cec83ddeaa80d592ab43ea8270eae626 Mon Sep 17 00:00:00 2001
From: syc0123 <yechul.shin@gmail.com>
Date: Tue, 31 Mar 2026 15:57:58 +0900
Subject: [PATCH] =?UTF-8?q?[RAPID-fix]=20=EC=BA=A1=EC=B2=98=20=ED=94=84?=
 =?UTF-8?q?=EB=A6=AC=EC=BA=90=EC=8B=B1:=20=EB=A9=94=EC=8B=A0=EC=A0=80=20?=
 =?UTF-8?q?=EC=97=B4=EB=A6=B4=20=EB=95=8C=20=EB=B0=B1=EA=B7=B8=EB=9D=BC?=
 =?UTF-8?q?=EC=9A=B4=EB=93=9C=20domToPng=20=E2=86=92=20=EB=B2=84=ED=8A=BC?=
 =?UTF-8?q?=20=ED=81=B4=EB=A6=AD=20=EC=A6=89=EC=8B=9C=20=EC=98=A4=EB=B2=84?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/messenger/MessengerModal.tsx   | 55 +++++++++++--------
 1 file changed, 33 insertions(+), 22 deletions(-)

diff --git a/frontend/components/messenger/MessengerModal.tsx b/frontend/components/messenger/MessengerModal.tsx
index 57de95b7..e2e42d4c 100644
--- a/frontend/components/messenger/MessengerModal.tsx
+++ b/frontend/components/messenger/MessengerModal.tsx
@@ -33,35 +33,41 @@ export function MessengerModal() {
   const capturePromiseRef = useRef<Promise<HTMLImageElement> | null>(null);
   const messageInputRef = useRef<MessageInputHandle>(null);
 
+  // Pre-capture when messenger opens so button click is instant
+  const startBackgroundCapture = useCallback(() => {
+    capturePromiseRef.current = (async (): Promise<HTMLImageElement> => {
+      const { domToPng } = await import("modern-screenshot");
+      const dataUrl = await domToPng(document.body, {
+        width: window.innerWidth,
+        height: window.innerHeight,
+        scale: window.devicePixelRatio || 1,
+        font: false,
+      });
+      const img = new Image();
+      img.src = dataUrl;
+      await new Promise<void>((res) => { img.onload = () => res(); });
+      capturedImgRef.current = img;
+      return img;
+    })();
+  }, []);
+
   useEffect(() => {
     const count = (serverUnread as any)?.unread_count ?? serverUnread ?? 0;
     setUnreadCount(Number(count));
   }, [serverUnread, setUnreadCount]);
 
+  // Start background capture when messenger opens (so capture button is instant)
+  useEffect(() => {
+    if (isOpen) startBackgroundCapture();
+  }, [isOpen, startBackgroundCapture]);
+
   const selectedRoom = rooms.find((r) => r.id === selectedRoomId) || null;
 
   const handleCaptureClick = useCallback(() => {
-    // Set promise ref BEFORE setCapturing so ScreenCapture condition is true on render
-    capturePromiseRef.current = new Promise<HTMLImageElement>((resolve, reject) => {
-      // Wait 2 rAF frames so the overlay renders first, then start heavy work
-      requestAnimationFrame(() => requestAnimationFrame(async () => {
-        try {
-          const { domToPng } = await import("modern-screenshot");
-          const dataUrl = await domToPng(document.body, {
-            width: window.innerWidth,
-            height: window.innerHeight,
-            scale: window.devicePixelRatio || 1,
-            font: false,
-          });
-          const img = new Image();
-          img.src = dataUrl;
-          img.onload = () => resolve(img);
-          img.onerror = reject;
-        } catch (e) { reject(e); }
-      }));
-    });
-    setCapturing(true); // Show overlay immediately
-  }, []);
+    // If no cache yet, start now (fallback)
+    if (!capturePromiseRef.current) startBackgroundCapture();
+    setCapturing(true);
+  }, [startBackgroundCapture]);
 
   // Position & size state
   const [pos, setPos] = useState({ x: 0, y: 0 });
@@ -189,8 +195,13 @@ export function MessengerModal() {
         onCapture={(file) => {
           setCapturing(false);
           messageInputRef.current?.addFiles([file]);
+          // Pre-cache next capture immediately
+          startBackgroundCapture();
+        }}
+        onCancel={() => {
+          setCapturing(false);
+          startBackgroundCapture();
         }}
-        onCancel={() => setCapturing(false)}
       />
     )}
     <div