perf(renderer): defer inactive messages panel branches

This commit is contained in:
777genius 2026-05-31 02:07:52 +03:00
parent 482105a94c
commit a5444f3240

View file

@ -920,7 +920,7 @@ export const MessagesPanel = memo(function MessagesPanel({
); );
}, [bottomSheetSnapIndex]); }, [bottomSheetSnapIndex]);
const defaultComposerSection = ( const renderDefaultComposerSection = (): React.JSX.Element => (
<MessagesComposerSection <MessagesComposerSection
teamName={teamName} teamName={teamName}
members={members} members={members}
@ -939,7 +939,7 @@ export const MessagesPanel = memo(function MessagesPanel({
/> />
); );
const floatingComposerModeControls = ( const renderFloatingComposerModeControls = (): React.JSX.Element => (
<div className="inline-flex items-center pr-1"> <div className="inline-flex items-center pr-1">
<DropdownMenu> <DropdownMenu>
<Tooltip> <Tooltip>
@ -975,7 +975,7 @@ export const MessagesPanel = memo(function MessagesPanel({
</div> </div>
); );
const compactComposerSection = ( const renderCompactComposerSection = (): React.JSX.Element => (
<MessagesComposerSection <MessagesComposerSection
teamName={teamName} teamName={teamName}
layout="compact" layout="compact"
@ -995,7 +995,7 @@ export const MessagesPanel = memo(function MessagesPanel({
/> />
); );
const floatingComposerSection = ( const renderFloatingComposerSection = (): React.JSX.Element => (
<MessagesComposerSection <MessagesComposerSection
teamName={teamName} teamName={teamName}
layout="compact" layout="compact"
@ -1007,7 +1007,7 @@ export const MessagesPanel = memo(function MessagesPanel({
sendWarning={effectiveSendMessageWarning} sendWarning={effectiveSendMessageWarning}
sendDebugDetails={effectiveSendMessageDebugDetails} sendDebugDetails={effectiveSendMessageDebugDetails}
lastResult={lastSendMessageResult} lastResult={lastSendMessageResult}
cornerActionPrefix={floatingComposerModeControls} cornerActionPrefix={renderFloatingComposerModeControls()}
revisionRequest={revisionRequest} revisionRequest={revisionRequest}
textareaRef={composerTextareaRef} textareaRef={composerTextareaRef}
onSend={handleSend} onSend={handleSend}
@ -1017,7 +1017,7 @@ export const MessagesPanel = memo(function MessagesPanel({
/> />
); );
const inlineStatusSection = ( const renderInlineStatusSection = (): React.JSX.Element => (
<MessagesStatusSection <MessagesStatusSection
members={members} members={members}
tasks={tasks} tasks={tasks}
@ -1030,7 +1030,7 @@ export const MessagesPanel = memo(function MessagesPanel({
/> />
); );
const sidebarStatusSection = ( const renderSidebarStatusSection = (): React.JSX.Element => (
<MessagesStatusSection <MessagesStatusSection
members={members} members={members}
tasks={tasks} tasks={tasks}
@ -1043,7 +1043,7 @@ export const MessagesPanel = memo(function MessagesPanel({
/> />
); );
const timelineSection = ( const renderTimelineSection = (): React.JSX.Element => (
<MessagesTimelineSection <MessagesTimelineSection
messages={activityTimelineMessages} messages={activityTimelineMessages}
loading={loadingInitialMessages} loading={loadingInitialMessages}
@ -1081,7 +1081,7 @@ export const MessagesPanel = memo(function MessagesPanel({
); );
// ---- Shared content (used in both modes) ---- // ---- Shared content (used in both modes) ----
const searchAndFilterControls = ( const renderSearchAndFilterControls = (): React.JSX.Element => (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="flex min-w-0 flex-1 items-center gap-1.5 rounded-md border border-[var(--color-border)] bg-transparent px-2 py-1"> <div className="flex min-w-0 flex-1 items-center gap-1.5 rounded-md border border-[var(--color-border)] bg-transparent px-2 py-1">
<Search size={12} className="shrink-0 text-[var(--color-text-muted)]" /> <Search size={12} className="shrink-0 text-[var(--color-text-muted)]" />
@ -1116,9 +1116,9 @@ export const MessagesPanel = memo(function MessagesPanel({
</div> </div>
); );
const searchAndFilterBar = ( const renderSearchAndFilterBar = (): React.JSX.Element => (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{searchAndFilterControls} {renderSearchAndFilterControls()}
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<Button <Button
@ -1140,11 +1140,11 @@ export const MessagesPanel = memo(function MessagesPanel({
</div> </div>
); );
const messagesContent = ( const renderMessagesContent = (): React.JSX.Element => (
<div className="pb-14"> <div className="pb-14">
{defaultComposerSection} {renderDefaultComposerSection()}
{inlineStatusSection} {renderInlineStatusSection()}
{timelineSection} {renderTimelineSection()}
</div> </div>
); );
@ -1258,7 +1258,7 @@ export const MessagesPanel = memo(function MessagesPanel({
{/* Search & filter bar (toggleable) */} {/* Search & filter bar (toggleable) */}
{messagesSearchBarVisible && ( {messagesSearchBarVisible && (
<div className="shrink-0 border-b border-[var(--color-border)] px-3 py-1.5"> <div className="shrink-0 border-b border-[var(--color-border)] px-3 py-1.5">
{searchAndFilterControls} {renderSearchAndFilterControls()}
</div> </div>
)} )}
{/* Scrollable content */} {/* Scrollable content */}
@ -1268,10 +1268,10 @@ export const MessagesPanel = memo(function MessagesPanel({
onScroll={handleSidebarScroll} onScroll={handleSidebarScroll}
> >
<div className="pl-3"> <div className="pl-3">
{defaultComposerSection} {renderDefaultComposerSection()}
{sidebarStatusSection} {renderSidebarStatusSection()}
</div> </div>
{timelineSection} {renderTimelineSection()}
</div> </div>
</div> </div>
); );
@ -1282,7 +1282,7 @@ export const MessagesPanel = memo(function MessagesPanel({
<div className="pointer-events-none absolute inset-x-0 bottom-0 z-40 px-4 pb-5 sm:px-6 sm:pb-6"> <div className="pointer-events-none absolute inset-x-0 bottom-0 z-40 px-4 pb-5 sm:px-6 sm:pb-6">
<div className="mx-auto flex w-full max-w-[500px] justify-center"> <div className="mx-auto flex w-full max-w-[500px] justify-center">
<div ref={floatingComposerMeasureRef} className="pointer-events-auto"> <div ref={floatingComposerMeasureRef} className="pointer-events-auto">
{floatingComposerSection} {renderFloatingComposerSection()}
</div> </div>
</div> </div>
</div> </div>
@ -1463,13 +1463,13 @@ export const MessagesPanel = memo(function MessagesPanel({
> >
{messagesSearchBarVisible && ( {messagesSearchBarVisible && (
<div className="border-b border-[var(--color-border)] px-3 py-2"> <div className="border-b border-[var(--color-border)] px-3 py-2">
{searchAndFilterControls} {renderSearchAndFilterControls()}
</div> </div>
)} )}
<div className="p-3">{compactComposerSection}</div> <div className="p-3">{renderCompactComposerSection()}</div>
</div> </div>
<div className="shrink-0 px-3 pt-2">{inlineStatusSection}</div> <div className="shrink-0 px-3 pt-2">{renderInlineStatusSection()}</div>
<div className="flex-1 px-3 pb-4 pt-2">{timelineSection}</div> <div className="flex-1 px-3 pb-4 pt-2">{renderTimelineSection()}</div>
</Sheet.Content> </Sheet.Content>
)} )}
</Sheet.Container> </Sheet.Container>
@ -1562,9 +1562,9 @@ export const MessagesPanel = memo(function MessagesPanel({
</div> </div>
} }
defaultOpen defaultOpen
action={<div className="flex items-center gap-2 px-2">{searchAndFilterBar}</div>} action={<div className="flex items-center gap-2 px-2">{renderSearchAndFilterBar()}</div>}
> >
{messagesContent} {renderMessagesContent()}
</CollapsibleTeamSection> </CollapsibleTeamSection>
); );
}); });