From a62fe855c3625a1798eae38cca08bc6c1686c863 Mon Sep 17 00:00:00 2001 From: Samuel Newman Date: Wed, 5 Mar 2025 17:55:55 +0000 Subject: skeletons for chat list (#7907) --- src/screens/Messages/ChatList.tsx | 16 ++++++------ src/screens/Messages/Inbox.tsx | 8 +++--- src/view/com/util/LoadingPlaceholder.tsx | 42 ++++++++++++++++++++++++++++++++ 3 files changed, 52 insertions(+), 14 deletions(-) (limited to 'src') diff --git a/src/screens/Messages/ChatList.tsx b/src/screens/Messages/ChatList.tsx index b060b23e5..4624b0164 100644 --- a/src/screens/Messages/ChatList.tsx +++ b/src/screens/Messages/ChatList.tsx @@ -20,7 +20,8 @@ import {useLeftConvos} from '#/state/queries/messages/leave-conversation' import {useListConvosQuery} from '#/state/queries/messages/list-conversations' import {useSession} from '#/state/session' import {List, ListRef} from '#/view/com/util/List' -import {atoms as a, useBreakpoints, useTheme, web} from '#/alf' +import {ChatListLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' +import {atoms as a, useBreakpoints, useTheme} from '#/alf' import {Button, ButtonIcon, ButtonText} from '#/components/Button' import {DialogControlProps, useDialogControl} from '#/components/Dialog' import {NewChat} from '#/components/dms/dialogs/NewChatDialog' @@ -33,7 +34,6 @@ import {SettingsSliderVertical_Stroke2_Corner0_Rounded as SettingsSlider} from ' import * as Layout from '#/components/Layout' import {Link} from '#/components/Link' import {ListFooter} from '#/components/Lists' -import {Loader} from '#/components/Loader' import {Text} from '#/components/Typography' import {ChatListItem} from './components/ChatListItem' import {InboxPreview} from './components/InboxPreview' @@ -211,10 +211,12 @@ export function MessagesScreen({navigation, route}: Props) {
+ {isLoading ? ( - - - + ) : ( <> {isError ? ( @@ -255,10 +257,6 @@ export function MessagesScreen({navigation, route}: Props) { ) : ( <> - diff --git a/src/screens/Messages/Inbox.tsx b/src/screens/Messages/Inbox.tsx index 3f3d5a8a8..12fc9c44e 100644 --- a/src/screens/Messages/Inbox.tsx +++ b/src/screens/Messages/Inbox.tsx @@ -23,8 +23,9 @@ import {useListConvosQuery} from '#/state/queries/messages/list-conversations' import {useUpdateAllRead} from '#/state/queries/messages/update-all-read' import {FAB} from '#/view/com/util/fab/FAB' import {List} from '#/view/com/util/List' +import {ChatListLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' import * as Toast from '#/view/com/util/Toast' -import {atoms as a, useBreakpoints, useTheme, web} from '#/alf' +import {atoms as a, useBreakpoints, useTheme} from '#/alf' import {Button, ButtonIcon, ButtonText} from '#/components/Button' import {useRefreshOnFocus} from '#/components/hooks/useRefreshOnFocus' import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeftIcon} from '#/components/icons/Arrow' @@ -34,7 +35,6 @@ import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfoIcon} from '#/components import {Message_Stroke2_Corner0_Rounded as MessageIcon} from '#/components/icons/Message' import * as Layout from '#/components/Layout' import {ListFooter} from '#/components/Lists' -import {Loader} from '#/components/Loader' import {Text} from '#/components/Typography' import {RequestListItem} from './components/RequestListItem' @@ -157,9 +157,7 @@ function RequestList({ return ( {isLoading ? ( - - - + ) : ( <> {isError ? ( diff --git a/src/view/com/util/LoadingPlaceholder.tsx b/src/view/com/util/LoadingPlaceholder.tsx index b4a5681d8..eee642df3 100644 --- a/src/view/com/util/LoadingPlaceholder.tsx +++ b/src/view/com/util/LoadingPlaceholder.tsx @@ -1,3 +1,4 @@ +import {useMemo} from 'react' import { DimensionValue, StyleProp, @@ -282,6 +283,47 @@ export function FeedFeedLoadingPlaceholder() { ) } +export function ChatListItemLoadingPlaceholder({ + style, +}: { + style?: StyleProp +}) { + const t = useTheme_NEW() + const random = useMemo(() => Math.random(), []) + return ( + + + + + + + + + ) +} + +export function ChatListLoadingPlaceholder() { + return ( + <> + + + + + + + + + + + + + ) +} + const styles = StyleSheet.create({ loadingPlaceholder: { borderRadius: 6, -- cgit 1.4.1