Collection of fixes to list rendering (#127)

* Fix bug that caused endless spinners in profile feeds

* Bundle fetches of suggested actors into one update

* Fixes to suggested follow rendering

src/state/models/suggested-actors-view.ts

@@ -1,4 +1,4 @@
-import {makeAutoObservable} from 'mobx'
+import {makeAutoObservable, runInAction} from 'mobx'
 import {AppBskyActorGetSuggestions as GetSuggestions} from '@atproto/api'
 import {RootStoreModel} from './root-store'
 
@@ -89,33 +89,32 @@ export class SuggestedActorsViewModel {
         this.suggestions = []
       }
       let res
-      let totalAdded = 0
+      let items: SuggestedActor[] = []
       do {
         res = await this.rootStore.api.app.bsky.actor.getSuggestions({
           limit: PAGE_SIZE,
           cursor: this.loadMoreCursor,
         })
-        totalAdded += await this._appendAll(res)
-      } while (totalAdded < PAGE_SIZE && this.hasMore)
+        this.loadMoreCursor = res.data.cursor
+        this.hasMore = !!this.loadMoreCursor
+        items = items.concat(
+          res.data.actors.filter(actor => {
+            if (actor.did === this.rootStore.me.did) {
+              return false // skip self
+            }
+            if (actor.myState?.follow) {
+              return false // skip already-followed users
+            }
+            return true
+          }),
+        )
+      } while (items.length < PAGE_SIZE && this.hasMore)
+      runInAction(() => {
+        this.suggestions = this.suggestions.concat(items)
+      })
       this._xIdle()
     } catch (e: any) {
       this._xIdle(e)
     }
   }
-
-  private async _appendAll(res: GetSuggestions.Response) {
-    this.loadMoreCursor = res.data.cursor
-    this.hasMore = !!this.loadMoreCursor
-    const newSuggestions = res.data.actors.filter(actor => {
-      if (actor.did === this.rootStore.me.did) {
-        return false // skip self
-      }
-      if (actor.myState?.follow) {
-        return false // skip already-followed users
-      }
-      return true
-    })
-    this.suggestions = this.suggestions.concat(newSuggestions)
-    return newSuggestions.length
-  }
 }

src/view/com/discover/SuggestedFollows.tsx

@@ -94,6 +94,7 @@ export const SuggestedFollows = observer(
       if (asLinks) {
         return (
           <Link
+            key={item.did}
             href={`/profile/${item.handle}`}
             title={item.displayName || item.handle}>
             <User
@@ -107,6 +108,7 @@ export const SuggestedFollows = observer(
       }
       return (
         <User
+          key={item.did}
           item={item}
           follow={follows[item.did]}
           onPressFollow={onPressFollow}
@@ -141,7 +143,6 @@ export const SuggestedFollows = observer(
                 </View>
               )}
               contentContainerStyle={s.contentContainer}
-              style={s.flex1}
             />
           </View>
         )}
@@ -221,7 +222,7 @@ const User = ({
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
+    height: '100%',
   },
 
   suggestionsContainer: {

src/view/screens/Profile.tsx

@@ -127,7 +127,7 @@ export const Profile = observer(({navIdx, visible, params}: ScreenParams) => {
           }
           if (!uiState.feed.hasMore) {
             items = items.concat([END_ITEM])
-          } else {
+          } else if (uiState.feed.isLoading) {
             Footer = LoadingMoreFooter
           }
           renderItem = (item: any) => {