Update presentation of trending topics in Explore (#11227)

src/screens/Search/Explore.tsx

@@ -5,9 +5,7 @@ import {
   type AppBskyFeedDefs,
   type AppBskyGraphDefs,
 } from '@atproto/api'
-import {msg} from '@lingui/core/macro'
+import {Trans, useLingui} from '@lingui/react/macro'
-import {useLingui} from '@lingui/react'
-import {Trans} 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 (
+          return <ExploreTrendingTopics />
-            <View style={[a.pb_md]}>
-              <ExploreTrendingTopics />
-            </View>
-          )
         }
         case 'trendingVideos': {
           return <ExploreTrendingVideos />
@@ -1015,9 +1012,7 @@ export function Explore({
         case 'preview:loadMoreError': {
           return (
             <LoadMoreRetryBtn
-              label={_(
+              label={l`There was an issue fetching posts. Tap here to try again.`}
-                msg`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,
     ],
   )

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}
     />

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 {Trans, useLingui} from '@lingui/react/macro'
-import {useLingui} from '@lingui/react'
-import {Trans} 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`)}
+        title={l`Dismiss interests`}
-        description={_(
+        description={l`You can adjust your interests at any time from "Content and media" settings.`}
-          msg`You can adjust your interests at any time from "Content and media" settings.`,
+        confirmButtonCta={l({
-        )}
-        confirmButtonCta={_(
-          msg({
           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 />
+            <ShapesIcon fill={t.atoms.text.color} />
-            <Text style={[a.text_xl, a.font_semi_bold, a.leading_tight]}>
+            <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"

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 {Image} from 'expo-image'
-import {msg} from '@lingui/core/macro'
+import {
-import {useLingui} from '@lingui/react'
+  type AppBskyUnspeccedDefs,
-import {Trans} from '@lingui/react/macro'
+  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,14 +39,23 @@ 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 ? (
+  if (!showLoading && (error || !trending?.trends || noTopics)) return null
-    Array.from({length: TOPIC_COUNT}).map((__, i) => (
+
-      <TrendingTopicRowSkeleton key={i} withPosts={i === 0} />
+  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} />
           ))
-  ) : error || !trending?.trends || noTopics ? null : (
+        : trending?.trends.map((trend, index) => (
-    <>
-      {trending.trends.map((trend, index) => (
             <TrendRow
               key={trend.link}
               trend={trend}
@@ -52,7 +68,7 @@ function Inner() {
               }}
             />
           ))}
-    </>
+    </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={[gutters, a.w_full, a.flex_row, a.py_md, a.gap_sm]}>
-            <View style={[a.flex_1, a.gap_xs]}>
-              <View style={[a.flex_row]}>
             <Text
               style={[
-                    a.text_md,
+                a.text_sm,
-                    a.font_semi_bold,
+                a.font_medium,
-                    a.leading_tight,
+
-                    {width: 20},
+                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_md, a.font_semi_bold, a.leading_tight]}
+                style={[a.text_sm, a.font_semi_bold, a.leading_snug]}
                 numberOfLines={1}>
                 {trend.displayName}
               </Text>
-              </View>
+              {description ? (
-              <View
+                <RichText
-                style={[
+                  value={description}
-                  a.flex_row,
+                  disableLinks
-                  a.gap_sm,
+                  style={[a.text_sm, t.atoms.text_contrast_medium]}
-                  a.align_center,
+                  numberOfLines={2}
-                  {paddingLeft: 20},
+                />
-                ]}>
+              ) : null}
-                {actors.length > 0 && (
+              <View style={[a.mt_xs, a.flex_row, a.gap_sm, a.align_center]}>
-                  <AvatarStack size={20} profiles={actors} />
+                {actors.length > 0 ? (
-                )}
+                  <AvatarStack size={24} profiles={actors} />
+                ) : null}
                 <Text
-                  style={[
+                  style={[a.text_sm, t.atoms.text_contrast_medium]}
-                    a.text_sm,
-                    t.atoms.text_contrast_medium,
-                    web(a.leading_snug),
-                  ]}
                   numberOfLines={1}>
-                  {category}
+                  {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>
-            <View style={[a.flex_shrink_0]}>
+            {imageUrl ? (
-              <TrendingIndicator type={badgeType} />
+              <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>
-          </View>
-
           {children}
         </>
       )}
@@ -144,96 +185,30 @@ export function TrendRow({
   )
 }
 
-type TrendingIndicatorType = 'hot' | 'new' | number
+// Unused atm, but leaving here so we don't lose localization. -dsb
-
+export function useCategoryDisplayName(
-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(
   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,33 +217,40 @@ 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
+        <LoadingPlaceholder width={17} height={17} style={[a.rounded_full]} />
-              width={12}
-              height={12}
-              style={[a.rounded_full]}
-            />
       </View>
+      <View style={[a.flex_1, a.gap_2xs]}>
         <LoadingPlaceholder width={90} height={17} />
-        </View>
+        <View style={[a.flex_row, a.gap_sm, a.align_center]}>
-        <View style={[a.flex_row, a.gap_sm, a.align_center, {paddingLeft: 20}]}>
           <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_shrink_0]}>
+        <View style={[a.flex_1, a.gap_sm]}>
-        <TrendingIndicator type="skeleton" />
+          <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>
+      {/* TODO Image placeholder goes here when images are available. -dsb */}
+    </View>
   )
 }