filter out followed profiles, make suer enough are loaded (#8090)

src/screens/Search/Explore.tsx

@@ -36,6 +36,7 @@ import * as ModuleHeader from './components/ModuleHeader'
 import {
   SuggestedAccountsTabBar,
   SuggestedProfileCard,
+  useLoadEnoughProfiles,
 } from './modules/ExploreSuggestedAccounts'
 
 function LoadMore({item}: {item: ExploreScreenItems & {type: 'loadMore'}}) {
@@ -186,6 +187,14 @@ export function Explore({
     enabled: !!selectedInterest,
     limit: 10,
   })
+  useLoadEnoughProfiles({
+    interest: selectedInterest,
+    data: interestProfiles,
+    isLoading: isLoadingInterestProfiles,
+    isFetchingNextPage: isFetchingNextInterestProfilesPage,
+    hasNextPage: hasNextInterestProfilesPage,
+    fetchNextPage: fetchNextInterestProfilesPage,
+  })
   const {
     data: feeds,
     hasNextPage: hasNextFeedsPage,
@@ -295,7 +304,7 @@ export function Explore({
         const profileItems: ExploreScreenItems[] = []
         for (const page of profiles.pages) {
           for (const actor of page.actors) {
-            if (!seen.has(actor.did)) {
+            if (!seen.has(actor.did) && !actor.viewer?.following) {
               seen.add(actor.did)
               profileItems.push({
                 type: 'profile',
@@ -308,19 +317,21 @@ export function Explore({
         }
 
         if (profileItems.length === 0) {
-          // no items! remove the header
+          if (!hasNextProfilesPage) {
-          i.pop()
+            // no items! remove the header
+            i.pop()
+          }
         } else {
           i.push(...profileItems)
-          if (hasNextProfilesPage) {
+        }
-            i.push({
+        if (hasNextProfilesPage) {
-              type: 'loadMore',
+          i.push({
-              key: 'loadMoreProfiles',
+            type: 'loadMore',
-              message: _(msg`Load more suggested accounts`),
+            key: 'loadMoreProfiles',
-              isLoadingMore: isLoadingMoreProfiles,
+            message: _(msg`Load more suggested accounts`),
-              onLoadMore: onLoadMoreProfiles,
+            isLoadingMore: isLoadingMoreProfiles,
-            })
+            onLoadMore: onLoadMoreProfiles,
-          }
+          })
         }
       } else {
         if (profilesError) {
@@ -384,7 +395,9 @@ export function Explore({
           })
         } else {
           if (feedItems.length === 0) {
-            i.pop()
+            if (!hasNextFeedsPage) {
+              i.pop()
+            }
           } else {
             // This query doesn't follow the limit very well, so the first press of the
             // load more button just unslices the array back to ~10 items
@@ -393,15 +406,15 @@ export function Explore({
             } else {
               i.push(...feedItems)
             }
-            if (hasNextFeedsPage) {
+          }
-              i.push({
+          if (hasNextFeedsPage) {
-                type: 'loadMore',
+            i.push({
-                key: 'loadMoreFeeds',
+              type: 'loadMore',
-                message: _(msg`Load more suggested feeds`),
+              key: 'loadMoreFeeds',
-                isLoadingMore: isLoadingMoreFeeds,
+              message: _(msg`Load more suggested feeds`),
-                onLoadMore: onLoadMoreFeeds,
+              isLoadingMore: isLoadingMoreFeeds,
-              })
+              onLoadMore: onLoadMoreFeeds,
-            }
+            })
           }
         }
       } else {

src/screens/Search/modules/ExploreSuggestedAccounts.tsx

@@ -1,8 +1,9 @@
-import {memo} from 'react'
+import {memo, useEffect} from 'react'
 import {View} from 'react-native'
-import {type ModerationOpts} from '@atproto/api'
+import {type AppBskyActorSearchActors, type ModerationOpts} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import {type InfiniteData} from '@tanstack/react-query'
 
 import {logger} from '#/logger'
 import {usePreferencesQuery} from '#/state/queries/preferences'
@@ -19,6 +20,36 @@ import {boostInterests, Tabs} from '#/components/ProgressGuide/FollowDialog'
 import {Text} from '#/components/Typography'
 import type * as bsky from '#/types/bsky'
 
+export function useLoadEnoughProfiles({
+  interest,
+  data,
+  isLoading,
+  isFetchingNextPage,
+  hasNextPage,
+  fetchNextPage,
+}: {
+  interest: string | null
+  data?: InfiniteData<AppBskyActorSearchActors.OutputSchema>
+  isLoading: boolean
+  isFetchingNextPage: boolean
+  hasNextPage: boolean
+  fetchNextPage: () => Promise<unknown>
+}) {
+  const profileCount =
+    data?.pages.flatMap(page =>
+      page.actors.filter(actor => !actor.viewer?.following),
+    ).length || 0
+  const isAnyLoading = isLoading || isFetchingNextPage
+  const isEnoughProfiles = profileCount > 3
+  const shouldFetchMore = !isEnoughProfiles && hasNextPage && !!interest
+  useEffect(() => {
+    if (shouldFetchMore && !isAnyLoading) {
+      logger.info('Not enough suggested accounts - fetching more')
+      fetchNextPage()
+    }
+  }, [shouldFetchMore, fetchNextPage, isAnyLoading, interest])
+}
+
 export function SuggestedAccountsTabBar({
   selectedInterest,
   onSelectInterest,