forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
defer loading of feeds until visible (#1271)
* defer loading of feeds until visible
* Fix: use existing hasLoaded
* Fix: dont query for latest during initial load
---------
Co-authored-by: Paul Frazee <pfrazee@gmail.com>
authored by
Eric Bailey
Paul Frazee
and committed by
GitHub
4654a9a4
a5981e12
+40
-37
+1
-1
src/state/models/feeds/posts.ts
+1
-1
src/state/models/feeds/posts.ts
+32
-35
src/view/com/posts/Feed.tsx
+32
-35
src/view/com/posts/Feed.tsx
···
69
69
if (feed.loadMoreError) {
70
70
feedItems = feedItems.concat([LOAD_MORE_ERROR_ITEM])
71
71
}
72
-
} else if (feed.isLoading) {
73
-
feedItems = feedItems.concat([LOADING_ITEM])
74
72
}
75
73
return feedItems
76
74
}, [
77
75
feed.hasError,
78
76
feed.hasLoaded,
79
-
feed.isLoading,
80
77
feed.isEmpty,
81
78
feed.slices,
82
79
feed.loadMoreError,
···
97
94
}, [feed, track, setIsRefreshing])
98
95
99
96
const onEndReached = React.useCallback(async () => {
97
+
if (!feed.hasLoaded) return
98
+
100
99
track('Feed:onEndReached')
101
100
try {
102
101
await feed.loadMore()
···
155
154
156
155
return (
157
156
<View testID={testID} style={style}>
158
-
{data.length > 0 && (
159
-
<FlatList
160
-
testID={testID ? `${testID}-flatlist` : undefined}
161
-
ref={scrollElRef}
162
-
data={data}
163
-
keyExtractor={item => item._reactKey}
164
-
renderItem={renderItem}
165
-
ListFooterComponent={FeedFooter}
166
-
ListHeaderComponent={ListHeaderComponent}
167
-
refreshControl={
168
-
<RefreshControl
169
-
refreshing={isRefreshing}
170
-
onRefresh={onRefresh}
171
-
tintColor={pal.colors.text}
172
-
titleColor={pal.colors.text}
173
-
progressViewOffset={headerOffset}
174
-
/>
175
-
}
176
-
contentContainerStyle={s.contentContainer}
177
-
style={{paddingTop: headerOffset}}
178
-
onScroll={onScroll}
179
-
scrollEventThrottle={scrollEventThrottle}
180
-
indicatorStyle={theme.colorScheme === 'dark' ? 'white' : 'black'}
181
-
onEndReached={onEndReached}
182
-
onEndReachedThreshold={0.6}
183
-
removeClippedSubviews={true}
184
-
contentOffset={{x: 0, y: headerOffset * -1}}
185
-
extraData={extraData}
186
-
// @ts-ignore our .web version only -prf
187
-
desktopFixedHeight
188
-
/>
189
-
)}
157
+
<FlatList
158
+
testID={testID ? `${testID}-flatlist` : undefined}
159
+
ref={scrollElRef}
160
+
data={!feed.hasLoaded ? [LOADING_ITEM] : data}
161
+
keyExtractor={item => item._reactKey}
162
+
renderItem={renderItem}
163
+
ListFooterComponent={FeedFooter}
164
+
ListHeaderComponent={ListHeaderComponent}
165
+
refreshControl={
166
+
<RefreshControl
167
+
refreshing={isRefreshing}
168
+
onRefresh={onRefresh}
169
+
tintColor={pal.colors.text}
170
+
titleColor={pal.colors.text}
171
+
progressViewOffset={headerOffset}
172
+
/>
173
+
}
174
+
contentContainerStyle={s.contentContainer}
175
+
style={{paddingTop: headerOffset}}
176
+
onScroll={onScroll}
177
+
scrollEventThrottle={scrollEventThrottle}
178
+
indicatorStyle={theme.colorScheme === 'dark' ? 'white' : 'black'}
179
+
onEndReached={onEndReached}
180
+
onEndReachedThreshold={0.6}
181
+
removeClippedSubviews={true}
182
+
contentOffset={{x: 0, y: headerOffset * -1}}
183
+
extraData={extraData}
184
+
// @ts-ignore our .web version only -prf
185
+
desktopFixedHeight
186
+
/>
190
187
</View>
191
188
)
192
189
})
+7
-1
src/view/screens/Home.tsx
+7
-1
src/view/screens/Home.tsx
···
56
56
const feeds = []
57
57
for (const feed of pinned) {
58
58
const model = new PostsFeedModel(store, 'custom', {feed: feed.uri})
59
-
model.setup()
60
59
feeds.push(model)
61
60
}
62
61
pagerRef.current?.setPage(0)
···
168
167
onForeground: () => doPoll(true),
169
168
})
170
169
const isScreenFocused = useIsFocused()
170
+
171
+
React.useEffect(() => {
172
+
// called on first load
173
+
if (!feed.hasLoaded && isPageFocused) {
174
+
feed.setup()
175
+
}
176
+
}, [isPageFocused, feed])
171
177
172
178
const doPoll = React.useCallback(
173
179
(knownActive = false) => {