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
@@ -45,6 +45,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,
@@ -69,7 +70,8 @@
export type Item =
| ChatThreadItem
| { +type: 'search', +searchText: string }
- | { +type: 'empty', +emptyItem: React.ComponentType<{}> };
+ | { +type: 'empty', +emptyItem: React.ComponentType<{}> }
+ | { +type: 'loader' };
type BaseProps = {
+navigation:
@@ -270,6 +272,13 @@
const renderItem = React.useCallback(
(row: { item: Item, ... }) => {
const item = row.item;
+ if (item.type === 'loader') {
+ return (
+
+
+
+ );
+ }
if (item.type === 'search') {
return searchItem;
}
@@ -293,6 +302,7 @@
onSwipeableWillOpen,
openedSwipeableID,
searchItem,
+ styles.listLoadingIndicator,
],
);
@@ -389,12 +399,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}