perf(P6A.T1): lazy-load ImageAnnotator/Whiteboard/WatchTogether/GameModal

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/desktop/src/pages/ConversationPage.tsx

@@ -1,6 +1,6 @@
 import { parseMessagePayload, pinMessage, unpinMessage } from '@chat-app/shared/chat';
 import { extractErrorCode } from '@chat-app/shared/i18n';
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { lazy, Suspense, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 
@@ -26,7 +26,9 @@ import {
   SpinnerIcon,
   XIcon,
 } from '../components/icons';
-import { ImageAnnotator } from '../components/ImageAnnotator';
+const ImageAnnotator = lazy(() =>
+  import('../components/ImageAnnotator').then((m) => ({ default: m.ImageAnnotator })),
+);
 import { InCallPanel } from '../components/InCallPanel';
 import { IncomingCallPanel } from '../components/IncomingCallPanel';
 import { CallPreviewPanel } from '../components/CallPreviewPanel';
@@ -49,9 +51,15 @@ import {
   createWatchTogetherPayload,
   createGamePayload,
 } from '../lib/conversationFeatures';
-import { WhiteboardModal } from '../components/WhiteboardModal';
-import { WatchTogetherModal } from '../components/WatchTogetherModal';
-import { GameModal } from '../components/GameModal';
+const WhiteboardModal = lazy(() =>
+  import('../components/WhiteboardModal').then((m) => ({ default: m.WhiteboardModal })),
+);
+const WatchTogetherModal = lazy(() =>
+  import('../components/WatchTogetherModal').then((m) => ({ default: m.WatchTogetherModal })),
+);
+const GameModal = lazy(() =>
+  import('../components/GameModal').then((m) => ({ default: m.GameModal })),
+);
 import { createWhiteboard, createWatchSession, parseYouTubeUrl, createGame, type GameType } from '@chat-app/shared/chat';
 import { compressImages } from '../lib/imageCompress';
 import { ensureInstallId } from '../lib/installId';
@@ -1321,35 +1329,43 @@ export function ConversationPage() {
       />
 
       {annotatingIndex !== null && attachments[annotatingIndex] && (
-        <ImageAnnotator
-          file={attachments[annotatingIndex]!}
-          onCancel={() => setAnnotatingIndex(null)}
-          onSave={(next) => {
-            setAttachments((prev) => prev.map((f, i) => (i === annotatingIndex ? next : f)));
-            setAnnotatingIndex(null);
-          }}
-        />
+        <Suspense fallback={null}>
+          <ImageAnnotator
+            file={attachments[annotatingIndex]!}
+            onCancel={() => setAnnotatingIndex(null)}
+            onSave={(next) => {
+              setAttachments((prev) => prev.map((f, i) => (i === annotatingIndex ? next : f)));
+              setAnnotatingIndex(null);
+            }}
+          />
+        </Suspense>
       )}
 
       {openWhiteboardId && (
-        <WhiteboardModal
-          whiteboardId={openWhiteboardId}
-          onClose={() => setOpenWhiteboardId(null)}
-        />
+        <Suspense fallback={null}>
+          <WhiteboardModal
+            whiteboardId={openWhiteboardId}
+            onClose={() => setOpenWhiteboardId(null)}
+          />
+        </Suspense>
       )}
 
       {openWatchSessionId && (
-        <WatchTogetherModal
-          sessionId={openWatchSessionId}
-          onClose={() => setOpenWatchSessionId(null)}
-        />
+        <Suspense fallback={null}>
+          <WatchTogetherModal
+            sessionId={openWatchSessionId}
+            onClose={() => setOpenWatchSessionId(null)}
+          />
+        </Suspense>
       )}
 
       {openGameId && (
-        <GameModal
-          gameId={openGameId}
-          onClose={() => setOpenGameId(null)}
-        />
+        <Suspense fallback={null}>
+          <GameModal
+            gameId={openGameId}
+            onClose={() => setOpenGameId(null)}
+          />
+        </Suspense>
       )}
 
       {gameDialogOpen && (