perf(renderer): narrow messages panel loading state
This commit is contained in:
parent
36939d428a
commit
5669373283
1 changed files with 35 additions and 26 deletions
|
|
@ -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,
|
||||||
]);
|
]);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue