perf(renderer): defer inactive messages panel branches
This commit is contained in:
parent
482105a94c
commit
a5444f3240
1 changed files with 26 additions and 26 deletions
|
|
@ -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>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue