Overfetch trending topics before filtering (#11477)

src/components/interstitials/Trending.tsx

@@ -1,154 +0,0 @@
-import {useCallback} from 'react'
-import {ScrollView, View} from 'react-native'
-import {useLingui} from '@lingui/react/macro'
-
-import {
-  useTrendingSettings,
-  useTrendingSettingsApi,
-} from '#/state/preferences/trending'
-import {useGetTrendsQuery} from '#/state/queries/trending/useGetTrendsQuery'
-import {useTrendingConfig} from '#/state/service-config'
-import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
-import {BlockDrawerGesture} from '#/view/shell/BlockDrawerGesture'
-import {atoms as a, useGutters, useTheme} from '#/alf'
-import {Button, ButtonIcon} from '#/components/Button'
-import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
-import {Trending2_Stroke2_Corner2_Rounded as Graph} from '#/components/icons/Trending'
-import * as Prompt from '#/components/Prompt'
-import {TrendingTopicLink} from '#/components/TrendingTopics'
-import {Text} from '#/components/Typography'
-import {useAnalytics} from '#/analytics'
-
-const TRENDING_LIMIT = 14
-
-export function TrendingInterstitial() {
-  const {enabled} = useTrendingConfig()
-  const {trendingDisabled} = useTrendingSettings()
-  return enabled && !trendingDisabled ? <Inner /> : null
-}
-
-export function Inner() {
-  const t = useTheme()
-  const {t: l} = useLingui()
-  const ax = useAnalytics()
-  const gutters = useGutters([0, 'base', 0, 'base'])
-  const trendingPrompt = Prompt.usePromptControl()
-  const {setTrendingDisabled} = useTrendingSettingsApi()
-  const {
-    data: trending,
-    error,
-    isLoading,
-  } = useGetTrendsQuery({
-    limit: TRENDING_LIMIT,
-    refetchOnWindowFocus: true,
-  })
-  const noTopics = !isLoading && !error && !trending?.trends?.length
-
-  const onConfirmHide = useCallback(() => {
-    ax.metric('trendingTopics:hide', {context: 'interstitial'})
-    setTrendingDisabled(true)
-  }, [ax, setTrendingDisabled])
-
-  return error || noTopics ? null : (
-    <View style={[t.atoms.border_contrast_low, a.border_t, a.border_b]}>
-      <BlockDrawerGesture>
-        <ScrollView
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          decelerationRate="fast">
-          <View style={[gutters, a.flex_row, a.align_center, a.gap_lg]}>
-            <View style={{paddingLeft: 4, paddingRight: 2}}>
-              <Graph size="sm" />
-            </View>
-            {isLoading ? (
-              <View style={[a.py_lg, a.flex_row, a.gap_lg, a.align_center]}>
-                <LoadingPlaceholder
-                  width={80}
-                  height={undefined}
-                  style={{alignSelf: 'stretch'}}
-                />
-                <LoadingPlaceholder
-                  width={50}
-                  height={undefined}
-                  style={{alignSelf: 'stretch'}}
-                />
-                <LoadingPlaceholder
-                  width={120}
-                  height={undefined}
-                  style={{alignSelf: 'stretch'}}
-                />
-                <LoadingPlaceholder
-                  width={30}
-                  height={undefined}
-                  style={{alignSelf: 'stretch'}}
-                />
-                <LoadingPlaceholder
-                  width={180}
-                  height={undefined}
-                  style={{alignSelf: 'stretch'}}
-                />
-                <Text
-                  style={[
-                    t.atoms.text_contrast_medium,
-                    a.text_sm,
-                    a.font_semi_bold,
-                  ]}>
-                  {' '}
-                </Text>
-              </View>
-            ) : !trending?.trends ? null : (
-              <>
-                {trending.trends.map((topic, index) => {
-                  const rank = index + 1
-                  return (
-                    <TrendingTopicLink
-                      key={topic.link}
-                      topic={topic}
-                      metricContext="interstitial"
-                      rank={rank}
-                      recId={trending.recId}
-                      onPress={() => {
-                        ax.metric('trendingTopic:click', {
-                          context: 'interstitial',
-                          rank,
-                          recId: trending.recId,
-                        })
-                      }}>
-                      <View style={[a.py_lg]}>
-                        <Text
-                          style={[
-                            t.atoms.text_contrast_medium,
-                            a.text_sm,
-                            a.font_semi_bold,
-                          ]}>
-                          {topic.topic}
-                        </Text>
-                      </View>
-                    </TrendingTopicLink>
-                  )
-                })}
-                <Button
-                  label={l`Hide trending topics`}
-                  size="tiny"
-                  variant="ghost"
-                  color="secondary"
-                  shape="round"
-                  onPress={() => trendingPrompt.open()}>
-                  <ButtonIcon icon={X} />
-                </Button>
-              </>
-            )}
-          </View>
-        </ScrollView>
-      </BlockDrawerGesture>
-
-      <Prompt.Basic
-        control={trendingPrompt}
-        title={l`Hide trending topics?`}
-        description={l`You can update this later from your settings.`}
-        confirmButtonCta={l`Hide`}
-        onConfirm={onConfirmHide}
-      />
-    </View>
-  )
-}

src/screens/Search/modules/ExploreTrendingTopics.tsx

@@ -11,6 +11,7 @@ import {
   useTrendingSettingsApi,
 } from '#/state/preferences/trending'
 import {
+  DEFAULT_FETCH_LIMIT,
   DEFAULT_LIMIT,
   useGetTrendsQuery,
 } from '#/state/queries/trending/useGetTrendsQuery'
@@ -57,7 +58,10 @@ function Inner() {
     error,
     isLoading,
     isRefetching,
-  } = useGetTrendsQuery({limit: topicCount})
+  } = useGetTrendsQuery({
+    fetchLimit: Math.min(topicCount * 2, DEFAULT_FETCH_LIMIT),
+    limit: topicCount,
+  })
   const noTopics = !isLoading && !error && !trending?.trends?.length
   const showLoading = isLoading || isRefetching
 

src/state/queries/trending/useGetTrendsQuery.ts

@@ -14,8 +14,10 @@ import {useAppviewClient} from '#/state/session'
 import {app} from '#/lexicons'
 
 export const DEFAULT_LIMIT = 5
+export const DEFAULT_FETCH_LIMIT = 20
 
 type QueryProps = {
+  fetchLimit?: number
   limit?: number
   refetchOnWindowFocus?: boolean
 }
@@ -29,12 +31,13 @@ function dedupe<T extends {link: string}>(trends: T[]): T[] {
   })
 }
 
-export const createGetTrendsQueryKey = (limit?: number) =>
+export const createGetTrendsQueryKey = (fetchLimit?: number) =>
-  limit === undefined ? ['trends'] : ['trends', {limit}]
+  fetchLimit === undefined ? ['trends'] : ['trends', {limit: fetchLimit}]
 
 export function useGetTrendsQuery(props: QueryProps = {}) {
   const client = useAppviewClient()
   const {data: preferences} = usePreferencesQuery()
+  const fetchLimit = props.fetchLimit ?? DEFAULT_FETCH_LIMIT
   const limit = props.limit ?? DEFAULT_LIMIT
   const mutedWords = useMemo(() => {
     return preferences?.moderationPrefs?.mutedWords || []
@@ -44,13 +47,13 @@ export function useGetTrendsQuery(props: QueryProps = {}) {
     enabled: !!preferences,
     refetchOnWindowFocus: props.refetchOnWindowFocus,
     staleTime: STALE.MINUTES.THREE,
-    queryKey: createGetTrendsQueryKey(limit),
+    queryKey: createGetTrendsQueryKey(fetchLimit),
     queryFn: async () => {
       const contentLangs = getContentLanguages().join(',')
       const data = await client.call(
         app.bsky.unspecced.getTrends,
         {
-          limit,
+          limit: fetchLimit,
         },
         {
           headers: {
@@ -75,10 +78,10 @@ export function useGetTrendsQuery(props: QueryProps = {}) {
                 text: `${t.topic} ${t.displayName} ${t.category}`,
               })
             }),
-          ),
+          ).slice(0, limit),
         }
       },
-      [mutedWords],
+      [limit, mutedWords],
     ),
   })
 }

src/view/com/posts/PostFeed.tsx

@@ -62,7 +62,6 @@ import {
   PostFeedVideoGridRowPlaceholder,
 } from '#/components/feeds/PostFeedVideoGridRow'
 import {FeedTrendingTopicsInterstitial} from '#/components/interstitials/FeedTrendingTopics'
-import {TrendingInterstitial} from '#/components/interstitials/Trending'
 import {TrendingVideos as TrendingVideosInterstitial} from '#/components/interstitials/TrendingVideos'
 import {isStandardSiteEmbed} from '#/components/Post/Embed/StandardSiteEmbed/utils'
 import {RichText} from '#/components/RichText'
@@ -146,10 +145,6 @@ type FeedRow =
       type: 'interstitialProgressGuide'
       key: string
     }
-  | {
-      type: 'interstitialTrending'
-      key: string
-    }
   | {
       type: 'interstitialFeedTrendingTopics'
       key: string
@@ -853,8 +848,6 @@ let PostFeed = ({
         return <ProgressGuide />
       } else if (row.type === 'ageAssuranceBanner') {
         return <AgeAssuranceDismissibleFeedBanner />
-      } else if (row.type === 'interstitialTrending') {
-        return <TrendingInterstitial />
       } else if (row.type === 'interstitialFeedTrendingTopics') {
         return (
           <FeedTrendingTopicsInterstitial feedSliceIndex={row.feedSliceIndex} />

src/view/shell/desktop/SidebarTrendingTopics.tsx

@@ -46,7 +46,6 @@ function Inner() {
     error,
     isLoading,
   } = useGetTrendsQuery({
-    limit: DEFAULT_LIMIT,
     refetchOnWindowFocus: true,
   })
   const noTopics = !isLoading && !error && !trending?.trends?.length