moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ChatList: display empty message

This commit is contained in:
Alex Gleason 2022-10-04 19:22:18 -04:00
parent 19382c3ab9
commit 69d37a10fb
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
1 changed files with 31 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
app/soapbox/features/chats/components/chat-list.tsx
View File

@ -1,10 +1,11 @@
import classNames from 'clsx'; import classNames from 'clsx';
import React, { useRef, useState } from 'react'; import React, { useRef, useState } from 'react';
import { FormattedMessage } from 'react-intl';
import { Virtuoso } from 'react-virtuoso'; import { Virtuoso } from 'react-virtuoso';
import { fetchChats } from 'soapbox/actions/chats'; import { fetchChats } from 'soapbox/actions/chats';
import PullToRefresh from 'soapbox/components/pull-to-refresh'; import PullToRefresh from 'soapbox/components/pull-to-refresh';
import { Spinner, Stack } from 'soapbox/components/ui'; import { Spinner, Stack, Text } from 'soapbox/components/ui';
import PlaceholderChat from 'soapbox/features/placeholder/components/placeholder-chat'; import PlaceholderChat from 'soapbox/features/placeholder/components/placeholder-chat';
import { useAppDispatch } from 'soapbox/hooks'; import { useAppDispatch } from 'soapbox/hooks';
import { useChats, useChatSilences } from 'soapbox/queries/chats'; import { useChats, useChatSilences } from 'soapbox/queries/chats';
@ -37,13 +38,35 @@ const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false, s
const handleRefresh = () => dispatch(fetchChats()); const handleRefresh = () => dispatch(fetchChats());
const renderEmpty = () => ( const renderEmpty = () => {
<Stack space={2}> if (isFetching) {
<PlaceholderChat /> return (
<PlaceholderChat /> <Stack space={2}>
<PlaceholderChat /> <PlaceholderChat />
</Stack> <PlaceholderChat />
); <PlaceholderChat />
</Stack>
);
} else {
return (
<Stack className='p-6' space={2}>
<Text size='2xl' weight='bold' tag='h3'>
<FormattedMessage
id='chats.getting_started.title'
defaultMessage='Getting started'
/>
</Text>
<Text theme='muted'>
<FormattedMessage
id='chats.getting_started.hint'
defaultMessage='To start a chat, search for a user in the field above.'
/>
</Text>
</Stack>
);
}
};
return ( return (
<div className='relative h-full'> <div className='relative h-full'>