Page MenuHomePhabricator
Files F3509726

D14143.id46369.diff
No OneTemporary
Actions

D14143.id46369.diff
View Options

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 (
+ <View style={styles.listLoadingIndicator}>
+ <ListLoadingIndicator />
+ </View>
+ );
+ }
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(
() => (
<View style={styles.container}>
{fixedSearch}
<FlatList
- data={partialListData}
+ data={finalListData}
renderItem={renderItem}
keyExtractor={keyExtractor}
getItemLayout={getItemLayout}
@@ -423,7 +440,7 @@
indicatorStyle,
onEndReached,
onScroll,
- partialListData,
+ finalListData,
renderItem,
scrollEnabled,
styles.container,
@@ -522,6 +539,9 @@
flex: 1,
backgroundColor: 'listBackground',
},
+ listLoadingIndicator: {
+ flex: 1,
+ },
};
export default ChatThreadList;

File Metadata

Mime Type
text/plain
Expires
Sun, Dec 22, 7:42 AM (12 h, 50 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2688824
Default Alt Text
D14143.id46369.diff (3 KB)

Event Timeline