Sloppy feeds

assets/icons/arrowRight_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M21 12a1 1 0 0 1-.293.707l-6 6a1 1 0 0 1-1.414-1.414L17.586 13H4a1 1 0 1 1 0-2h13.586l-4.293-4.293a1 1 0 0 1 1.414-1.414l6 6A1 1 0 0 1 21 12Z" clip-rule="evenodd"/></svg>

src/components/FeedCard.tsx

@@ -30,7 +30,7 @@ import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash'
 import {Link as InternalLink, LinkProps} from '#/components/Link'
 import {Loader} from '#/components/Loader'
 import * as Prompt from '#/components/Prompt'
-import {RichText} from '#/components/RichText'
+import {RichText, RichTextProps} from '#/components/RichText'
 import {Text} from '#/components/Typography'
 
 type Props =
@@ -89,7 +89,8 @@ export function Link({
         } else {
           precacheList(queryClient, view)
         }
-      }}>
+      }}
+      style={[a.flex_col]}>
       {children}
     </InternalLink>
   )
@@ -100,11 +101,7 @@ export function Outer({children}: {children: React.ReactNode}) {
 }
 
 export function Header({children}: {children: React.ReactNode}) {
-  return (
-    <View style={[a.flex_1, a.flex_row, a.align_center, a.gap_md]}>
-      {children}
-    </View>
-  )
+  return <View style={[a.flex_row, a.align_center, a.gap_md]}>{children}</View>
 }
 
 export type AvatarProps = {src: string | undefined; size?: number}
@@ -198,7 +195,10 @@ export function TitleAndBylinePlaceholder({creator}: {creator?: boolean}) {
   )
 }
 
-export function Description({description}: {description?: string}) {
+export function Description({
+  description,
+  ...rest
+}: {description?: string} & Partial<RichTextProps>) {
   const rt = React.useMemo(() => {
     if (!description) return
     const rt = new RichTextApi({text: description || ''})
@@ -206,7 +206,29 @@ export function Description({description}: {description?: string}) {
     return rt
   }, [description])
   if (!rt) return null
-  return <RichText value={rt} style={[a.leading_snug]} disableLinks />
+  return <RichText value={rt} style={[a.leading_snug]} disableLinks {...rest} />
+}
+
+export function DescriptionPlaceholder() {
+  const t = useTheme()
+  return (
+    <View style={[a.gap_xs]}>
+      <View
+        style={[a.rounded_xs, a.w_full, t.atoms.bg_contrast_50, {height: 12}]}
+      />
+      <View
+        style={[a.rounded_xs, a.w_full, t.atoms.bg_contrast_50, {height: 12}]}
+      />
+      <View
+        style={[
+          a.rounded_xs,
+          a.w_full,
+          t.atoms.bg_contrast_50,
+          {height: 12, width: 100},
+        ]}
+      />
+    </View>
+  )
 }
 
 export function Likes({count}: {count: number}) {

src/components/FeedSuggestedFollows/index.tsx

@@ -0,0 +1,198 @@
+import React from 'react'
+import {View} from 'react-native'
+import {ScrollView} from 'react-native-gesture-handler'
+import {AppBskyActorDefs} from '@atproto/api'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useNavigation} from '@react-navigation/native'
+
+import {NavigationProp} from '#/lib/routes/types'
+import {useModerationOpts} from '#/state/preferences/moderation-opts'
+import {useSuggestedFollowsQuery} from '#/state/queries/suggested-follows'
+import {atoms as a, useBreakpoints, useTheme, ViewStyleProp} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {ArrowRight_Stroke2_Corner0_Rounded as Arrow} from '#/components/icons/Arrow'
+import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as Refresh} from '#/components/icons/ArrowRotateCounterClockwise'
+import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
+import * as ProfileCard from '#/components/ProfileCard'
+import {Text} from '#/components/Typography'
+
+function CardOuter({
+  children,
+  style,
+}: {children: React.ReactNode | React.ReactNode[]} & ViewStyleProp) {
+  const t = useTheme()
+  const {gtMobile} = useBreakpoints()
+  return (
+    <View
+      style={[
+        a.w_full,
+        a.p_lg,
+        a.rounded_md,
+        a.border,
+        t.atoms.bg_contrast_25,
+        !gtMobile && {
+          width: 300,
+        },
+        {
+          borderColor: t.atoms.bg_contrast_25.backgroundColor,
+        },
+        style,
+      ]}>
+      {children}
+    </View>
+  )
+}
+
+export function SuggestedFollowCardSkeleton() {
+  const t = useTheme()
+  return (
+    <CardOuter style={[a.gap_sm, t.atoms.border_contrast_low]}>
+      <ProfileCard.Header>
+        <ProfileCard.AvatarPlaceholder />
+        <ProfileCard.NameAndHandlePlaceholder />
+      </ProfileCard.Header>
+
+      <ProfileCard.DescriptionPlaceholder />
+    </CardOuter>
+  )
+}
+
+export function ErrorState({retry}: {retry: () => void}) {
+  const t = useTheme()
+  return (
+    <>
+      <CardOuter>
+        <CircleInfo size="lg" fill={t.palette.negative_400} />
+        <Text style={[a.font_bold]}>Whoops, something went wrong :(</Text>
+        <Button
+          label={'Retry'}
+          size="small"
+          variant="ghost"
+          color="secondary"
+          onPress={retry}>
+          <ButtonText>Retry</ButtonText>
+          <ButtonIcon icon={Refresh} position="right" />
+        </Button>
+      </CardOuter>
+
+      <SuggestedFollowCardSkeleton />
+      <SuggestedFollowCardSkeleton />
+    </>
+  )
+}
+
+export function FeedSuggestedFollowsCards() {
+  const t = useTheme()
+  const {_} = useLingui()
+  const {
+    isLoading: isSuggestionsLoading,
+    data: suggestions,
+    error,
+    refetch,
+  } = useSuggestedFollowsQuery({limit: 6})
+  const moderationOpts = useModerationOpts()
+  const navigation = useNavigation<NavigationProp>()
+  const {gtMobile} = useBreakpoints()
+  const isLoading = isSuggestionsLoading || !moderationOpts
+  const maxLength = gtMobile ? 3 : 6
+
+  const profiles: AppBskyActorDefs.ProfileViewBasic[] = []
+  if (suggestions) {
+    // Currently the responses contain duplicate items.
+    // Needs to be fixed on backend, but let's dedupe to be safe.
+    let seen = new Set()
+    for (const page of suggestions.pages) {
+      for (const actor of page.actors) {
+        if (!seen.has(actor.did)) {
+          seen.add(actor.did)
+          profiles.push(actor)
+        }
+      }
+    }
+  }
+
+  const content = isLoading ? (
+    Array(3)
+      .fill(0)
+      .map((_, i) => <SuggestedFollowCardSkeleton key={i} />)
+  ) : error || !profiles.length ? (
+    <ErrorState retry={refetch} />
+  ) : (
+    <>
+      {profiles.slice(0, maxLength).map(profile => (
+        <ProfileCard.Link key={profile.did} did={profile.handle}>
+          <CardOuter style={[a.flex_1]}>
+            <ProfileCard.Outer>
+              <ProfileCard.Header>
+                <ProfileCard.Avatar
+                  profile={profile}
+                  moderationOpts={moderationOpts}
+                />
+                <ProfileCard.NameAndHandle
+                  profile={profile}
+                  moderationOpts={moderationOpts}
+                />
+                <ProfileCard.FollowButton
+                  profile={profile}
+                  logContext="FeedSuggestedFollowsCard"
+                  shape={gtMobile ? undefined : 'round'}
+                  variant="outline"
+                />
+              </ProfileCard.Header>
+              <ProfileCard.Description profile={profile} />
+            </ProfileCard.Outer>
+          </CardOuter>
+        </ProfileCard.Link>
+      ))}
+    </>
+  )
+
+  return gtMobile ? (
+    <View style={[a.flex_1, a.px_lg, a.pt_md, a.pb_xl, a.gap_md]}>
+      {content}
+    </View>
+  ) : (
+    <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+      <View style={[a.px_lg, a.pt_md, a.pb_xl, a.flex_row, a.gap_md]}>
+        {content}
+
+        <Button
+          label={_(msg`Browse more accounts on our explore page`)}
+          onPress={() => {
+            navigation.navigate('SearchTab')
+          }}>
+          <CardOuter
+            style={[a.flex_1, t.atoms.bg_contrast_25, {borderWidth: 0}]}>
+            <View style={[a.flex_1, a.justify_center]}>
+              <View style={[a.flex_row, a.px_lg]}>
+                <Text style={[a.pr_xl, a.flex_1, a.leading_snug]}>
+                  <Trans>Browse more suggestions on our explore page</Trans>
+                </Text>
+
+                <Arrow size="xl" />
+              </View>
+            </View>
+          </CardOuter>
+        </Button>
+      </View>
+    </ScrollView>
+  )
+}
+
+export function FeedSuggestedFollowsInterstitial() {
+  const t = useTheme()
+
+  return (
+    <View
+      style={[a.border_t, t.atoms.border_contrast_low, t.atoms.bg_contrast_25]}>
+      <View style={[a.pt_xl, a.px_lg, a.flex_row, a.gap_md]}>
+        <Text style={[a.font_bold, t.atoms.text_contrast_medium]}>
+          Suggested for you
+        </Text>
+      </View>
+
+      <FeedSuggestedFollowsCards />
+    </View>
+  )
+}

src/components/ProfileCard.tsx

@@ -9,6 +9,7 @@ import {
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {LogEvents} from '#/lib/statsig/statsig'
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {useProfileFollowMutationQueue} from '#/state/queries/profile'
 import {sanitizeHandle} from 'lib/strings/handles'
@@ -87,7 +88,7 @@ export function Header({
 }: {
   children: React.ReactElement | React.ReactElement[]
 }) {
-  return <View style={[a.flex_row, a.gap_sm]}>{children}</View>
+  return <View style={[a.flex_row, a.align_center, a.gap_sm]}>{children}</View>
 }
 
 export function Link({did, children}: {did: string} & Omit<LinkProps, 'to'>) {
@@ -96,7 +97,8 @@ export function Link({did, children}: {did: string} & Omit<LinkProps, 'to'>) {
       to={{
         screen: 'Profile',
         params: {name: did},
-      }}>
+      }}
+      style={[a.flex_col]}>
       {children}
     </InternalLink>
   )
@@ -121,6 +123,22 @@ export function Avatar({
   )
 }
 
+export function AvatarPlaceholder() {
+  const t = useTheme()
+  return (
+    <View
+      style={[
+        a.rounded_full,
+        t.atoms.bg_contrast_50,
+        {
+          width: 42,
+          height: 42,
+        },
+      ]}
+    />
+  )
+}
+
 export function NameAndHandle({
   profile,
   moderationOpts,
@@ -150,6 +168,36 @@ export function NameAndHandle({
   )
 }
 
+export function NameAndHandlePlaceholder() {
+  const t = useTheme()
+
+  return (
+    <View style={[a.flex_1, a.gap_xs]}>
+      <View
+        style={[
+          a.rounded_xs,
+          t.atoms.bg_contrast_50,
+          {
+            width: '60%',
+            height: 14,
+          },
+        ]}
+      />
+
+      <View
+        style={[
+          a.rounded_xs,
+          t.atoms.bg_contrast_50,
+          {
+            width: '40%',
+            height: 10,
+          },
+        ]}
+      />
+    </View>
+  )
+}
+
 export function Description({
   profile: profileUnshadowed,
 }: {
@@ -183,9 +231,32 @@ export function Description({
   )
 }
 
+export function DescriptionPlaceholder() {
+  const t = useTheme()
+  return (
+    <View style={[a.gap_xs]}>
+      <View
+        style={[a.rounded_xs, a.w_full, t.atoms.bg_contrast_50, {height: 12}]}
+      />
+      <View
+        style={[a.rounded_xs, a.w_full, t.atoms.bg_contrast_50, {height: 12}]}
+      />
+      <View
+        style={[
+          a.rounded_xs,
+          a.w_full,
+          t.atoms.bg_contrast_50,
+          {height: 12, width: 100},
+        ]}
+      />
+    </View>
+  )
+}
+
 export type FollowButtonProps = {
   profile: AppBskyActorDefs.ProfileViewBasic
-  logContext: 'ProfileCard' | 'StarterPackProfilesList'
+  logContext: LogEvents['profile:follow']['logContext'] &
+    LogEvents['profile:unfollow']['logContext']
 } & Partial<ButtonProps>
 
 export function FollowButton(props: FollowButtonProps) {

src/components/RichText.tsx

@@ -17,6 +17,19 @@ import {Text, TextProps} from '#/components/Typography'
 
 const WORD_WRAP = {wordWrap: 1}
 
+export type RichTextProps = TextStyleProp &
+  Pick<TextProps, 'selectable'> & {
+    value: RichTextAPI | string
+    testID?: string
+    numberOfLines?: number
+    disableLinks?: boolean
+    enableTags?: boolean
+    authorHandle?: string
+    onLinkPress?: LinkProps['onPress']
+    interactiveStyle?: TextStyle
+    emojiMultiplier?: number
+  }
+
 export function RichText({
   testID,
   value,
@@ -29,18 +42,7 @@ export function RichText({
   onLinkPress,
   interactiveStyle,
   emojiMultiplier = 1.85,
-}: TextStyleProp &
-  Pick<TextProps, 'selectable'> & {
-    value: RichTextAPI | string
-    testID?: string
-    numberOfLines?: number
-    disableLinks?: boolean
-    enableTags?: boolean
-    authorHandle?: string
-    onLinkPress?: LinkProps['onPress']
-    interactiveStyle?: TextStyle
-    emojiMultiplier?: number
-  }) {
+}: RichTextProps) {
   const richText = React.useMemo(
     () =>
       value instanceof RichTextAPI ? value : new RichTextAPI({text: value}),

src/components/feedInterstitials/SuggestedFeeds.tsx

@@ -0,0 +1,175 @@
+import React from 'react'
+import {View} from 'react-native'
+import {ScrollView} from 'react-native-gesture-handler'
+import {AppBskyFeedDefs} from '@atproto/api'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useNavigation} from '@react-navigation/native'
+
+import {NavigationProp} from '#/lib/routes/types'
+import {useModerationOpts} from '#/state/preferences/moderation-opts'
+import {useGetPopularFeedsQuery} from '#/state/queries/feed'
+import {atoms as a, useBreakpoints, useTheme, ViewStyleProp} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import * as FeedCard from '#/components/FeedCard'
+import {ArrowRight_Stroke2_Corner0_Rounded as Arrow} from '#/components/icons/Arrow'
+import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as Refresh} from '#/components/icons/ArrowRotateCounterClockwise'
+import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
+import {Text} from '#/components/Typography'
+
+function CardOuter({
+  children,
+  style,
+}: {children: React.ReactNode | React.ReactNode[]} & ViewStyleProp) {
+  const t = useTheme()
+  const {gtMobile} = useBreakpoints()
+  return (
+    <View
+      style={[
+        a.w_full,
+        a.p_lg,
+        a.rounded_md,
+        a.border,
+        t.atoms.bg_contrast_25,
+        !gtMobile && {
+          width: 300,
+        },
+        {
+          borderColor: t.atoms.bg_contrast_25.backgroundColor,
+        },
+        style,
+      ]}>
+      {children}
+    </View>
+  )
+}
+
+export function SuggestedFollowCardSkeleton() {
+  const t = useTheme()
+  return (
+    <CardOuter style={[a.gap_sm, t.atoms.border_contrast_low]}>
+      <FeedCard.Header>
+        <FeedCard.AvatarPlaceholder />
+        <FeedCard.TitleAndBylinePlaceholder />
+      </FeedCard.Header>
+
+      <FeedCard.DescriptionPlaceholder />
+    </CardOuter>
+  )
+}
+
+export function ErrorState({retry}: {retry: () => void}) {
+  const t = useTheme()
+  return (
+    <>
+      <CardOuter>
+        <CircleInfo size="lg" fill={t.palette.negative_400} />
+        <Text style={[a.font_bold]}>Whoops, something went wrong :(</Text>
+        <Button
+          label={'Retry'}
+          size="small"
+          variant="ghost"
+          color="secondary"
+          onPress={retry}>
+          <ButtonText>Retry</ButtonText>
+          <ButtonIcon icon={Refresh} position="right" />
+        </Button>
+      </CardOuter>
+
+      <SuggestedFollowCardSkeleton />
+      <SuggestedFollowCardSkeleton />
+    </>
+  )
+}
+
+export function SuggestedFeedsCards() {
+  const t = useTheme()
+  const {_} = useLingui()
+  const {
+    data,
+    isLoading: isLoadingFeeds,
+    error,
+    refetch,
+  } = useGetPopularFeedsQuery({limit: 3})
+  const moderationOpts = useModerationOpts()
+  const navigation = useNavigation<NavigationProp>()
+  const {gtMobile} = useBreakpoints()
+  const isLoading = isLoadingFeeds || !moderationOpts
+
+  const feeds = React.useMemo(() => {
+    const items: AppBskyFeedDefs.GeneratorView[] = []
+
+    if (!data) return items
+
+    for (const page of data.pages) {
+      for (const feed of page.feeds) {
+        items.push(feed)
+      }
+    }
+
+    return items
+  }, [data])
+
+  const content = isLoading ? (
+    Array(3)
+      .fill(0)
+      .map((_, i) => <SuggestedFollowCardSkeleton key={i} />)
+  ) : error || !feeds ? (
+    <ErrorState retry={refetch} />
+  ) : (
+    <>
+      {feeds.map(feed => (
+        <FeedCard.Link key={feed.uri} type="feed" view={feed}>
+          <CardOuter style={[a.flex_1]}>
+            <FeedCard.Outer>
+              <FeedCard.Header>
+                <FeedCard.Avatar src={feed.avatar} />
+                <FeedCard.TitleAndByline
+                  title={feed.displayName}
+                  creator={feed.creator}
+                  type="feed"
+                />
+                <FeedCard.Action pin type="feed" uri={feed.uri} />
+              </FeedCard.Header>
+              <FeedCard.Description
+                description={feed.description}
+                numberOfLines={3}
+              />
+            </FeedCard.Outer>
+          </CardOuter>
+        </FeedCard.Link>
+      ))}
+    </>
+  )
+
+  return gtMobile ? (
+    <View style={[a.flex_1, a.px_lg, a.pt_md, a.pb_xl, a.gap_md]}>
+      {content}
+    </View>
+  ) : (
+    <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+      <View style={[a.px_lg, a.pt_md, a.pb_xl, a.flex_row, a.gap_md]}>
+        {content}
+
+        <Button
+          label={_(msg`Browse more accounts on our explore page`)}
+          onPress={() => {
+            navigation.navigate('SearchTab')
+          }}>
+          <CardOuter
+            style={[a.flex_1, t.atoms.bg_contrast_25, {borderWidth: 0}]}>
+            <View style={[a.flex_1, a.justify_center]}>
+              <View style={[a.flex_row, a.px_lg]}>
+                <Text style={[a.pr_xl, a.flex_1, a.leading_snug]}>
+                  <Trans>Browse more suggestions on our explore page</Trans>
+                </Text>
+
+                <Arrow size="xl" />
+              </View>
+            </View>
+          </CardOuter>
+        </Button>
+      </View>
+    </ScrollView>
+  )
+}

src/components/icons/Arrow.tsx

@@ -8,6 +8,10 @@ export const ArrowLeft_Stroke2_Corner0_Rounded = createSinglePathSVG({
   path: 'M3 12a1 1 0 0 1 .293-.707l6-6a1 1 0 0 1 1.414 1.414L6.414 11H20a1 1 0 1 1 0 2H6.414l4.293 4.293a1 1 0 0 1-1.414 1.414l-6-6A1 1 0 0 1 3 12Z',
 })
 
+export const ArrowRight_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M21 12a1 1 0 0 1-.293.707l-6 6a1 1 0 0 1-1.414-1.414L17.586 13H4a1 1 0 1 1 0-2h13.586l-4.293-4.293a1 1 0 0 1 1.414-1.414l6 6A1 1 0 0 1 21 12Z',
+})
+
 export const ArrowBottom_Stroke2_Corner0_Rounded = createSinglePathSVG({
   path: 'M12 21a1 1 0 0 1-.707-.293l-6-6a1 1 0 1 1 1.414-1.414L11 17.586V4a1 1 0 1 1 2 0v13.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-6 6A1 1 0 0 1 12 21Z',
 })

src/lib/statsig/events.ts

@@ -147,6 +147,7 @@ export type LogEvents = {
       | 'ProfileHoverCard'
       | 'AvatarButton'
       | 'StarterPackProfilesList'
+      | 'FeedSuggestedFollowsCard'
   }
   'profile:unfollow': {
     logContext:
@@ -160,6 +161,7 @@ export type LogEvents = {
       | 'Chat'
       | 'AvatarButton'
       | 'StarterPackProfilesList'
+      | 'FeedSuggestedFollowsCard'
   }
   'chat:create': {
     logContext: 'ProfileHeader' | 'NewChatDialog' | 'SendViaChatDialog'

src/screens/Home/EmptyTimeline.tsx

@@ -0,0 +1,79 @@
+import React from 'react'
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {emitSoftReset} from '#/state/events'
+import {CenteredView} from '#/view/com/util/Views'
+import {atoms as a, useBreakpoints} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {Divider} from '#/components/Divider'
+import {SuggestedFeedsCards} from '#/components/feedInterstitials/SuggestedFeeds'
+import {FeedSuggestedFollowsCards} from '#/components/FeedSuggestedFollows'
+import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as Refresh} from '#/components/icons/ArrowRotateCounterClockwise'
+import {Text} from '#/components/Typography'
+
+export function EmptyTimeline() {
+  const {_} = useLingui()
+  const {gtMobile} = useBreakpoints()
+
+  const sectionPadding = gtMobile ? a.pt_5xl : a.pt_3xl
+
+  return (
+    <CenteredView sideBorders style={[a.flex_1, a.pb_5xl]}>
+      <View style={[a.px_lg, sectionPadding]}>
+        <Text style={[a.text_2xl, a.font_bold, a.mb_md]}>
+          <Trans>Your Following feed is empty :(</Trans>
+        </Text>
+        <Text style={[a.text_md, a.mb_sm, a.leading_snug]}>
+          <Trans>
+            Follow some users to see what's happening. Their content will appear
+            here in chronological order.
+          </Trans>
+        </Text>
+      </View>
+
+      <View style={[a.flex_row, a.align_start]}>
+        <FeedSuggestedFollowsCards />
+      </View>
+      <View style={[a.px_lg]}>
+        <Divider />
+
+        <View
+          style={[
+            a.flex_row,
+            a.align_center,
+            a.justify_end,
+            a.pt_md,
+            a.gap_md,
+          ]}>
+          <Text style={[a.leading_snug]}>
+            <Trans>When you're done:</Trans>
+          </Text>
+
+          <Button
+            label={_(msg`Click to refresh your following feed`)}
+            size="small"
+            variant="solid"
+            color="secondary"
+            onPress={() => emitSoftReset()}>
+            <ButtonText>
+              <Trans>Refresh your feed</Trans>
+            </ButtonText>
+            <ButtonIcon icon={Refresh} position="right" />
+          </Button>
+        </View>
+      </View>
+
+      <View style={[a.px_lg, sectionPadding]}>
+        <Text style={[a.text_2xl, a.font_bold, a.mb_sm]}>
+          <Trans>You can also explore new feeds</Trans>
+        </Text>
+      </View>
+
+      <View style={[a.flex_row, a.align_start]}>
+        <SuggestedFeedsCards />
+      </View>
+    </CenteredView>
+  )
+}

src/view/screens/Home.tsx

@@ -25,8 +25,8 @@ import {HomeTabNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
 import {FeedPage} from 'view/com/feeds/FeedPage'
 import {Pager, PagerRef, RenderTabBarFnProps} from 'view/com/pager/Pager'
 import {CustomFeedEmptyState} from 'view/com/posts/CustomFeedEmptyState'
-import {FollowingEmptyState} from 'view/com/posts/FollowingEmptyState'
 import {FollowingEndOfFeed} from 'view/com/posts/FollowingEndOfFeed'
+import {EmptyTimeline} from '#/screens/Home/EmptyTimeline'
 import {NoFeedsPinned} from '#/screens/Home/NoFeedsPinned'
 import {HomeHeader} from '../com/home/HomeHeader'
 
@@ -207,7 +207,7 @@ function HomeScreenReady({
   )
 
   const renderFollowingEmptyState = React.useCallback(() => {
-    return <FollowingEmptyState />
+    return <EmptyTimeline />
   }, [])
 
   const renderCustomFeedEmptyState = React.useCallback(() => {