Add components for empty following feed

src/components/FeedSuggestedFollows/index.tsx

@@ -6,21 +6,69 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {useProfileShadow} from '#/state/cache/profile-shadow'
-import {useModerationOpts} from '#/state/queries/preferences'
+import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useSuggestedFollowsQuery} from '#/state/queries/suggested-follows'
 import {isJustAMute} from 'lib/moderation'
 import {sanitizeDisplayName} from 'lib/strings/display-names'
 import {sanitizeHandle} from 'lib/strings/handles'
 import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, useTheme} from '#/alf'
-import {Button, ButtonIcon} from '#/components/Button'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {useFollowMethods} from '#/components/hooks/useFollowMethods'
 import {useRichText} from '#/components/hooks/useRichText'
+import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as Refresh} from '#/components/icons/ArrowRotateCounterClockwise'
 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
+import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
 import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
 import {RichText} from '#/components/RichText'
 import {Text} from '#/components/Typography'
 
+export function SuggestedFollowCardSkeleton() {
+  const t = useTheme()
+  return (
+    <View
+      style={[
+        a.p_lg,
+        a.rounded_md,
+        a.gap_sm,
+        t.atoms.bg_contrast_25,
+        {
+          width: 300,
+        },
+      ]}>
+      <View style={[a.flex_row, a.align_center, a.gap_sm]}>
+        <View style={[a.rounded_full, t.atoms.bg, {height: 40, width: 40}]} />
+
+        <View
+          style={[
+            a.flex_row,
+            a.align_center,
+            a.justify_between,
+            a.gap_lg,
+            a.flex_1,
+          ]}>
+          <View style={[a.gap_xs, a.flex_1]}>
+            <View
+              style={[a.rounded_xs, t.atoms.bg, {height: 16, width: 200}]}
+            />
+            <View
+              style={[a.rounded_xs, t.atoms.bg, {height: 12, width: 100}]}
+            />
+          </View>
+        </View>
+      </View>
+
+      <View style={[a.flex_1, a.gap_xs]}>
+        <View style={[a.rounded_xs, a.w_full, t.atoms.bg, {height: 12}]} />
+        <View style={[a.rounded_xs, a.w_full, t.atoms.bg, {height: 12}]} />
+        <View
+          style={[a.rounded_xs, a.w_full, t.atoms.bg, {height: 12, width: 100}]}
+        />
+      </View>
+    </View>
+  )
+}
+
 export function SuggestedFollowCard({
   profile: profileUnshadowed,
 }: {
@@ -32,10 +80,9 @@ export function SuggestedFollowCard({
   const moderationOpts = useModerationOpts()
   const {follow, unfollow} = useFollowMethods({
     profile,
-    // @ts-ignore TODO
+    logContext: 'FeedSuggestedFollowCard',
-    logContext: 'FeedSuggestedFollowsCard',
   })
-  // @ts-ignore TODO
+  // @ts-ignore TODO why isn't this type correct
   const [descriptionRT] = useRichText(profileUnshadowed?.description ?? '')
 
   if (!moderationOpts) return null
@@ -49,7 +96,7 @@ export function SuggestedFollowCard({
         a.p_lg,
         a.rounded_md,
         a.gap_sm,
-        t.atoms.bg,
+        t.atoms.bg_contrast_25,
         {
           width: 300,
         },
@@ -57,8 +104,7 @@ export function SuggestedFollowCard({
       <View style={[a.flex_row, a.align_center, a.gap_sm]}>
         <PreviewableUserAvatar
           size={40}
-          did={profile.did}
+          profile={profile}
-          handle={profile.handle}
           avatar={profile.avatar}
           moderation={moderation.ui('avatar')}
         />
@@ -94,7 +140,7 @@ export function SuggestedFollowCard({
             size="small"
             shape="round"
             variant="solid"
-            color="secondary"
+            color="primary"
             onPress={profile.viewer?.following ? unfollow : follow}>
             {profile.viewer?.following ? (
               <ButtonIcon icon={Check} />
@@ -105,16 +151,54 @@ export function SuggestedFollowCard({
         </View>
       </View>
 
-      <Text style={[a.flex_1]} numberOfLines={2}>
+      <Text style={[a.flex_1]} numberOfLines={3}>
         <RichText value={descriptionRT} style={[t.atoms.text_contrast_high]} />
       </Text>
     </View>
   )
 }
 
-export function FeedSuggestedFollows() {
+export function ErrorState({retry}: {retry: () => void}) {
   const t = useTheme()
-  const {isLoading, data: suggestions, error} = useSuggestedFollowsQuery()
+  return (
+    <>
+      <View
+        style={[
+          a.align_start,
+          a.p_lg,
+          a.rounded_md,
+          a.gap_md,
+          t.atoms.bg_contrast_25,
+          {
+            width: 300,
+          },
+        ]}>
+        <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>
+      </View>
+
+      <SuggestedFollowCardSkeleton />
+      <SuggestedFollowCardSkeleton />
+    </>
+  )
+}
+
+export function FeedSuggestedFollowsCards() {
+  const {
+    isLoading,
+    data: suggestions,
+    error,
+    refetch,
+  } = useSuggestedFollowsQuery()
 
   const profiles: AppBskyActorDefs.ProfileViewBasic[] = []
   if (suggestions) {
@@ -131,6 +215,28 @@ export function FeedSuggestedFollows() {
     }
   }
 
+  return (
+    <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+      <View style={[a.px_lg, a.pt_md, a.pb_xl, a.flex_row, a.gap_md]}>
+        {isLoading ? (
+          Array(3)
+            .fill(0)
+            .map((_, i) => <SuggestedFollowCardSkeleton key={i} />)
+        ) : error || !profiles.length ? (
+          <ErrorState retry={refetch} />
+        ) : (
+          profiles.map((profile, i) => (
+            <SuggestedFollowCard key={i} profile={profile} />
+          ))
+        )}
+      </View>
+    </ScrollView>
+  )
+}
+
+export function FeedSuggestedFollowsInterstitial() {
+  const t = useTheme()
+
   return (
     <View
       style={[a.border_t, t.atoms.border_contrast_low, t.atoms.bg_contrast_25]}>
@@ -140,17 +246,7 @@ export function FeedSuggestedFollows() {
         </Text>
       </View>
 
-      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+      <FeedSuggestedFollowsCards />
-        <View style={[a.px_lg, a.pt_md, a.pb_xl, a.flex_row, a.gap_md]}>
-          {isLoading
-            ? null
-            : error || !profiles.length
-            ? null
-            : profiles.map((profile, i) => (
-                <SuggestedFollowCard key={i} profile={profile} />
-              ))}
-        </View>
-      </ScrollView>
     </View>
   )
 }

src/screens/Home/EmptyTimeline.tsx

@@ -0,0 +1,70 @@
+import React from 'react'
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {CenteredView} from '#/view/com/util/Views'
+import {atoms as a} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {FeedSuggestedFollowsCards} from '#/components/FeedSuggestedFollows'
+import {IconCircle} from '#/components/IconCircle'
+import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as Refresh} from '#/components/icons/ArrowRotateCounterClockwise'
+import {FilterTimeline_Stroke2_Corner0_Rounded as FilterTimeline} from '#/components/icons/FilterTimeline'
+import {Divider} from '#/components/Menu'
+import {Text} from '#/components/Typography'
+
+export function EmptyTimeline() {
+  const {_} = useLingui()
+
+  return (
+    <CenteredView sideBorders style={[a.h_full_vh]}>
+      <View style={[a.px_lg, a.pt_3xl]}>
+        <IconCircle icon={FilterTimeline} style={[a.mb_2xl]} />
+
+        <Text style={[a.text_xl, a.font_bold, a.mb_sm]}>
+          <Trans>Welcome to your timeline</Trans>
+        </Text>
+        <Text style={[a.mb_sm, a.leading_snug]}>
+          <Trans>
+            Your timeline is where you can see posts from people you follow.
+            It's always chronologically sorted, so you'll never miss a post.
+          </Trans>
+        </Text>
+
+        <Text style={[a.pt_lg, a.font_bold, a.mb_sm, a.leading_snug]}>
+          <Trans>Follow some people to get started!</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_lg,
+          ]}>
+          <Text style={[a.leading_snug]}>
+            <Trans>When you're done:</Trans>
+          </Text>
+
+          <Button
+            label={_(msg`Click to view your timeline`)}
+            size="medium"
+            variant="solid"
+            color="primary">
+            <ButtonText>
+              <Trans>Click to view your timeline</Trans>
+            </ButtonText>
+            <ButtonIcon icon={Refresh} position="right" />
+          </Button>
+        </View>
+      </View>
+    </CenteredView>
+  )
+}