perf: lazy-load TaskDetailDialog, SendMessageDialog, CreateTaskDialog, ChangeReviewDialog

Defers parsing 4575 lines of heavy dialog code until first use, reducing
initial bundle parse time for TeamDetailView.
This commit is contained in:
Mike 2026-05-02 22:24:03 +05:00
parent 5d6667b23d
commit 5cd890dcdd

View file

@ -78,12 +78,9 @@ import {
import { useShallow } from 'zustand/react/shallow'; import { useShallow } from 'zustand/react/shallow';
import { AddMemberDialog } from './dialogs/AddMemberDialog'; import { AddMemberDialog } from './dialogs/AddMemberDialog';
import { CreateTaskDialog } from './dialogs/CreateTaskDialog';
import { EditTeamDialog } from './dialogs/EditTeamDialog'; import { EditTeamDialog } from './dialogs/EditTeamDialog';
import type { TeamLaunchDialogMode } from './dialogs/LaunchTeamDialog'; import type { TeamLaunchDialogMode } from './dialogs/LaunchTeamDialog';
import { ReviewDialog } from './dialogs/ReviewDialog'; import { ReviewDialog } from './dialogs/ReviewDialog';
import { SendMessageDialog } from './dialogs/SendMessageDialog';
import { TaskDetailDialog } from './dialogs/TaskDetailDialog';
import { executeTeamRelaunch } from './dialogs/teamRelaunchFlow'; import { executeTeamRelaunch } from './dialogs/teamRelaunchFlow';
import { KanbanBoard } from './kanban/KanbanBoard'; import { KanbanBoard } from './kanban/KanbanBoard';
import { UNASSIGNED_OWNER } from './kanban/KanbanFilterPopover'; import { UNASSIGNED_OWNER } from './kanban/KanbanFilterPopover';
@ -107,9 +104,20 @@ const TeamGraphOverlay = lazy(() =>
default: m.TeamGraphOverlay, default: m.TeamGraphOverlay,
})) }))
); );
const TaskDetailDialog = lazy(() =>
import('./dialogs/TaskDetailDialog').then((m) => ({ default: m.TaskDetailDialog }))
);
const SendMessageDialog = lazy(() =>
import('./dialogs/SendMessageDialog').then((m) => ({ default: m.SendMessageDialog }))
);
const CreateTaskDialog = lazy(() =>
import('./dialogs/CreateTaskDialog').then((m) => ({ default: m.CreateTaskDialog }))
);
const ChangeReviewDialog = lazy(() =>
import('./review/ChangeReviewDialog').then((m) => ({ default: m.ChangeReviewDialog }))
);
import { MemberList } from './members/MemberList'; import { MemberList } from './members/MemberList';
import { MessagesPanel } from './messages/MessagesPanel'; import { MessagesPanel } from './messages/MessagesPanel';
import { ChangeReviewDialog } from './review/ChangeReviewDialog';
import { ScheduleSection } from './schedule/ScheduleSection'; import { ScheduleSection } from './schedule/ScheduleSection';
import { TeamSidebarHost } from './sidebar/TeamSidebarHost'; import { TeamSidebarHost } from './sidebar/TeamSidebarHost';
import { TeamSidebarPortalSource } from './sidebar/TeamSidebarPortalSource'; import { TeamSidebarPortalSource } from './sidebar/TeamSidebarPortalSource';
@ -2857,6 +2865,7 @@ export const TeamDetailView = memo(
}} }}
/> />
<Suspense fallback={null}>
<CreateTaskDialog <CreateTaskDialog
open={createTaskDialog.open} open={createTaskDialog.open}
teamName={teamName} teamName={teamName}
@ -2872,6 +2881,7 @@ export const TeamDetailView = memo(
onSubmit={handleCreateTask} onSubmit={handleCreateTask}
submitting={creatingTask} submitting={creatingTask}
/> />
</Suspense>
<EditTeamDialog <EditTeamDialog
open={editDialogOpen} open={editDialogOpen}
@ -2997,6 +3007,7 @@ export const TeamDetailView = memo(
/> />
</Suspense> </Suspense>
<Suspense fallback={null}>
<SendMessageDialog <SendMessageDialog
open={sendDialogOpen} open={sendDialogOpen}
teamName={teamName} teamName={teamName}
@ -3052,7 +3063,9 @@ export const TeamDetailView = memo(
setSendDialogDefaultChip(undefined); setSendDialogDefaultChip(undefined);
}} }}
/> />
</Suspense>
<Suspense fallback={null}>
<TaskDetailDialog <TaskDetailDialog
open={selectedTask !== null} open={selectedTask !== null}
task={selectedTask} task={selectedTask}
@ -3094,6 +3107,7 @@ export const TeamDetailView = memo(
}} }}
onDeleteTask={handleDeleteTask} onDeleteTask={handleDeleteTask}
/> />
</Suspense>
<TrashDialog <TrashDialog
open={trashOpen} open={trashOpen}
@ -3110,6 +3124,7 @@ export const TeamDetailView = memo(
}} }}
/> />
<Suspense fallback={null}>
<ChangeReviewDialog <ChangeReviewDialog
open={reviewDialogState.open} open={reviewDialogState.open}
onOpenChange={(open) => onOpenChange={(open) =>
@ -3130,6 +3145,7 @@ export const TeamDetailView = memo(
projectPath={data.config.projectPath} projectPath={data.config.projectPath}
onEditorAction={handleEditorAction} onEditorAction={handleEditorAction}
/> />
</Suspense>
</div> </div>
<div <div
ref={setMessagesPanelMountPoint} ref={setMessagesPanelMountPoint}