perf(renderer): narrow messages panel loading state

This commit is contained in:
777genius 2026-05-31 04:19:00 +03:00
parent 36939d428a
commit 5669373283

View file

@ -380,46 +380,55 @@ export const MessagesPanel = memo(function MessagesPanel({
teamMentionMeta, teamMentionMeta,
openTeamTab, openTeamTab,
messages, messages,
messagesState, messagesEntryPresent,
messagesHasMore,
messagesLoadingHead,
messagesLoadingOlder,
loadOlderTeamMessages, loadOlderTeamMessages,
refreshTeamMessagesHead, refreshTeamMessagesHead,
} = useStore( } = useStore(
useShallow((s) => ({ useShallow((s) => {
sendTeamMessage: s.sendTeamMessage, const messagesState = teamName ? s.teamMessagesByName[teamName] : undefined;
sendCrossTeamMessage: s.sendCrossTeamMessage, return {
sendingMessage: s.sendingMessage, sendTeamMessage: s.sendTeamMessage,
sendMessageError: s.sendMessageError, sendCrossTeamMessage: s.sendCrossTeamMessage,
sendMessageWarning: s.sendMessageWarning, sendingMessage: s.sendingMessage,
sendMessageDebugDetails: s.sendMessageDebugDetails, sendMessageError: s.sendMessageError,
lastSendMessageResult: s.lastSendMessageResult, sendMessageWarning: s.sendMessageWarning,
clearSendMessageRuntimeDiagnostics: s.clearSendMessageRuntimeDiagnostics, sendMessageDebugDetails: s.sendMessageDebugDetails,
refreshSendMessageRuntimeDeliveryStatus: s.refreshSendMessageRuntimeDeliveryStatus, lastSendMessageResult: s.lastSendMessageResult,
teamMentionMeta: selectMessagesPanelTeamMentionMeta(s.teams), clearSendMessageRuntimeDiagnostics: s.clearSendMessageRuntimeDiagnostics,
openTeamTab: s.openTeamTab, refreshSendMessageRuntimeDeliveryStatus: s.refreshSendMessageRuntimeDeliveryStatus,
messages: selectTeamMessages(s, teamName), teamMentionMeta: selectMessagesPanelTeamMentionMeta(s.teams),
messagesState: teamName ? s.teamMessagesByName[teamName] : undefined, openTeamTab: s.openTeamTab,
loadOlderTeamMessages: s.loadOlderTeamMessages, messages: selectTeamMessages(s, teamName),
refreshTeamMessagesHead: s.refreshTeamMessagesHead, messagesEntryPresent: messagesState !== undefined,
})) messagesHasMore: messagesState?.hasMore ?? false,
messagesLoadingHead: messagesState?.loadingHead ?? false,
messagesLoadingOlder: messagesState?.loadingOlder ?? false,
loadOlderTeamMessages: s.loadOlderTeamMessages,
refreshTeamMessagesHead: s.refreshTeamMessagesHead,
};
})
); );
const bootstrapHeadRefreshAttemptedForTeamRef = useRef<string | null>(null); const bootstrapHeadRefreshAttemptedForTeamRef = useRef<string | null>(null);
const loadOlderMessages = useCallback(async () => { const loadOlderMessages = useCallback(async () => {
if (!messagesState?.hasMore || messagesState.loadingHead || messagesState.loadingOlder) { if (!messagesHasMore || messagesLoadingHead || messagesLoadingOlder) {
return; return;
} }
await loadOlderTeamMessages(teamName); await loadOlderTeamMessages(teamName);
}, [loadOlderTeamMessages, messagesState, teamName]); }, [loadOlderTeamMessages, messagesHasMore, messagesLoadingHead, messagesLoadingOlder, teamName]);
const handleLoadOlderMessagesClick = useCallback(() => { const handleLoadOlderMessagesClick = useCallback(() => {
void loadOlderMessages(); void loadOlderMessages();
}, [loadOlderMessages]); }, [loadOlderMessages]);
const loadingOlderMessages = messagesState?.loadingOlder ?? false; const loadingOlderMessages = messagesLoadingOlder;
const hasMore = messagesState?.hasMore ?? false; const hasMore = messagesHasMore;
const effectiveMessages = messages; const effectiveMessages = messages;
const loadingInitialMessages = const loadingInitialMessages =
effectiveMessages.length === 0 && (messagesState === undefined || messagesState.loadingHead); effectiveMessages.length === 0 && (!messagesEntryPresent || messagesLoadingHead);
const composerTextareaRef = useRef<HTMLTextAreaElement | null>(null); const composerTextareaRef = useRef<HTMLTextAreaElement | null>(null);
const floatingComposerMeasureRef = useRef<HTMLDivElement | null>(null); const floatingComposerMeasureRef = useRef<HTMLDivElement | null>(null);
@ -591,7 +600,7 @@ export const MessagesPanel = memo(function MessagesPanel({
bootstrapHeadRefreshAttemptedForTeamRef.current = null; bootstrapHeadRefreshAttemptedForTeamRef.current = null;
return; return;
} }
if (messagesState?.loadingHead || messagesState?.loadingOlder) { if (messagesLoadingHead || messagesLoadingOlder) {
return; return;
} }
if (bootstrapHeadRefreshAttemptedForTeamRef.current === teamName) { if (bootstrapHeadRefreshAttemptedForTeamRef.current === teamName) {
@ -601,8 +610,8 @@ export const MessagesPanel = memo(function MessagesPanel({
void refreshTeamMessagesHead(teamName).catch(() => undefined); void refreshTeamMessagesHead(teamName).catch(() => undefined);
}, [ }, [
effectiveMessages.length, effectiveMessages.length,
messagesState?.loadingHead, messagesLoadingHead,
messagesState?.loadingOlder, messagesLoadingOlder,
refreshTeamMessagesHead, refreshTeamMessagesHead,
teamName, teamName,
]); ]);