byGalax/ChatApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
byGalax
2026-05-16 23:22:52 +02:00
parent c271e95100
commit a4573b315d
1 changed files with 41 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/desktop/src/pages/ConversationPage.tsx
+41 -25
View File
@@ -1,6 +1,6 @@
import { parseMessagePayload, pinMessage, unpinMessage } from '@chat-app/shared/chat'; import { parseMessagePayload, pinMessage, unpinMessage } from '@chat-app/shared/chat';
import { extractErrorCode } from '@chat-app/shared/i18n'; 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 { useTranslation } from 'react-i18next';
import { useParams } from 'react-router-dom'; import { useParams } from 'react-router-dom';
@@ -26,7 +26,9 @@ import {
SpinnerIcon, SpinnerIcon,
XIcon, XIcon,
} from '../components/icons'; } 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 { InCallPanel } from '../components/InCallPanel';
import { IncomingCallPanel } from '../components/IncomingCallPanel'; import { IncomingCallPanel } from '../components/IncomingCallPanel';
import { CallPreviewPanel } from '../components/CallPreviewPanel'; import { CallPreviewPanel } from '../components/CallPreviewPanel';
@@ -49,9 +51,15 @@ import {
createWatchTogetherPayload, createWatchTogetherPayload,
createGamePayload, createGamePayload,
} from '../lib/conversationFeatures'; } from '../lib/conversationFeatures';
import { WhiteboardModal } from '../components/WhiteboardModal'; const WhiteboardModal = lazy(() =>
import { WatchTogetherModal } from '../components/WatchTogetherModal'; import('../components/WhiteboardModal').then((m) => ({ default: m.WhiteboardModal })),
import { GameModal } from '../components/GameModal'; );
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 { createWhiteboard, createWatchSession, parseYouTubeUrl, createGame, type GameType } from '@chat-app/shared/chat';
import { compressImages } from '../lib/imageCompress'; import { compressImages } from '../lib/imageCompress';
import { ensureInstallId } from '../lib/installId'; import { ensureInstallId } from '../lib/installId';
@@ -1321,35 +1329,43 @@ export function ConversationPage() {
/> />
{annotatingIndex !== null && attachments[annotatingIndex] && ( {annotatingIndex !== null && attachments[annotatingIndex] && (
<ImageAnnotator <Suspense fallback={null}>
file={attachments[annotatingIndex]!} <ImageAnnotator
onCancel={() => setAnnotatingIndex(null)} file={attachments[annotatingIndex]!}
onSave={(next) => { onCancel={() => setAnnotatingIndex(null)}
setAttachments((prev) => prev.map((f, i) => (i === annotatingIndex ? next : f))); onSave={(next) => {
setAnnotatingIndex(null); setAttachments((prev) => prev.map((f, i) => (i === annotatingIndex ? next : f)));
}} setAnnotatingIndex(null);
/> }}
/>
</Suspense>
)} )}
{openWhiteboardId && ( {openWhiteboardId && (
<WhiteboardModal <Suspense fallback={null}>
whiteboardId={openWhiteboardId} <WhiteboardModal
onClose={() => setOpenWhiteboardId(null)} whiteboardId={openWhiteboardId}
/> onClose={() => setOpenWhiteboardId(null)}
/>
</Suspense>
)} )}
{openWatchSessionId && ( {openWatchSessionId && (
<WatchTogetherModal <Suspense fallback={null}>
sessionId={openWatchSessionId} <WatchTogetherModal
onClose={() => setOpenWatchSessionId(null)} sessionId={openWatchSessionId}
/> onClose={() => setOpenWatchSessionId(null)}
/>
</Suspense>
)} )}
{openGameId && ( {openGameId && (
<GameModal <Suspense fallback={null}>
gameId={openGameId} <GameModal
onClose={() => setOpenGameId(null)} gameId={openGameId}
/> onClose={() => setOpenGameId(null)}
/>
</Suspense>
)} )}
{gameDialogOpen && ( {gameDialogOpen && (