diff --git a/native/chat/chat-thread-list-utils.js b/native/chat/chat-thread-list-utils.js --- a/native/chat/chat-thread-list-utils.js +++ b/native/chat/chat-thread-list-utils.js @@ -9,17 +9,24 @@ } from './chat-thread-list-item.react.js'; import type { Item } from './chat-thread-list.react.js'; import { sidebarHeight } from './sidebar-item.react.js'; +import { listLoadingIndicatorHeight } from '../components/list-loading-indicator-utils.js'; function keyExtractor(item: Item): string { if (item.type === 'chatThreadItem') { return item.threadInfo.id; } else if (item.type === 'empty') { return 'empty'; + } else if (item.type === 'loader') { + return 'loader'; } return 'search'; } function itemHeight(item: Item): number { + if (item.type === 'loader') { + return listLoadingIndicatorHeight; + } + if (item.type === 'search') { return Platform.OS === 'ios' ? 54.5 : 55; } diff --git a/native/chat/chat-thread-list.react.js b/native/chat/chat-thread-list.react.js --- a/native/chat/chat-thread-list.react.js +++ b/native/chat/chat-thread-list.react.js @@ -48,6 +48,7 @@ ChatTopTabsNavigationProp, } from './chat.react.js'; import { useNavigateToThread } from './message-list-types.js'; +import ListLoadingIndicator from '../components/list-loading-indicator.react.js'; import { BackgroundChatThreadListRouteName, HomeChatThreadListRouteName, @@ -72,7 +73,8 @@ export type Item = | ChatThreadItem | { +type: 'search', +searchText: string } - | { +type: 'empty', +emptyItem: React.ComponentType<{}> }; + | { +type: 'empty', +emptyItem: React.ComponentType<{}> } + | { +type: 'loader' }; type BaseProps = { +navigation: @@ -272,6 +274,13 @@ const renderItem = React.useCallback( (row: { item: Item, ... }) => { const item = row.item; + if (item.type === 'loader') { + return ( + + + + ); + } if (item.type === 'search') { return searchItem; } @@ -295,6 +304,7 @@ onSwipeableWillOpen, openedSwipeableID, searchItem, + styles.listLoadingIndicator, ], ); @@ -393,12 +403,19 @@ const viewerID = loggedInUserInfo?.id; const extraData = `${viewerID || ''} ${openedSwipeableID}`; + const finalListData = React.useMemo(() => { + if (partialListData.length === listData.length) { + return partialListData; + } + return [...partialListData, { type: 'loader' }]; + }, [partialListData, listData.length]); + const chatThreadList = React.useMemo( () => ( {fixedSearch}