Improve loading state of ChatMessageList

This commit is contained in:
Justin 2022-10-04 10:50:55 -04:00
parent 4447a3cda4
commit 3a74496c35
1 changed files with 17 additions and 11 deletions

View File

@ -410,8 +410,8 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat, autosize }) => {
followOutput='auto'
components={{
Header: () => {
if (hasNextPage && isFetchingNextPage) {
return <div className='mb-6'><Spinner withText={false} /></div>;
if (hasNextPage || isFetchingNextPage) {
return <Spinner withText={false} />;
}
if (!hasNextPage && !isLoading) {
@ -420,15 +420,21 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat, autosize }) => {
return null;
},
EmptyPlaceholder: () => (
<div className='px-4'>
<PlaceholderChatMessage isMyMessage />
<PlaceholderChatMessage />
<PlaceholderChatMessage isMyMessage />
<PlaceholderChatMessage isMyMessage />
<PlaceholderChatMessage />
</div>
),
EmptyPlaceholder: () => {
if (isFetching) {
return (
<div className='px-4'>
<PlaceholderChatMessage isMyMessage />
<PlaceholderChatMessage />
<PlaceholderChatMessage isMyMessage />
<PlaceholderChatMessage isMyMessage />
<PlaceholderChatMessage />
</div>
);
}
return null;
},
}}
/>
</div>