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>

src/state/models/feeds/posts.ts

@@ -272,7 +272,7 @@ export class PostsFeedModel {
    * Check if new posts are available
    */
   async checkForLatest() {
-    if (this.hasNewLatest || this.isLoading) {
+    if (!this.hasLoaded || this.hasNewLatest || this.isLoading) {
       return
     }
     const res = await this._getFeed({limit: 1})

src/view/com/posts/Feed.tsx

@@ -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,11 +154,10 @@ 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}
+        data={!feed.hasLoaded ? [LOADING_ITEM] : data}
         keyExtractor={item => item._reactKey}
         renderItem={renderItem}
         ListFooterComponent={FeedFooter}
@@ -186,7 +184,6 @@ export const Feed = observer(function Feed({
         // @ts-ignore our .web version only -prf
         desktopFixedHeight
       />
-      )}
     </View>
   )
 })

src/view/screens/Home.tsx

@@ -56,7 +56,6 @@ export const HomeScreen = withAuthRequired(
       const feeds = []
       for (const feed of pinned) {
         const model = new PostsFeedModel(store, 'custom', {feed: feed.uri})
-        model.setup()
         feeds.push(model)
       }
       pagerRef.current?.setPage(0)
@@ -169,6 +168,13 @@ const FeedPage = observer(
     })
     const isScreenFocused = useIsFocused()
 
+    React.useEffect(() => {
+      // called on first load
+      if (!feed.hasLoaded && isPageFocused) {
+        feed.setup()
+      }
+    }, [isPageFocused, feed])
+
     const doPoll = React.useCallback(
       (knownActive = false) => {
         if (