From b2de086c3b814176d4faeca549e4cbf1a129c977 Mon Sep 17 00:00:00 2001
From: DS Boyce <260543580+ds-boyce@users.noreply.github.com>
Date: Wed, 22 Jul 2026 13:58:26 -0700
Subject: [PATCH] Update presentation of trending topics in Explore (#11227)

---
 src/screens/Search/Explore.tsx                |  73 ++--
 .../Search/components/ModuleHeader.tsx        |   8 +-
 .../Search/modules/ExploreInterestsCard.tsx   |  32 +-
 .../Search/modules/ExploreTrendingTopics.tsx  | 328 +++++++++---------
 4 files changed, 207 insertions(+), 234 deletions(-)

diff --git a/src/screens/Search/Explore.tsx b/src/screens/Search/Explore.tsx
index fc6f99bd55..364b7cbca2 100644
--- a/src/screens/Search/Explore.tsx
+++ b/src/screens/Search/Explore.tsx
@@ -5,9 +5,7 @@ import {
   type AppBskyFeedDefs,
   type AppBskyGraphDefs,
 } from '@atproto/api'
-import {msg} from '@lingui/core/macro'
-import {useLingui} from '@lingui/react'
-import {Trans} from '@lingui/react/macro'
+import {Trans, useLingui} from '@lingui/react/macro'
 import {useQueryClient} from '@tanstack/react-query'
 import * as bcp47Match from 'bcp-47-match'
 
@@ -78,7 +76,7 @@ import {
 
 function LoadMore({item}: {item: ExploreScreenItems & {type: 'loadMore'}}) {
   const t = useTheme()
-  const {_} = useLingui()
+  const {t: l} = useLingui()
 
   const handleOnPress = () => {
     void item.onLoadMore()
@@ -86,7 +84,7 @@ function LoadMore({item}: {item: ExploreScreenItems & {type: 'loadMore'}}) {
 
   return (
     <Button
-      label={_(msg`Load more`)}
+      label={l`Load more`}
       onPress={handleOnPress}
       style={[a.relative, a.w_full]}>
       {({hovered, pressed}) => (
@@ -138,6 +136,7 @@ type ExploreScreenItems =
       key: string
       title: string
       icon: React.ComponentType<SVGIconProps>
+      iconSize?: IcoProps['size']
       searchButton?: {
         label: string
         metricsTag: Metrics['explore:module:searchButtonPress']['module']
@@ -215,7 +214,7 @@ export function Explore({
   headerHeight: number
 }) {
   const ax = useAnalytics()
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const t = useTheme()
   const {data: preferences, error: preferencesError} = usePreferencesQuery()
   const moderationOpts = useModerationOpts()
@@ -367,10 +366,11 @@ export function Explore({
     i.push({
       type: 'tabbedHeader',
       key: 'suggested-accounts-header',
-      title: _(msg`Suggested accounts`),
+      title: l`Suggested accounts`,
       icon: Person,
+      iconSize: 'md',
       searchButton: {
-        label: _(msg`Search for more accounts`),
+        label: l`Search for more accounts`,
         metricsTag: 'suggestedAccounts',
         tab: 'user',
       },
@@ -383,7 +383,7 @@ export function Explore({
       i.push({
         type: 'error',
         key: 'suggestedUsersError',
-        message: _(msg`Failed to load suggested follows`),
+        message: l`Failed to load suggested follows`,
         error: cleanError(suggestedUsersError),
       })
     } else {
@@ -431,7 +431,7 @@ export function Explore({
     }
     return i
   }, [
-    _,
+    l,
     moderationOpts,
     suggestedUsers,
     suggestedUsersIsLoading,
@@ -445,10 +445,11 @@ export function Explore({
     i.push({
       type: 'header',
       key: 'suggested-feeds-header',
-      title: _(msg`Discover new feeds`),
+      title: l`Discover feeds`,
       icon: ListSparkle,
+      iconSize: 'md',
       searchButton: {
-        label: _(msg`Search for more feeds`),
+        label: l`Search for more feeds`,
         metricsTag: 'suggestedFeeds',
         tab: 'feed',
       },
@@ -474,14 +475,14 @@ export function Explore({
           i.push({
             type: 'error',
             key: 'suggestedFeedsError',
-            message: _(msg`Failed to load suggested feeds`),
+            message: l`Failed to load suggested feeds`,
             error: cleanError(suggestedFeedsError),
           })
         } else if (preferencesError) {
           i.push({
             type: 'error',
             key: 'preferencesError',
-            message: _(msg`Failed to load feeds preferences`),
+            message: l`Failed to load feeds preferences`,
             error: cleanError(preferencesError),
           })
         } else {
@@ -511,7 +512,7 @@ export function Explore({
             i.push({
               type: 'loadMore',
               key: 'loadMoreFeeds',
-              message: _(msg`Load more suggested feeds`),
+              message: l`Load more suggested feeds`,
               isLoadingMore: isLoadingMoreFeeds,
               onLoadMore: onLoadMoreFeeds,
             })
@@ -522,21 +523,21 @@ export function Explore({
           i.push({
             type: 'error',
             key: 'feedsError',
-            message: _(msg`Failed to load feeds`),
+            message: l`Failed to load feeds`,
             error: cleanError(feedsError),
           })
         } else if (suggestedFeedsError) {
           i.push({
             type: 'error',
             key: 'suggestedFeedsError',
-            message: _(msg`Failed to load suggested feeds`),
+            message: l`Failed to load suggested feeds`,
             error: cleanError(suggestedFeedsError),
           })
         } else if (preferencesError) {
           i.push({
             type: 'error',
             key: 'preferencesError',
-            message: _(msg`Failed to load feeds preferences`),
+            message: l`Failed to load feeds preferences`,
             error: cleanError(preferencesError),
           })
         } else {
@@ -567,21 +568,21 @@ export function Explore({
           i.push({
             type: 'error',
             key: 'feedsError',
-            message: _(msg`Failed to load feeds`),
+            message: l`Failed to load feeds`,
             error: cleanError(feedsError),
           })
         } else if (suggestedFeedsError) {
           i.push({
             type: 'error',
             key: 'suggestedFeedsError',
-            message: _(msg`Failed to load suggested feeds`),
+            message: l`Failed to load suggested feeds`,
             error: cleanError(suggestedFeedsError),
           })
         } else if (preferencesError) {
           i.push({
             type: 'error',
             key: 'preferencesError',
-            message: _(msg`Failed to load feeds preferences`),
+            message: l`Failed to load feeds preferences`,
             error: cleanError(preferencesError),
           })
         } else {
@@ -602,7 +603,7 @@ export function Explore({
             i.push({
               type: 'loadMore',
               key: 'loadMoreFeeds',
-              message: _(msg`Load more suggested feeds`),
+              message: l`Load more suggested feeds`,
               isLoadingMore: isLoadingMoreFeeds,
               onLoadMore: onLoadMoreFeeds,
             })
@@ -613,21 +614,21 @@ export function Explore({
           i.push({
             type: 'error',
             key: 'feedsError',
-            message: _(msg`Failed to load feeds`),
+            message: l`Failed to load feeds`,
             error: cleanError(feedsError),
           })
         } else if (suggestedFeedsError) {
           i.push({
             type: 'error',
             key: 'feedsError',
-            message: _(msg`Failed to load suggested feeds`),
+            message: l`Failed to load suggested feeds`,
             error: cleanError(suggestedFeedsError),
           })
         } else if (preferencesError) {
           i.push({
             type: 'error',
             key: 'preferencesError',
-            message: _(msg`Failed to load feeds preferences`),
+            message: l`Failed to load feeds preferences`,
             error: cleanError(preferencesError),
           })
         } else {
@@ -637,7 +638,7 @@ export function Explore({
     }
     return i
   }, [
-    _,
+    l,
     ax,
     useFullExperience,
     suggestedFeeds,
@@ -657,9 +658,9 @@ export function Explore({
     i.push({
       type: 'header',
       key: 'suggested-starterPacks-header',
-      title: _(msg`Starter Packs`),
+      title: l`Starter Packs`,
       icon: StarterPack,
-      iconSize: 'xl',
+      iconSize: 'md',
     })
 
     if (isLoadingSuggestedSPs || isRefetchingSuggestedSPs) {
@@ -684,7 +685,7 @@ export function Explore({
     return i
   }, [
     suggestedSPs,
-    _,
+    l,
     isLoadingSuggestedSPs,
     suggestedSPsError,
     isRefetchingSuggestedSPs,
@@ -773,7 +774,7 @@ export function Explore({
           return (
             <View style={[a.pb_md]}>
               <ModuleHeader.Container style={[a.pb_xs]}>
-                <ModuleHeader.Icon icon={item.icon} />
+                <ModuleHeader.Icon icon={item.icon} size={item.iconSize} />
                 <ModuleHeader.TitleText>{item.title}</ModuleHeader.TitleText>
                 {item.searchButton && (
                   <ModuleHeader.SearchButton
@@ -793,11 +794,7 @@ export function Explore({
           )
         }
         case 'trendingTopics': {
-          return (
-            <View style={[a.pb_md]}>
-              <ExploreTrendingTopics />
-            </View>
-          )
+          return <ExploreTrendingTopics />
         }
         case 'trendingVideos': {
           return <ExploreTrendingVideos />
@@ -1015,9 +1012,7 @@ export function Explore({
         case 'preview:loadMoreError': {
           return (
             <LoadMoreRetryBtn
-              label={_(
-                msg`There was an issue fetching posts. Tap here to try again.`,
-              )}
+              label={l`There was an issue fetching posts. Tap here to try again.`}
               onPress={handleOnPressRetry}
             />
           )
@@ -1042,7 +1037,7 @@ export function Explore({
       moderationOpts,
       interestsDisplayNames,
       useFullExperience,
-      _,
+      l,
       fetchNextPageFeedPreviews,
     ],
   )
diff --git a/src/screens/Search/components/ModuleHeader.tsx b/src/screens/Search/components/ModuleHeader.tsx
index f754005483..cf6840dbe0 100644
--- a/src/screens/Search/components/ModuleHeader.tsx
+++ b/src/screens/Search/components/ModuleHeader.tsx
@@ -31,7 +31,7 @@ export function Container({
         a.px_lg,
         a.pt_2xl,
         a.pb_md,
-        a.gap_sm,
+        a.gap_xs,
         t.atoms.bg,
         bottomBorder && [a.border_b, t.atoms.border_contrast_low],
         style,
@@ -82,11 +82,13 @@ export function Icon({
   icon: Comp,
   size = 'lg',
 }: Pick<React.ComponentProps<typeof ButtonIcon>, 'icon' | 'size'>) {
+  const t = useTheme()
+
   const iconSize = iconSizes[size]
 
   return (
     <View style={[a.z_20, {width: iconSize, height: iconSize, marginLeft: -2}]}>
-      <Comp width={iconSize} />
+      <Comp width={iconSize} fill={t.atoms.text.color} />
     </View>
   )
 }
@@ -94,7 +96,7 @@ export function Icon({
 export function TitleText({style, ...props}: TextProps) {
   return (
     <Text
-      style={[a.font_semi_bold, a.flex_1, a.text_xl, style]}
+      style={[a.font_semi_bold, a.flex_1, a.text_lg, style]}
       emoji
       {...props}
     />
diff --git a/src/screens/Search/modules/ExploreInterestsCard.tsx b/src/screens/Search/modules/ExploreInterestsCard.tsx
index 4843075b90..28e61ee64f 100644
--- a/src/screens/Search/modules/ExploreInterestsCard.tsx
+++ b/src/screens/Search/modules/ExploreInterestsCard.tsx
@@ -1,15 +1,13 @@
 import {useState} from 'react'
 import {View} from 'react-native'
-import {msg} from '@lingui/core/macro'
-import {useLingui} from '@lingui/react'
-import {Trans} from '@lingui/react/macro'
+import {Trans, useLingui} from '@lingui/react/macro'
 
 import {useInterestsDisplayNames} from '#/lib/interests'
 import {Nux, useSaveNux} from '#/state/queries/nuxs'
 import {usePreferencesQuery} from '#/state/queries/preferences'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
-import {Shapes_Stroke2_Corner0_Rounded as Shapes} from '#/components/icons/Shapes'
+import {Shapes_Stroke2_Corner0_Rounded as ShapesIcon} from '#/components/icons/Shapes'
 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
 import {Link} from '#/components/Link'
 import * as Prompt from '#/components/Prompt'
@@ -17,7 +15,7 @@ import {Text} from '#/components/Typography'
 
 export function ExploreInterestsCard() {
   const t = useTheme()
-  const {_} = useLingui()
+  const {t: l} = useLingui()
   const {data: preferences} = usePreferencesQuery()
   const interestsDisplayNames = useInterestsDisplayNames()
   const {mutateAsync: saveNux} = useSaveNux()
@@ -41,16 +39,12 @@ export function ExploreInterestsCard() {
     <>
       <Prompt.Basic
         control={trendingPrompt}
-        title={_(msg`Dismiss interests`)}
-        description={_(
-          msg`You can adjust your interests at any time from "Content and media" settings.`,
-        )}
-        confirmButtonCta={_(
-          msg({
-            message: `OK`,
-            comment: `Confirm button text.`,
-          }),
-        )}
+        title={l`Dismiss interests`}
+        description={l`You can adjust your interests at any time from "Content and media" settings.`}
+        confirmButtonCta={l({
+          message: `OK`,
+          comment: `Confirm button text.`,
+        })}
         onConfirm={onConfirmClose}
       />
 
@@ -63,8 +57,8 @@ export function ExploreInterestsCard() {
             t.atoms.border_contrast_medium,
           ]}>
           <View style={[a.flex_row, a.gap_sm, a.align_center]}>
-            <Shapes />
-            <Text style={[a.text_xl, a.font_semi_bold, a.leading_tight]}>
+            <ShapesIcon fill={t.atoms.text.color} />
+            <Text style={[a.text_lg, a.font_semi_bold]}>
               <Trans>Your interests</Trans>
             </Text>
           </View>
@@ -96,7 +90,7 @@ export function ExploreInterestsCard() {
           </Text>
 
           <Link
-            label={_(msg`Edit interests`)}
+            label={l`Edit interests`}
             to="/settings/interests"
             size="small"
             variant="solid"
@@ -108,7 +102,7 @@ export function ExploreInterestsCard() {
           </Link>
 
           <Button
-            label={_(msg`Hide this card`)}
+            label={l`Hide this card`}
             size="small"
             variant="ghost"
             color="secondary"
diff --git a/src/screens/Search/modules/ExploreTrendingTopics.tsx b/src/screens/Search/modules/ExploreTrendingTopics.tsx
index 5a3f4ab7f4..eea857bc8b 100644
--- a/src/screens/Search/modules/ExploreTrendingTopics.tsx
+++ b/src/screens/Search/modules/ExploreTrendingTopics.tsx
@@ -1,27 +1,34 @@
 import {useMemo} from 'react'
 import {Pressable, View} from 'react-native'
-import {type AppBskyUnspeccedDefs, moderateProfile} from '@atproto/api'
-import {msg} from '@lingui/core/macro'
-import {useLingui} from '@lingui/react'
-import {Trans} from '@lingui/react/macro'
+import {Image} from 'expo-image'
+import {
+  type AppBskyUnspeccedDefs,
+  moderateProfile,
+  RichText as RichTextApi,
+} from '@atproto/api'
+import {plural} from '@lingui/core/macro'
+import {Trans, useLingui} from '@lingui/react/macro'
 
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useTrendingSettings} 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 {atoms as a, useGutters, useTheme, type ViewStyleProp, web} from '#/alf'
+import {formatCount} from '#/view/com/util/numeric/format'
+import {atoms as a, useGutters, useTheme, type ViewStyleProp} from '#/alf'
 import {AvatarStack} from '#/components/AvatarStack'
-import {type Props as SVGIconProps} from '#/components/icons/common'
-import {Flame_Stroke2_Corner1_Rounded as FlameIcon} from '#/components/icons/Flame'
 import {Trending3_Stroke2_Corner1_Rounded as TrendingIcon} from '#/components/icons/Trending'
 import {Link} from '#/components/Link'
+import {RichText} from '#/components/RichText'
 import {SubtleHover} from '#/components/SubtleHover'
 import {Text} from '#/components/Typography'
 import {useAnalytics} from '#/analytics'
+import * as ModuleHeader from '../components/ModuleHeader'
 
 const TOPIC_COUNT = 5
 
+const IMAGE_SIZE = 56
+
 export function ExploreTrendingTopics() {
   const {enabled} = useTrendingConfig()
   const {trendingDisabled} = useTrendingSettings()
@@ -32,27 +39,36 @@ function Inner() {
   const ax = useAnalytics()
   const {data: trending, error, isLoading, isRefetching} = useGetTrendsQuery()
   const noTopics = !isLoading && !error && !trending?.trends?.length
+  const showLoading = isLoading || isRefetching
 
-  return isLoading || isRefetching ? (
-    Array.from({length: TOPIC_COUNT}).map((__, i) => (
-      <TrendingTopicRowSkeleton key={i} withPosts={i === 0} />
-    ))
-  ) : error || !trending?.trends || noTopics ? null : (
-    <>
-      {trending.trends.map((trend, index) => (
-        <TrendRow
-          key={trend.link}
-          trend={trend}
-          rank={index + 1}
-          onPress={() => {
-            ax.metric('trendingTopic:click', {
-              context: 'explore',
-              recId: trending.recId,
-            })
-          }}
-        />
-      ))}
-    </>
+  if (!showLoading && (error || !trending?.trends || noTopics)) return null
+
+  return (
+    <View style={[a.pb_md]}>
+      <ModuleHeader.Container bottomBorder>
+        <ModuleHeader.Icon icon={TrendingIcon} size="md" />
+        <ModuleHeader.TitleText>
+          <Trans>Trending</Trans>
+        </ModuleHeader.TitleText>
+      </ModuleHeader.Container>
+      {showLoading
+        ? Array.from({length: TOPIC_COUNT}).map((__, i) => (
+            <TrendingTopicRowSkeleton key={i} />
+          ))
+        : trending?.trends.map((trend, index) => (
+            <TrendRow
+              key={trend.link}
+              trend={trend}
+              rank={index + 1}
+              onPress={() => {
+                ax.metric('trendingTopic:click', {
+                  context: 'explore',
+                  recId: trending.recId,
+                })
+              }}
+            />
+          ))}
+    </View>
   )
 }
 
@@ -68,22 +84,24 @@ export function TrendRow({
   onPress?: () => void
 }) {
   const t = useTheme()
-  const {_} = useLingui()
+  const {t: l, i18n} = useLingui()
   const gutters = useGutters([0, 'base'])
 
-  const category = useCategoryDisplayName(trend?.category || 'other')
-  const age = Math.floor(
-    (Date.now() - new Date(trend.startedAt || Date.now()).getTime()) /
-      (1000 * 60 * 60),
-  )
-  const badgeType = trend.status === 'hot' ? 'hot' : age < 2 ? 'new' : age
-
   const actors = useModerateTrendingActors(trend.actors)
 
+  const description = useMemo(() => {
+    if (!trend.description) return
+    const rt = new RichTextApi({text: trend.description})
+    rt.detectFacetsWithoutResolution()
+    return rt
+  }, [trend.description])
+
+  let imageUrl = null // TODO Image URL goes here when available. -dsb
+
   return (
     <Link
       testID={trend.link}
-      label={_(msg`Browse topic ${trend.displayName}`)}
+      label={l`Browse topic ${trend.displayName}`}
       to={trend.link}
       onPress={onPress}
       style={[a.border_b, t.atoms.border_contrast_low]}
@@ -91,52 +109,75 @@ export function TrendRow({
       {({hovered, pressed}) => (
         <>
           <SubtleHover hover={hovered || pressed} native />
-          <View style={[gutters, a.w_full, a.py_lg, a.flex_row, a.gap_2xs]}>
-            <View style={[a.flex_1, a.gap_xs]}>
-              <View style={[a.flex_row]}>
-                <Text
-                  style={[
-                    a.text_md,
-                    a.font_semi_bold,
-                    a.leading_tight,
-                    {width: 20},
-                  ]}>
-                  <Trans comment='The trending topic rank, i.e. "1. March Madness", "2. The Bachelor"'>
-                    {rank}.
-                  </Trans>
-                </Text>
-                <Text
-                  style={[a.text_md, a.font_semi_bold, a.leading_tight]}
-                  numberOfLines={1}>
-                  {trend.displayName}
-                </Text>
-              </View>
-              <View
-                style={[
-                  a.flex_row,
-                  a.gap_sm,
-                  a.align_center,
-                  {paddingLeft: 20},
-                ]}>
-                {actors.length > 0 && (
-                  <AvatarStack size={20} profiles={actors} />
-                )}
-                <Text
-                  style={[
-                    a.text_sm,
-                    t.atoms.text_contrast_medium,
-                    web(a.leading_snug),
-                  ]}
-                  numberOfLines={1}>
-                  {category}
-                </Text>
-              </View>
-            </View>
-            <View style={[a.flex_shrink_0]}>
-              <TrendingIndicator type={badgeType} />
-            </View>
-          </View>
+          <View style={[gutters, a.w_full, a.flex_row, a.py_md, a.gap_sm]}>
+            <Text
+              style={[
+                a.text_sm,
+                a.font_medium,
 
+                t.atoms.text_contrast_low,
+                {
+                  fontVariant: ['tabular-nums'],
+                },
+              ]}>
+              <Trans comment='The trending topic rank, i.e. "1. March Madness", "2. The Bachelor"'>
+                {rank}.
+              </Trans>
+            </Text>
+            <View style={[a.flex_1, a.gap_2xs]}>
+              <Text
+                style={[a.text_sm, a.font_semi_bold, a.leading_snug]}
+                numberOfLines={1}>
+                {trend.displayName}
+              </Text>
+              {description ? (
+                <RichText
+                  value={description}
+                  disableLinks
+                  style={[a.text_sm, t.atoms.text_contrast_medium]}
+                  numberOfLines={2}
+                />
+              ) : null}
+              <View style={[a.mt_xs, a.flex_row, a.gap_sm, a.align_center]}>
+                {actors.length > 0 ? (
+                  <AvatarStack size={24} profiles={actors} />
+                ) : null}
+                <Text
+                  style={[a.text_sm, t.atoms.text_contrast_medium]}
+                  numberOfLines={1}>
+                  {trend.postCount >= 1000 ? (
+                    <Trans comment="Over 1,000 posts">1K+ posts</Trans>
+                  ) : (
+                    <Trans comment="'{postCount} {posts}', e.g., '1.2K posts'">
+                      {formatCount(i18n, trend.postCount)}{' '}
+                      {plural(trend.postCount, {one: 'post', other: 'posts'})}
+                    </Trans>
+                  )}
+                </Text>
+              </View>
+            </View>
+            {imageUrl ? (
+              <Image
+                source={{
+                  uri: imageUrl,
+                }}
+                alt={trend.topic}
+                style={[
+                  a.flex_0,
+                  a.rounded_md,
+                  t.atoms.bg_contrast_25,
+                  {
+                    width: IMAGE_SIZE,
+                    height: IMAGE_SIZE,
+                  },
+                ]}
+                contentFit="cover"
+                accessible={true}
+                accessibilityIgnoresInvertColors
+                useAppleWebpCodec
+              />
+            ) : null}
+          </View>
           {children}
         </>
       )}
@@ -144,96 +185,30 @@ export function TrendRow({
   )
 }
 
-type TrendingIndicatorType = 'hot' | 'new' | number
-
-function TrendingIndicator({type}: {type: TrendingIndicatorType | 'skeleton'}) {
-  const t = useTheme()
-  const {_} = useLingui()
-  const pillStyles = [
-    a.flex_row,
-    a.align_center,
-    a.gap_xs,
-    a.rounded_full,
-    {height: 28, paddingHorizontal: 10},
-  ]
-
-  let Icon: React.ComponentType<SVGIconProps> | null = null
-  let text: string | null = null
-  let color: string | null = null
-  let backgroundColor: string | null = null
-
-  switch (type) {
-    case 'skeleton': {
-      return (
-        <View
-          style={[
-            pillStyles,
-            {backgroundColor: t.palette.contrast_25, width: 65, height: 28},
-          ]}
-        />
-      )
-    }
-    case 'hot': {
-      Icon = FlameIcon
-      color =
-        t.scheme === 'light' ? t.palette.negative_500 : t.palette.negative_950
-      backgroundColor =
-        t.scheme === 'light' ? t.palette.negative_50 : t.palette.negative_200
-      text = _(msg`Hot`)
-      break
-    }
-    case 'new': {
-      Icon = TrendingIcon
-      text = _(msg`New`)
-      color = t.palette.positive_600
-      backgroundColor = t.palette.positive_50
-      break
-    }
-    default: {
-      text = _(
-        msg({
-          message: `${type}h ago`,
-          comment:
-            'trending topic time spent trending. should be as short as possible to fit in a pill',
-        }),
-      )
-      color = t.atoms.text_contrast_medium.color
-      backgroundColor = t.atoms.bg_contrast_25.backgroundColor
-      break
-    }
-  }
-
-  return (
-    <View style={[pillStyles, {backgroundColor}]}>
-      {Icon && <Icon size="sm" style={{color}} />}
-      <Text style={[a.text_sm, a.font_medium, {color}]}>{text}</Text>
-    </View>
-  )
-}
-
-function useCategoryDisplayName(
+// Unused atm, but leaving here so we don't lose localization. -dsb
+export function useCategoryDisplayName(
   category: AppBskyUnspeccedDefs.TrendView['category'],
 ) {
-  const {_} = useLingui()
+  const {t: l} = useLingui()
 
   switch (category) {
     case 'sports':
-      return _(msg`Sports`)
+      return l`Sports`
     case 'politics':
-      return _(msg`Politics`)
+      return l`Politics`
     case 'video-games':
-      return _(msg`Video Games`)
+      return l`Video Games`
     case 'pop-culture':
-      return _(msg`Entertainment`)
+      return l`Entertainment`
     case 'news':
-      return _(msg`News`)
+      return l`News`
     case 'other':
     default:
       return null
   }
 }
 
-export function TrendingTopicRowSkeleton({}: {withPosts: boolean}) {
+export function TrendingTopicRowSkeleton() {
   const t = useTheme()
   const gutters = useGutters([0, 'base'])
 
@@ -242,32 +217,39 @@ export function TrendingTopicRowSkeleton({}: {withPosts: boolean}) {
       style={[
         gutters,
         a.w_full,
-        a.py_lg,
+        a.py_md,
         a.flex_row,
-        a.gap_2xs,
+        a.gap_sm,
         a.border_b,
         t.atoms.border_contrast_low,
       ]}>
-      <View style={[a.flex_1, a.gap_sm]}>
-        <View style={[a.flex_row, a.align_center]}>
-          <View style={[{width: 20}]}>
-            <LoadingPlaceholder
-              width={12}
-              height={12}
-              style={[a.rounded_full]}
-            />
-          </View>
-          <LoadingPlaceholder width={90} height={17} />
-        </View>
-        <View style={[a.flex_row, a.gap_sm, a.align_center, {paddingLeft: 20}]}>
+      <View style={[{width: 20}]}>
+        <LoadingPlaceholder width={17} height={17} style={[a.rounded_full]} />
+      </View>
+      <View style={[a.flex_1, a.gap_2xs]}>
+        <LoadingPlaceholder width={90} height={17} />
+        <View style={[a.flex_row, a.gap_sm, a.align_center]}>
           <LoadingPlaceholder width={70} height={16} />
           <LoadingPlaceholder width={40} height={16} />
           <LoadingPlaceholder width={60} height={16} />
         </View>
+        <View style={[a.flex_row, a.gap_sm, a.align_center]}>
+          <LoadingPlaceholder width={50} height={16} />
+          <LoadingPlaceholder width={70} height={16} />
+          <LoadingPlaceholder width={30} height={16} />
+        </View>
+        <View style={[a.flex_1, a.gap_sm]}>
+          <View style={[a.mt_xs, a.flex_row, a.gap_sm, a.align_center]}>
+            <LoadingPlaceholder
+              width={24}
+              height={24}
+              style={[a.rounded_full]}
+            />
+            <LoadingPlaceholder width={60} height={16} />
+          </View>
+        </View>
       </View>
-      <View style={[a.flex_shrink_0]}>
-        <TrendingIndicator type="skeleton" />
-      </View>
+      {/* TODO Image placeholder goes here when images are available. -dsb */}
     </View>
   )
 }