Handle service config, enablement, load states, update lex contract

src/App.native.tsx

@@ -57,6 +57,7 @@ import {Provider as ProgressGuideProvider} from '#/state/shell/progress-guide'
 import {Provider as SelectedFeedProvider} from '#/state/shell/selected-feed'
 import {Provider as StarterPackProvider} from '#/state/shell/starter-pack'
 import {Provider as HiddenRepliesProvider} from '#/state/threadgate-hidden-replies'
+import {Provider as TrendingConfigProvider} from '#/state/trending-config'
 import {TestCtrls} from '#/view/com/testing/TestCtrls'
 import {Provider as VideoVolumeProvider} from '#/view/com/util/post-embeds/VideoVolumeContext'
 import * as Toast from '#/view/com/util/Toast'
@@ -143,12 +144,14 @@ function InnerApp() {
                                       <BackgroundNotificationPreferencesProvider>
                                         <MutedThreadsProvider>
                                           <ProgressGuideProvider>
-                                            <GestureHandlerRootView
+                                            <TrendingConfigProvider>
-                                              style={s.h100pct}>
+                                              <GestureHandlerRootView
-                                              <TestCtrls />
+                                                style={s.h100pct}>
-                                              <Shell />
+                                                <TestCtrls />
-                                              <NuxDialogs />
+                                                <Shell />
-                                            </GestureHandlerRootView>
+                                                <NuxDialogs />
+                                              </GestureHandlerRootView>
+                                            </TrendingConfigProvider>
                                           </ProgressGuideProvider>
                                         </MutedThreadsProvider>
                                       </BackgroundNotificationPreferencesProvider>

src/App.web.tsx

@@ -47,6 +47,7 @@ import {Provider as ProgressGuideProvider} from '#/state/shell/progress-guide'
 import {Provider as SelectedFeedProvider} from '#/state/shell/selected-feed'
 import {Provider as StarterPackProvider} from '#/state/shell/starter-pack'
 import {Provider as HiddenRepliesProvider} from '#/state/threadgate-hidden-replies'
+import {Provider as TrendingConfigProvider} from '#/state/trending-config'
 import {Provider as ActiveVideoProvider} from '#/view/com/util/post-embeds/ActiveVideoWebContext'
 import {Provider as VideoVolumeProvider} from '#/view/com/util/post-embeds/VideoVolumeContext'
 import * as Toast from '#/view/com/util/Toast'
@@ -127,8 +128,10 @@ function InnerApp() {
                                         <MutedThreadsProvider>
                                           <SafeAreaProvider>
                                             <ProgressGuideProvider>
-                                              <Shell />
+                                              <TrendingConfigProvider>
-                                              <NuxDialogs />
+                                                <Shell />
+                                                <NuxDialogs />
+                                              </TrendingConfigProvider>
                                             </ProgressGuideProvider>
                                           </SafeAreaProvider>
                                         </MutedThreadsProvider>

src/components/TrendingTopics.tsx

@@ -91,7 +91,6 @@ export function TrendingTopic({
 
       <Text
         style={[
-          a.flex_1,
           a.font_bold,
           a.leading_tight,
           isSmall ? [a.text_sm] : [a.text_md, {paddingBottom: 1}],
@@ -103,7 +102,13 @@ export function TrendingTopic({
   )
 }
 
-export function TrendingTopicSkeleton({size}: {size: 'large' | 'small'}) {
+export function TrendingTopicSkeleton({
+  size = 'large',
+  index = 0,
+}: {
+  size?: 'large' | 'small'
+  index?: number
+}) {
   const t = useTheme()
   const isSmall = size === 'small'
   return (
@@ -115,11 +120,11 @@ export function TrendingTopicSkeleton({size}: {size: 'large' | 'small'}) {
         t.atoms.bg_contrast_25,
         isSmall
           ? {
-              width: 90,
+              width: index % 2 === 0 ? 75 : 90,
               height: 27,
             }
           : {
-              width: 110,
+              width: index % 2 === 0 ? 90 : 110,
               height: 36,
             },
       ]}
@@ -130,7 +135,6 @@ export function TrendingTopicSkeleton({size}: {size: 'large' | 'small'}) {
 export function TrendingTopicLink({
   topic: raw,
   children,
-  style,
   ...rest
 }: {
   topic: TrendingTopic
@@ -140,11 +144,7 @@ export function TrendingTopicLink({
   if (!topic) return null
 
   return (
-    <InternalLink
+    <InternalLink label={topic.label} to={topic.url} {...rest}>
-      label={topic.label}
-      to={topic.url}
-      style={[a.flex_col, style]}
-      {...rest}>
       {children}
     </InternalLink>
   )

src/components/interstitials/Trending.tsx

@@ -2,26 +2,44 @@ import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {useTrendingSettingsApi} from '#/state/preferences/trending'
+import {
+  useTrendingSettings,
+  useTrendingSettingsApi,
+} from '#/state/preferences/trending'
+import {
+  DEFAULT_LIMIT as TRENDING_TOPICS_COUNT,
+  useTrendingTopics,
+} from '#/state/queries/trending/useTrendingTopics'
+import {useTrendingConfig} from '#/state/trending-config'
 import {atoms as a, tokens, useGutters, useTheme} from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
 import {GradientFill} from '#/components/GradientFill'
 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
 import {Trending2_Stroke2_Corner2_Rounded as Graph} from '#/components/icons/Trending2'
 import * as Prompt from '#/components/Prompt'
-import {TrendingTopic, TrendingTopicLink} from '#/components/TrendingTopics'
+import {
+  TrendingTopic,
+  TrendingTopicLink,
+  TrendingTopicSkeleton,
+} from '#/components/TrendingTopics'
 import {Text} from '#/components/Typography'
-import {useTrendingTopics} from '#/state/queries/trending/useTrendingTopics'
 
 export function TrendingInterstitial() {
+  const {enabled} = useTrendingConfig()
+  const {trendingDiscoverHidden} = useTrendingSettings()
+  return !enabled ? null : trendingDiscoverHidden ? null : <Inner />
+}
+
+export function Inner() {
   const t = useTheme()
   const {_} = useLingui()
   const gutters = useGutters(['base'])
   const trendingPrompt = Prompt.usePromptControl()
-  const {data: topics, error, isLoading} = useTrendingTopics()
   const {setTrendingDiscoverHidden} = useTrendingSettingsApi()
+  const {data: trending, error, isLoading} = useTrendingTopics()
+  const noTopics = !isLoading && !error && !trending?.topics
 
-  return (
+  return error || noTopics ? null : (
     <View
       style={[
         gutters,
@@ -33,12 +51,14 @@ export function TrendingInterstitial() {
       <View style={[a.flex_row, a.align_center, a.gap_sm]}>
         <View style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
           <Graph size="lg" />
-          <Text style={[a.text_lg, a.font_heavy, t.atoms.text_contrast_medium]}>
+          <Text style={[a.text_lg, a.font_heavy]}>
             <Trans>Trending</Trans>
           </Text>
           <View style={[a.py_xs, a.px_sm, a.rounded_sm, a.overflow_hidden]}>
             <GradientFill gradient={tokens.gradients.primary} />
-            <Text style={[a.text_md, a.font_heavy]}>BETA</Text>
+            <Text style={[a.text_sm, a.font_heavy, {color: 'white'}]}>
+              <Trans>BETA</Trans>
+            </Text>
           </View>
         </View>
 
@@ -54,9 +74,13 @@ export function TrendingInterstitial() {
       </View>
 
       <View style={[a.flex_row, a.flex_wrap, a.gap_sm]}>
-        {isLoading ? null : error || !topics ? null : (
+        {isLoading ? (
+          Array(TRENDING_TOPICS_COUNT)
+            .fill(0)
+            .map((_n, i) => <TrendingTopicSkeleton key={i} index={i} />)
+        ) : !trending?.topics ? null : (
           <>
-            {topics.map(topic => (
+            {trending.topics.map(topic => (
               <TrendingTopicLink key={topic.link} topic={topic}>
                 {({hovered}) => (
                   <TrendingTopic

src/screens/Search/components/ExploreTrendingTopics.tsx

@@ -1,35 +1,94 @@
 import {View} from 'react-native'
+import {Trans} from '@lingui/macro'
 
-import {useTrendingTopics} from '#/state/queries/trending/useTrendingTopics'
+import {isWeb} from '#/platform/detection'
-import {atoms as a, useTheme, useGutters} from '#/alf'
+import {
-import {TrendingTopic, TrendingTopicLink} from '#/components/TrendingTopics'
+  DEFAULT_LIMIT as TRENDING_TOPICS_COUNT,
+  useTrendingTopics,
+} from '#/state/queries/trending/useTrendingTopics'
+import {useTrendingConfig} from '#/state/trending-config'
+import {atoms as a, tokens, useGutters, useTheme} from '#/alf'
+import {GradientFill} from '#/components/GradientFill'
+import {Trending2_Stroke2_Corner2_Rounded as Trending} from '#/components/icons/Trending2'
+import {
+  TrendingTopic,
+  TrendingTopicLink,
+  TrendingTopicSkeleton,
+} from '#/components/TrendingTopics'
+import {Text} from '#/components/Typography'
 
 export function ExploreTrendingTopics() {
+  const {enabled} = useTrendingConfig()
+  return enabled ? <Inner /> : null
+}
+
+function Inner() {
   const t = useTheme()
   const gutters = useGutters([0, 'compact'])
-  const {data: topics, error, isLoading} = useTrendingTopics()
+  const {data: trending, error, isLoading} = useTrendingTopics()
+  const noTopics = !isLoading && !error && !trending?.topics
 
-  return (
+  return error || noTopics ? null : (
-    <View style={[a.flex_row, a.flex_wrap, a.gap_sm, gutters]}>
+    <>
-      {isLoading ? null : error || !topics ? null : (
+      <View
-        <>
+        style={[
-          {topics.map(topic => (
+          isWeb
-            <TrendingTopicLink key={topic.link} topic={topic}>
+            ? [a.flex_row, a.px_lg, a.py_lg, a.pt_2xl, a.gap_md]
-              {({hovered}) => (
+            : [{flexDirection: 'row-reverse'}, a.p_lg, a.pt_2xl, a.gap_md],
-                <TrendingTopic
+          a.border_b,
-                  topic={topic}
+          t.atoms.border_contrast_low,
-                  style={[
+        ]}>
-                    hovered && [
+        <View style={[a.flex_1, a.gap_sm]}>
-                      t.atoms.border_contrast_high,
+          <View style={[a.flex_row, a.align_center, a.gap_sm]}>
-                      t.atoms.bg_contrast_25,
+            <Trending
-                    ],
+              size="lg"
-                  ]}
+              fill={t.palette.primary_500}
-                />
+              style={{marginLeft: -2}}
-              )}
+            />
-            </TrendingTopicLink>
+            <Text style={[a.text_2xl, a.font_heavy, t.atoms.text]}>
-          ))}
+              <Trans>Trending</Trans>
-        </>
+            </Text>
-      )}
+            <View style={[a.py_xs, a.px_sm, a.rounded_sm, a.overflow_hidden]}>
-    </View>
+              <GradientFill gradient={tokens.gradients.primary} />
+              <Text style={[a.text_sm, a.font_heavy, {color: 'white'}]}>
+                <Trans>BETA</Trans>
+              </Text>
+            </View>
+          </View>
+          <Text style={[t.atoms.text_contrast_high, a.leading_snug]}>
+            <Trans>What people are posting about now</Trans>
+          </Text>
+        </View>
+      </View>
+
+      <View style={[a.pt_md, a.pb_lg]}>
+        <View
+          style={[a.flex_row, a.justify_start, a.flex_wrap, a.gap_sm, gutters]}>
+          {isLoading ? (
+            Array(TRENDING_TOPICS_COUNT)
+              .fill(0)
+              .map((_, i) => <TrendingTopicSkeleton key={i} index={i} />)
+          ) : !trending?.topics ? null : (
+            <>
+              {trending.topics.map(topic => (
+                <TrendingTopicLink key={topic.link} topic={topic}>
+                  {({hovered}) => (
+                    <TrendingTopic
+                      topic={topic}
+                      style={[
+                        hovered && [
+                          t.atoms.border_contrast_high,
+                          t.atoms.bg_contrast_25,
+                        ],
+                      ]}
+                    />
+                  )}
+                </TrendingTopicLink>
+              ))}
+            </>
+          )}
+        </View>
+      </View>
+    </>
   )
 }

src/state/queries/service-config.ts

@@ -0,0 +1,35 @@
+import {useQuery} from '@tanstack/react-query'
+
+import {useAgent} from '#/state/session'
+
+type ServiceConfig = {
+  checkEmailConfirmed: boolean
+  trendingTopicsEnabled: boolean
+  trendingTopicsLangs: string[]
+}
+
+export function useServiceConfigQuery() {
+  const agent = useAgent()
+  return useQuery<ServiceConfig>({
+    queryKey: ['service-config'],
+    queryFn: async () => {
+      try {
+        const {data} = await agent.api.app.bsky.unspecced.getConfig()
+        return {
+          checkEmailConfirmed: Boolean(data.checkEmailConfirmed),
+          // TODO
+          trendingTopicsEnabled: true, // Boolean(data.trendingTopicsEnabled),
+          // TODO
+          trendingTopicsLangs: ['en'], // data.trendingTopicsLangs ?? [],
+        }
+      } catch (e) {
+        return {
+          checkEmailConfirmed: false,
+          trendingTopicsEnabled: false,
+          trendingTopicsLangs: [],
+        }
+      }
+    },
+    staleTime: 5 * 60 * 1000,
+  })
+}

src/state/queries/trending/useTrendingTopics.ts

@@ -10,14 +10,38 @@ export type TrendingTopic = {
   link: string
 }
 
-export const trendingTopicsQueryKey = ['trending-topics']
+export const DEFAULT_LIMIT = 12
 
-// TODO ideally handle down-state faster
+export const trendingTopicsQueryKey = ['trending-topics']
 
 export function useTrendingTopics() {
   return useQuery({
     queryKey: trendingTopicsQueryKey,
     async queryFn() {
+      /*
+      try {
+        const params = new URLSearchParams()
+        params.set('viewer', agent.session?.did || '')
+        const res = await fetch(
+          ``,
+          {
+            headers: {
+              Authorization:
+                'Bearer ',
+            },
+          },
+        )
+
+        if (!res.ok) {
+          throw new Error('Failed to fetch trending topics')
+        }
+
+        const data = await res.json()
+        return data.topics
+      } catch (e) {
+        console.error(e)
+      }
+      */
       const topics: TrendingTopic[] = [
         {
           topic: '#atproto',
@@ -50,7 +74,10 @@ export function useTrendingTopics() {
           link: 'at://did:plc:vpkhqolt662uhesyj6nxm7ys/app.bsky.feed.generator/infreq',
         },
       ]
-      return topics
+      return {
+        topics,
+        recommended: [],
+      }
     },
   })
 }

src/state/shell/trending-config.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import {useLanguagePrefs} from '#/state/preferences/languages'
+import {useServiceConfigQuery} from '#/state/queries/service-config'
+
+type Context = {
+  enabled: boolean
+}
+
+const Context = React.createContext<Context>({
+  enabled: false,
+})
+
+export function Provider({children}: React.PropsWithChildren<{}>) {
+  const langPrefs = useLanguagePrefs()
+  const {data: config} = useServiceConfigQuery()
+  const ctx = React.useMemo<Context>(() => {
+    const serviceEnabled = Boolean(config?.trendingTopicsEnabled)
+    const languageIsSupported = langPrefs.contentLanguages.some(lang => {
+      return (config?.trendingTopicsLangs ?? []).includes(lang)
+    })
+    return {
+      enabled: serviceEnabled && languageIsSupported,
+    }
+  }, [config, langPrefs])
+  return <Context.Provider value={ctx}>{children}</Context.Provider>
+}
+
+export function useTrendingConfig() {
+  return React.useContext(Context)
+}

src/state/trending-config.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+
+import {useLanguagePrefs} from '#/state/preferences/languages'
+import {useServiceConfigQuery} from '#/state/queries/service-config'
+
+type Context = {
+  enabled: boolean
+}
+
+const Context = React.createContext<Context>({
+  enabled: false,
+})
+
+export function Provider({children}: React.PropsWithChildren<{}>) {
+  const langPrefs = useLanguagePrefs()
+  const {data: config} = useServiceConfigQuery()
+  const ctx = React.useMemo<Context>(() => {
+    // TODO maybe default to true
+    const serviceEnabled = Boolean(config?.trendingTopicsEnabled)
+    const languageIsSupported = langPrefs.contentLanguages.some(lang => {
+      return (config?.trendingTopicsLangs ?? []).includes(lang)
+    })
+    return {
+      enabled: serviceEnabled && languageIsSupported,
+    }
+  }, [config, langPrefs])
+  return <Context.Provider value={ctx}>{children}</Context.Provider>
+}
+
+export function useTrendingConfig() {
+  return React.useContext(Context)
+}

src/view/screens/Search/Explore.tsx

@@ -25,21 +25,18 @@ import {
   ProfileCardFeedLoadingPlaceholder,
 } from '#/view/com/util/LoadingPlaceholder'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
-import {atoms as a, tokens,useTheme, ViewStyleProp} from '#/alf'
+import {ExploreTrendingTopics} from '#/screens/Search/components/ExploreTrendingTopics'
+import {atoms as a, useTheme, ViewStyleProp} from '#/alf'
 import {Button} from '#/components/Button'
 import * as FeedCard from '#/components/FeedCard'
-import {GradientFill} from '#/components/GradientFill'
 import {ArrowBottom_Stroke2_Corner0_Rounded as ArrowBottom} from '#/components/icons/Arrow'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
 import {Props as SVGIconProps} from '#/components/icons/common'
 import {ListSparkle_Stroke2_Corner0_Rounded as ListSparkle} from '#/components/icons/ListSparkle'
-import {Trending2_Stroke2_Corner2_Rounded as Trending} from '#/components/icons/Trending2'
 import {UserCircle_Stroke2_Corner0_Rounded as Person} from '#/components/icons/UserCircle'
 import {Loader} from '#/components/Loader'
 import * as StarterPackSuggestions from '#/components/StarterPack/Suggestions'
-import * as TrendingTopics from '#/components/TrendingTopics'
 import {Text} from '#/components/Typography'
-import {ExploreTrendingTopics} from "#/screens/Search/components/ExploreTrendingTopics"
 
 function SuggestedItemsHeader({
   title,
@@ -251,7 +248,6 @@ type ExploreScreenItems =
   | {
       type: 'trendingTopics'
       key: string
-      topics: string[]
     }
   | {
       type: 'suggestedStarterPacks'
@@ -349,89 +345,8 @@ export function Explore() {
     i.push({
       type: 'trendingTopics',
       key: `trending-topics`,
-      topics: [
-        '#atproto',
-        'South Korea',
-        'Wired',
-        'Basket Weaving',
-        'Coup',
-        'Chappel Roan',
-        'the juice',
-        'Superman',
-        '#FCF',
-        'Open Web',
-      ],
     })
 
-    /*
-    i.push({
-      type: 'header',
-      key: 'starter-packs-header',
-      title: _(msg`Starter packs`),
-      description: _(msg`Find accounts to follow based on your interests.`),
-      icon: PersonGroup,
-    })
-    i.push({
-      type: 'suggestedStarterPacks',
-      key: 'suggested-starter-packs',
-      starterPacks: [
-        {
-          uri: 'at://did:plc:ragtjsm2j2vknwkz3zp4oxrd/app.bsky.graph.starterpack/3kvaphb2hpf2u',
-          cid: '',
-          indexedAt: '',
-          record: {
-            $type: 'app.bsky.graph.starterpack',
-            description:
-              'Engineers who work on or discuss the ATProtocol, both at Bluesky and in the community',
-            list: 'at://did:plc:ragtjsm2j2vknwkz3zp4oxrd/app.bsky.graph.list/3kvaphagg4e2l',
-            name: 'ATProtocol Hackers',
-          },
-          creator: {
-            did: 'did:plc:ragtjsm2j2vknwkz3zp4oxrd',
-            handle: 'pfrazee.com',
-            displayName: 'Paul Frazee',
-          },
-        },
-        {
-          uri: 'at://did:plc:qrllvid7s54k4hnwtqxwetrf/app.bsky.graph.starterpack/3kvuh7u324m2c',
-          cid: '',
-          indexedAt: '',
-          record: {
-            $type: 'app.bsky.graph.starterpack',
-            createdAt: '2024-06-26T23:23:01.073Z',
-            description:
-              'Legal practice, scholarship, journalism, and argument',
-            feeds: [],
-            list: 'at://did:plc:qrllvid7s54k4hnwtqxwetrf/app.bsky.graph.list/3kvuh7twnjc2m',
-            name: 'Bluesky for Law',
-          },
-          creator: {
-            did: 'did:plc:qrllvid7s54k4hnwtqxwetrf',
-            handle: 'joshuajfriedman.com',
-            displayName: 'Joshua J. Friedman',
-          },
-        },
-        {
-          uri: 'at://did:plc:7exlcsle4mjfhu3wnhcgizz6/app.bsky.graph.starterpack/3laotg2fqva2h',
-          cid: '',
-          indexedAt: '',
-          record: {
-            $type: 'app.bsky.graph.starterpack',
-            createdAt: '2024-11-11T17:22:22.743Z',
-            description: 'people who work at the website, the verge dot com',
-            list: 'at://did:plc:7exlcsle4mjfhu3wnhcgizz6/app.bsky.graph.list/3laotg2bjok2d',
-            name: 'The Verge staff',
-          },
-          creator: {
-            did: 'did:plc:7exlcsle4mjfhu3wnhcgizz6',
-            handle: 'theverge.com',
-            displayName: 'The Verge',
-          },
-        },
-      ],
-    })
-     */
-
     i.push({
       type: 'header',
       key: 'suggested-follows-header',
@@ -596,25 +511,7 @@ export function Explore() {
           )
         }
         case 'trendingTopics': {
-          return (
+          return <ExploreTrendingTopics />
-            <>
-              <SuggestedItemsHeader
-                title={_(msg`Trending`)}
-                description={_(msg`What people are posting about now.`)}
-                icon={Trending}
-                titleChild={
-                  <View
-                    style={[a.py_xs, a.px_sm, a.rounded_sm, a.overflow_hidden]}>
-                    <GradientFill gradient={tokens.gradients.primary} />
-                    <Text style={[a.text_md, a.font_heavy]}>BETA</Text>
-                  </View>
-                }
-              />
-              <View style={[a.pt_md, a.pb_lg]}>
-                <ExploreTrendingTopics />
-              </View>
-            </>
-          )
         }
         case 'suggestedStarterPacks': {
           return (
@@ -696,7 +593,7 @@ export function Explore() {
         }
       }
     },
-    [_, t, moderationOpts],
+    [t, moderationOpts],
   )
 
   // note: actually not a screen, instead it's nested within

src/view/shell/desktop/SidebarTrendingTopics.tsx

@@ -6,7 +6,11 @@ import {
   useTrendingSettings,
   useTrendingSettingsApi,
 } from '#/state/preferences/trending'
-import {useTrendingTopics} from '#/state/queries/trending/useTrendingTopics'
+import {
+  DEFAULT_LIMIT as TRENDING_TOPICS_COUNT,
+  useTrendingTopics,
+} from '#/state/queries/trending/useTrendingTopics'
+import {useTrendingConfig} from '#/state/trending-config'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
 import {Divider} from '#/components/Divider'
@@ -21,8 +25,9 @@ import {
 import {Text} from '#/components/Typography'
 
 export function SidebarTrendingTopics() {
+  const {enabled} = useTrendingConfig()
   const {trendingSidebarHidden} = useTrendingSettings()
-  return trendingSidebarHidden ? null : <Inner />
+  return !enabled ? null : trendingSidebarHidden ? null : <Inner />
 }
 
 function Inner() {
@@ -30,9 +35,8 @@ function Inner() {
   const {_} = useLingui()
   const trendingPrompt = Prompt.usePromptControl()
   const {setTrendingSidebarHidden} = useTrendingSettingsApi()
-
+  const {data: trending, error, isLoading} = useTrendingTopics()
-  const {data: topics, error, isLoading} = useTrendingTopics()
+  const noTopics = !isLoading && !error && !trending?.topics
-  const noTopics = !isLoading && !error && !topics
 
   return error || noTopics ? null : (
     <>
@@ -61,12 +65,14 @@ function Inner() {
 
         <View style={[a.flex_row, a.flex_wrap, a.gap_xs]}>
           {isLoading ? (
-            Array(8)
+            Array(TRENDING_TOPICS_COUNT)
               .fill(0)
-              .map((_, i) => <TrendingTopicSkeleton key={i} size="small" />)
+              .map((_n, i) => (
-          ) : error || !topics ? null : (
+                <TrendingTopicSkeleton key={i} size="small" index={i} />
+              ))
+          ) : !trending?.topics ? null : (
             <>
-              {topics.map(topic => (
+              {trending.topics.map(topic => (
                 <TrendingTopicLink key={topic.link} topic={topic}>
                   {({hovered}) => (
                     <TrendingTopic