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

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
-      label={topic.label}
-      to={topic.url}
-      style={[a.flex_col, style]}
-      {...rest}>
+    <InternalLink label={topic.label} to={topic.url} {...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