fix: conditionally show loading more spinner (#5670)

This commit is contained in:
one 2025-05-05 14:57:01 +08:00 committed by GitHub
parent 61bb81827e
commit 98a2269b8a

View File

@ -239,9 +239,11 @@ const Messages: React.FC<MessagesProps> = ({ assistant, topic, setActiveTopic })
inverse inverse
style={{ overflow: 'visible' }}> style={{ overflow: 'visible' }}>
<ScrollContainer> <ScrollContainer>
<LoaderContainer $loading={isLoadingMore}> {isLoadingMore && (
<SvgSpinners180Ring color="var(--color-text-2)" /> <LoaderContainer>
</LoaderContainer> <SvgSpinners180Ring color="var(--color-text-2)" />
</LoaderContainer>
)}
{groupedMessages.map(([key, groupMessages]) => ( {groupedMessages.map(([key, groupMessages]) => (
<MessageGroup <MessageGroup
key={key} key={key}
@ -296,14 +298,12 @@ const computeDisplayMessages = (messages: Message[], startIndex: number, display
return displayMessages return displayMessages
} }
const LoaderContainer = styled.div<{ $loading: boolean }>` const LoaderContainer = styled.div`
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 10px; padding: 10px;
width: 100%; width: 100%;
background: var(--color-background); background: var(--color-background);
opacity: ${(props) => (props.$loading ? 1 : 0)};
transition: opacity 0.3s ease;
pointer-events: none; pointer-events: none;
` `