zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

defer loading of feeds until visible (#1271)

Browse source 
* 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>
This commit is contained in:
Eric Bailey 2023-08-24 18:26:29 -05:00 • committed by GitHub
parent a5981e127f
commit 4654a9a45e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 40 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

67
src/view/com/posts/Feed.tsx
View file

@ -69,14 +69,11 @@ export const Feed = observer(function Feed({
if (feed.loadMoreError) {
feedItems = feedItems.concat([LOAD_MORE_ERROR_ITEM])
}
} else if (feed.isLoading) {
feedItems = feedItems.concat([LOADING_ITEM])
}
return feedItems
}, [
feed.hasError,
feed.hasLoaded,
feed.isLoading,
feed.isEmpty,
feed.slices,
feed.loadMoreError,
@ -97,6 +94,8 @@ export const Feed = observer(function Feed({
}, [feed, track, setIsRefreshing])
const onEndReached = React.useCallback(async () => {
if (!feed.hasLoaded) return
track('Feed:onEndReached')
try {
await feed.loadMore()
@ -155,38 +154,36 @@ export const Feed = observer(function Feed({
return (
<View testID={testID} style={style}>
{data.length > 0 && (
<FlatList
testID={testID ? `${testID}-flatlist` : undefined}
ref={scrollElRef}
data={data}
keyExtractor={item => item._reactKey}
renderItem={renderItem}
ListFooterComponent={FeedFooter}
ListHeaderComponent={ListHeaderComponent}
refreshControl={
<RefreshControl
refreshing={isRefreshing}
onRefresh={onRefresh}
tintColor={pal.colors.text}
titleColor={pal.colors.text}
progressViewOffset={headerOffset}
/>
}
contentContainerStyle={s.contentContainer}
style={{paddingTop: headerOffset}}
onScroll={onScroll}
scrollEventThrottle={scrollEventThrottle}
indicatorStyle={theme.colorScheme === 'dark' ? 'white' : 'black'}
onEndReached={onEndReached}
onEndReachedThreshold={0.6}
removeClippedSubviews={true}
contentOffset={{x: 0, y: headerOffset * -1}}
extraData={extraData}
// @ts-ignore our .web version only -prf
desktopFixedHeight
/>
)}
<FlatList
testID={testID ? `${testID}-flatlist` : undefined}
ref={scrollElRef}
data={!feed.hasLoaded ? [LOADING_ITEM] : data}
keyExtractor={item => item._reactKey}
renderItem={renderItem}
ListFooterComponent={FeedFooter}
ListHeaderComponent={ListHeaderComponent}
refreshControl={
<RefreshControl
refreshing={isRefreshing}
onRefresh={onRefresh}
tintColor={pal.colors.text}
titleColor={pal.colors.text}
progressViewOffset={headerOffset}
/>
}
contentContainerStyle={s.contentContainer}
style={{paddingTop: headerOffset}}
onScroll={onScroll}
scrollEventThrottle={scrollEventThrottle}
indicatorStyle={theme.colorScheme === 'dark' ? 'white' : 'black'}
onEndReached={onEndReached}
onEndReachedThreshold={0.6}
removeClippedSubviews={true}
contentOffset={{x: 0, y: headerOffset * -1}}
extraData={extraData}
// @ts-ignore our .web version only -prf
desktopFixedHeight
/>
</View>
)
})