From 5f59bfd4fb2205248ab554c1a9e48c85d1cfaeaf Mon Sep 17 00:00:00 2001
From: Ansh Nanda <anshnanda10@gmail.com>
Date: Fri, 15 Sep 2023 12:27:39 +0530
Subject: [PATCH 01/17] upgrade api package

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index baf4f2843d..77daf28af8 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
     "build:apk": "eas build -p android --profile dev-android-apk"
   },
   "dependencies": {
-    "@atproto/api": "^0.6.12",
+    "@atproto/api": "^0.6.13",
     "@bam.tech/react-native-image-resizer": "^3.0.4",
     "@braintree/sanitize-url": "^6.0.2",
     "@emoji-mart/react": "^1.1.1",
diff --git a/yarn.lock b/yarn.lock
index 308e3fd969..242bee4783 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -45,10 +45,10 @@
     tlds "^1.234.0"
     typed-emitter "^2.1.0"
 
-"@atproto/api@^0.6.12":
-  version "0.6.12"
-  resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.6.12.tgz#f39ad9d225aafc5fd90f07d0011d63435c657775"
-  integrity sha512-9R8F78553GI47Iq4FDVwL05LorWTQZQ6FmFsDF/+yryiA+a/VVyvYG4USSptURBZCRgZA5VgTW1We/PwAcDfEA==
+"@atproto/api@^0.6.13":
+  version "0.6.13"
+  resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.6.13.tgz#26caeae983c577dfedf6ab1f054b31eb158d8ca6"
+  integrity sha512-MudGswKKFJmeh4RoN9LZnYoHib0L7QEIzOdkRU26Fr0dBqSQrnWwLYA9zsNjNg/mZKDyweYkP1ChTNkQvNiYFw==
   dependencies:
     "@atproto/common-web" "^0.2.0"
     "@atproto/lexicon" "^0.2.0"

From 778d6f4af33419537b4b87818658e3cbf0c6eab5 Mon Sep 17 00:00:00 2001
From: Ansh Nanda <anshnanda10@gmail.com>
Date: Fri, 15 Sep 2023 12:27:52 +0530
Subject: [PATCH 02/17] add RecommendedFollows as a step in onboarding

---
 src/state/models/discovery/onboarding.ts      |   4 +
 src/view/com/auth/Onboarding.tsx              |   4 +
 .../com/auth/onboarding/RecommendedFeeds.tsx  |   2 +-
 .../auth/onboarding/RecommendedFollows.tsx    | 177 ++++++++++++++++++
 4 files changed, 186 insertions(+), 1 deletion(-)
 create mode 100644 src/view/com/auth/onboarding/RecommendedFollows.tsx

diff --git a/src/state/models/discovery/onboarding.ts b/src/state/models/discovery/onboarding.ts
index 09c9eac041..8c3d6e7f3d 100644
--- a/src/state/models/discovery/onboarding.ts
+++ b/src/state/models/discovery/onboarding.ts
@@ -6,6 +6,7 @@ import {track} from 'lib/analytics/analytics'
 export const OnboardingScreenSteps = {
   Welcome: 'Welcome',
   RecommendedFeeds: 'RecommendedFeeds',
+  RecommendedFollows: 'RecommendedFollows',
   Home: 'Home',
 } as const
 
@@ -56,6 +57,9 @@ export class OnboardingModel {
       this.step = 'RecommendedFeeds'
       return this.step
     } else if (this.step === 'RecommendedFeeds') {
+      this.step = 'RecommendedFollows'
+      return this.step
+    } else if (this.step === 'RecommendedFollows') {
       this.finish()
       return this.step
     } else {
diff --git a/src/view/com/auth/Onboarding.tsx b/src/view/com/auth/Onboarding.tsx
index 6ea8cd79e1..a36544a037 100644
--- a/src/view/com/auth/Onboarding.tsx
+++ b/src/view/com/auth/Onboarding.tsx
@@ -7,6 +7,7 @@ import {usePalette} from 'lib/hooks/usePalette'
 import {useStores} from 'state/index'
 import {Welcome} from './onboarding/Welcome'
 import {RecommendedFeeds} from './onboarding/RecommendedFeeds'
+import {RecommendedFollows} from './onboarding/RecommendedFollows'
 
 export const Onboarding = observer(function OnboardingImpl() {
   const pal = usePalette('default')
@@ -28,6 +29,9 @@ export const Onboarding = observer(function OnboardingImpl() {
         {store.onboarding.step === 'RecommendedFeeds' && (
           <RecommendedFeeds next={next} />
         )}
+        {store.onboarding.step === 'RecommendedFollows' && (
+          <RecommendedFollows next={next} />
+        )}
       </ErrorBoundary>
     </SafeAreaView>
   )
diff --git a/src/view/com/auth/onboarding/RecommendedFeeds.tsx b/src/view/com/auth/onboarding/RecommendedFeeds.tsx
index 99cdcafd03..cfe73df781 100644
--- a/src/view/com/auth/onboarding/RecommendedFeeds.tsx
+++ b/src/view/com/auth/onboarding/RecommendedFeeds.tsx
@@ -68,7 +68,7 @@ export const RecommendedFeeds = observer(function RecommendedFeedsImpl({
             <Text
               type="2xl-medium"
               style={{color: '#fff', position: 'relative', top: -1}}>
-              Done
+              Next
             </Text>
             <FontAwesomeIcon icon="angle-right" color="#fff" size={14} />
           </View>
diff --git a/src/view/com/auth/onboarding/RecommendedFollows.tsx b/src/view/com/auth/onboarding/RecommendedFollows.tsx
new file mode 100644
index 0000000000..9562510e88
--- /dev/null
+++ b/src/view/com/auth/onboarding/RecommendedFollows.tsx
@@ -0,0 +1,177 @@
+import React from 'react'
+import {FlatList, StyleSheet, View} from 'react-native'
+import {observer} from 'mobx-react-lite'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {TabletOrDesktop, Mobile} from 'view/com/util/layouts/Breakpoints'
+import {Text} from 'view/com/util/text/Text'
+import {ViewHeader} from 'view/com/util/ViewHeader'
+import {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout'
+import {Button} from 'view/com/util/forms/Button'
+import {RecommendedFeedsItem} from './RecommendedFeedsItem'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {usePalette} from 'lib/hooks/usePalette'
+import {RECOMMENDED_FEEDS} from 'lib/constants'
+
+type Props = {
+  next: () => void
+}
+export const RecommendedFollows = observer(function RecommendedFollowsImpl({
+  next,
+}: Props) {
+  const pal = usePalette('default')
+  const {isTabletOrMobile} = useWebMediaQueries()
+
+  const title = (
+    <>
+      <Text
+        style={[
+          pal.textLight,
+          tdStyles.title1,
+          isTabletOrMobile && tdStyles.title1Small,
+        ]}>
+        Follow some
+      </Text>
+      <Text
+        style={[
+          pal.link,
+          tdStyles.title2,
+          isTabletOrMobile && tdStyles.title2Small,
+        ]}>
+        Recommended
+      </Text>
+      <Text
+        style={[
+          pal.link,
+          tdStyles.title2,
+          isTabletOrMobile && tdStyles.title2Small,
+        ]}>
+        Users
+      </Text>
+      <Text type="2xl-medium" style={[pal.textLight, tdStyles.description]}>
+        Follow some users to get started. We can recommend you more users based
+        on who you find interesting.
+      </Text>
+      <View
+        style={{
+          flexDirection: 'row',
+          justifyContent: 'flex-end',
+          marginTop: 20,
+        }}>
+        <Button onPress={next} testID="continueBtn">
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              paddingLeft: 2,
+              gap: 6,
+            }}>
+            <Text
+              type="2xl-medium"
+              style={{color: '#fff', position: 'relative', top: -1}}>
+              Done
+            </Text>
+            <FontAwesomeIcon icon="angle-right" color="#fff" size={14} />
+          </View>
+        </Button>
+      </View>
+    </>
+  )
+
+  return (
+    <>
+      <TabletOrDesktop>
+        <TitleColumnLayout
+          testID="recommendedFeedsOnboarding"
+          title={title}
+          horizontal
+          titleStyle={isTabletOrMobile ? undefined : {minWidth: 470}}
+          contentStyle={{paddingHorizontal: 0}}>
+          <FlatList
+            data={RECOMMENDED_FEEDS}
+            renderItem={({item}) => <RecommendedFeedsItem {...item} />}
+            keyExtractor={item => item.did + item.rkey}
+            style={{flex: 1}}
+          />
+        </TitleColumnLayout>
+      </TabletOrDesktop>
+      <Mobile>
+        <View style={[mStyles.container]} testID="recommendedFeedsOnboarding">
+          <ViewHeader
+            title="Recommended Feeds"
+            showBackButton={false}
+            showOnDesktop
+          />
+          <Text type="lg-medium" style={[pal.text, mStyles.header]}>
+            Check out some recommended users. Follow them to see similar users.
+          </Text>
+
+          <FlatList
+            data={RECOMMENDED_FEEDS}
+            renderItem={({item}) => <RecommendedFeedsItem {...item} />}
+            keyExtractor={item => item.did + item.rkey}
+            style={{flex: 1}}
+          />
+
+          <Button
+            onPress={next}
+            label="Continue"
+            testID="continueBtn"
+            style={mStyles.button}
+            labelStyle={mStyles.buttonText}
+          />
+        </View>
+      </Mobile>
+    </>
+  )
+})
+
+const tdStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+    marginHorizontal: 16,
+    justifyContent: 'space-between',
+  },
+  title1: {
+    fontSize: 36,
+    fontWeight: '800',
+    textAlign: 'right',
+  },
+  title1Small: {
+    fontSize: 24,
+  },
+  title2: {
+    fontSize: 58,
+    fontWeight: '800',
+    textAlign: 'right',
+  },
+  title2Small: {
+    fontSize: 36,
+  },
+  description: {
+    maxWidth: 400,
+    marginTop: 10,
+    marginLeft: 'auto',
+    textAlign: 'right',
+  },
+})
+
+const mStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'space-between',
+  },
+  header: {
+    marginBottom: 16,
+    marginHorizontal: 16,
+  },
+  button: {
+    marginBottom: 16,
+    marginHorizontal: 16,
+    marginTop: 16,
+  },
+  buttonText: {
+    textAlign: 'center',
+    fontSize: 18,
+    paddingVertical: 4,
+  },
+})

From 915e5f79f7834e05dc0eb1206dbae9bc4da75cd4 Mon Sep 17 00:00:00 2001
From: Ansh Nanda <anshnanda10@gmail.com>
Date: Fri, 15 Sep 2023 18:29:12 +0530
Subject: [PATCH 03/17] add list of recommended follows from suggested actor
 model

---
 src/state/models/discovery/onboarding.ts      |   8 ++
 .../models/discovery/suggested-actors.ts      |  14 ++-
 .../auth/onboarding/RecommendedFollows.tsx    |  58 ++++++----
 .../onboarding/RecommendedFollowsItem.tsx     | 105 ++++++++++++++++++
 src/view/com/profile/FollowButton.tsx         |   1 +
 src/view/com/util/forms/Button.tsx            |  44 ++++++--
 6 files changed, 198 insertions(+), 32 deletions(-)
 create mode 100644 src/view/com/auth/onboarding/RecommendedFollowsItem.tsx

diff --git a/src/state/models/discovery/onboarding.ts b/src/state/models/discovery/onboarding.ts
index 8c3d6e7f3d..cbe54897f3 100644
--- a/src/state/models/discovery/onboarding.ts
+++ b/src/state/models/discovery/onboarding.ts
@@ -95,4 +95,12 @@ export class OnboardingModel {
   get isActive() {
     return !this.isComplete
   }
+
+  async getRecommendedFollows() {
+    const res =
+      await this.rootStore.agent.api.app.bsky.graph.getSuggestedFollowsByActor({
+        actor: this.rootStore.me.did,
+      })
+    return res.data.suggestions
+  }
 }
diff --git a/src/state/models/discovery/suggested-actors.ts b/src/state/models/discovery/suggested-actors.ts
index 0b3d36952e..8a05d860e3 100644
--- a/src/state/models/discovery/suggested-actors.ts
+++ b/src/state/models/discovery/suggested-actors.ts
@@ -23,7 +23,10 @@ export class SuggestedActorsModel {
   // data
   suggestions: SuggestedActor[] = []
 
-  constructor(public rootStore: RootStoreModel, opts?: {pageSize?: number}) {
+  constructor(
+    public rootStore: RootStoreModel,
+    opts?: {pageSize?: number; withSetup?: boolean},
+  ) {
     if (opts?.pageSize) {
       this.pageSize = opts.pageSize
     }
@@ -110,6 +113,15 @@ export class SuggestedActorsModel {
     }
   })
 
+  async fetchSuggestedFollows(actor: string): Promise<SuggestedActor[]> {
+    const res =
+      await this.rootStore.agent.app.bsky.graph.getSuggestedFollowsByActor({
+        actor: actor,
+      })
+    const {suggestions} = res.data
+    return suggestions
+  }
+
   // state transitions
   // =
 
diff --git a/src/view/com/auth/onboarding/RecommendedFollows.tsx b/src/view/com/auth/onboarding/RecommendedFollows.tsx
index 9562510e88..e360679c7d 100644
--- a/src/view/com/auth/onboarding/RecommendedFollows.tsx
+++ b/src/view/com/auth/onboarding/RecommendedFollows.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {FlatList, StyleSheet, View} from 'react-native'
+import {ActivityIndicator, FlatList, StyleSheet, View} from 'react-native'
 import {observer} from 'mobx-react-lite'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {TabletOrDesktop, Mobile} from 'view/com/util/layouts/Breakpoints'
@@ -7,10 +7,11 @@ import {Text} from 'view/com/util/text/Text'
 import {ViewHeader} from 'view/com/util/ViewHeader'
 import {TitleColumnLayout} from 'view/com/util/layouts/TitleColumnLayout'
 import {Button} from 'view/com/util/forms/Button'
-import {RecommendedFeedsItem} from './RecommendedFeedsItem'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {usePalette} from 'lib/hooks/usePalette'
-import {RECOMMENDED_FEEDS} from 'lib/constants'
+import {useStores} from 'state/index'
+import {SuggestedActorsModel} from 'state/models/discovery/suggested-actors'
+import {RecommendedFollowsItem} from './RecommendedFollowsItem'
 
 type Props = {
   next: () => void
@@ -18,8 +19,18 @@ type Props = {
 export const RecommendedFollows = observer(function RecommendedFollowsImpl({
   next,
 }: Props) {
+  const store = useStores()
+  const suggestedActors = React.useMemo<SuggestedActorsModel>(
+    () => new SuggestedActorsModel(store, {withSetup: true}),
+    [store],
+  )
   const pal = usePalette('default')
   const {isTabletOrMobile} = useWebMediaQueries()
+  React.useEffect(() => {
+    if (!suggestedActors.hasLoaded) {
+      suggestedActors.loadMore(true)
+    }
+  }, [suggestedActors])
 
   const title = (
     <>
@@ -81,37 +92,44 @@ export const RecommendedFollows = observer(function RecommendedFollowsImpl({
     <>
       <TabletOrDesktop>
         <TitleColumnLayout
-          testID="recommendedFeedsOnboarding"
+          testID="recommendedFollowsOnboarding"
           title={title}
           horizontal
           titleStyle={isTabletOrMobile ? undefined : {minWidth: 470}}
           contentStyle={{paddingHorizontal: 0}}>
-          <FlatList
-            data={RECOMMENDED_FEEDS}
-            renderItem={({item}) => <RecommendedFeedsItem {...item} />}
-            keyExtractor={item => item.did + item.rkey}
-            style={{flex: 1}}
-          />
+          {suggestedActors.isLoading ? (
+            <ActivityIndicator size="large" />
+          ) : (
+            <FlatList
+              data={suggestedActors.suggestions}
+              renderItem={({item}) => <RecommendedFollowsItem item={item} />}
+              keyExtractor={item => item.did}
+              style={{flex: 1}}
+            />
+          )}
         </TitleColumnLayout>
       </TabletOrDesktop>
+
       <Mobile>
-        <View style={[mStyles.container]} testID="recommendedFeedsOnboarding">
+        <View style={[mStyles.container]} testID="recommendedFollowsOnboarding">
           <ViewHeader
-            title="Recommended Feeds"
+            title="Recommended Follows"
             showBackButton={false}
             showOnDesktop
           />
           <Text type="lg-medium" style={[pal.text, mStyles.header]}>
             Check out some recommended users. Follow them to see similar users.
           </Text>
-
-          <FlatList
-            data={RECOMMENDED_FEEDS}
-            renderItem={({item}) => <RecommendedFeedsItem {...item} />}
-            keyExtractor={item => item.did + item.rkey}
-            style={{flex: 1}}
-          />
-
+          {suggestedActors.isLoading ? (
+            <ActivityIndicator size="large" />
+          ) : (
+            <FlatList
+              data={suggestedActors.suggestions}
+              renderItem={({item}) => <RecommendedFollowsItem item={item} />}
+              keyExtractor={item => item.did}
+              style={{flex: 1}}
+            />
+          )}
           <Button
             onPress={next}
             label="Continue"
diff --git a/src/view/com/auth/onboarding/RecommendedFollowsItem.tsx b/src/view/com/auth/onboarding/RecommendedFollowsItem.tsx
new file mode 100644
index 0000000000..5ea0658575
--- /dev/null
+++ b/src/view/com/auth/onboarding/RecommendedFollowsItem.tsx
@@ -0,0 +1,105 @@
+import React from 'react'
+import {View, StyleSheet} from 'react-native'
+import {AppBskyActorDefs, moderateProfile} from '@atproto/api'
+import {observer} from 'mobx-react-lite'
+import {useStores} from 'state/index'
+import {FollowButton} from 'view/com/profile/FollowButton'
+import {usePalette} from 'lib/hooks/usePalette'
+import {SuggestedActor} from 'state/models/discovery/suggested-actors'
+import {sanitizeDisplayName} from 'lib/strings/display-names'
+import {sanitizeHandle} from 'lib/strings/handles'
+import {s} from 'lib/styles'
+import {UserAvatar} from 'view/com/util/UserAvatar'
+import {Text} from 'view/com/util/text/Text'
+
+type Props = {
+  item: SuggestedActor
+}
+export const RecommendedFollowsItem: React.FC<Props> = ({item}) => {
+  const pal = usePalette('default')
+  return (
+    <View>
+      <View style={[styles.cardContainer, pal.view, pal.border]}>
+        <ProfileCard key={item.did} profile={item} />
+      </View>
+    </View>
+  )
+}
+
+export const ProfileCard = observer(function ProfileCardImpl({
+  profile,
+}: {
+  profile: AppBskyActorDefs.ProfileViewBasic
+}) {
+  const store = useStores()
+  const pal = usePalette('default')
+  const moderation = moderateProfile(profile, store.preferences.moderationOpts)
+
+  return (
+    <View style={styles.card}>
+      <View style={styles.layout}>
+        <View style={styles.layoutAvi}>
+          <UserAvatar
+            size={40}
+            avatar={profile.avatar}
+            moderation={moderation.avatar}
+          />
+        </View>
+        <View style={styles.layoutContent}>
+          <Text
+            type="lg"
+            style={[s.bold, pal.text]}
+            numberOfLines={1}
+            lineHeight={1.2}>
+            {sanitizeDisplayName(
+              profile.displayName || sanitizeHandle(profile.handle),
+              moderation.profile,
+            )}
+          </Text>
+          <Text type="md" style={[pal.textLight]} numberOfLines={1}>
+            {sanitizeHandle(profile.handle, '@')}
+          </Text>
+        </View>
+
+        <FollowButton did={profile.did} />
+      </View>
+      {profile.description ? (
+        <View style={styles.details}>
+          <Text style={pal.text} numberOfLines={4}>
+            {profile.description as string}
+          </Text>
+        </View>
+      ) : undefined}
+    </View>
+  )
+})
+
+const styles = StyleSheet.create({
+  cardContainer: {
+    borderTopWidth: 1,
+  },
+  card: {
+    paddingHorizontal: 10,
+  },
+  layout: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  layoutAvi: {
+    width: 54,
+    paddingLeft: 4,
+    paddingTop: 8,
+    paddingBottom: 10,
+  },
+  layoutContent: {
+    flex: 1,
+    paddingRight: 10,
+    paddingTop: 10,
+    paddingBottom: 10,
+  },
+  details: {
+    paddingLeft: 54,
+    paddingRight: 10,
+    paddingBottom: 10,
+  },
+})
diff --git a/src/view/com/profile/FollowButton.tsx b/src/view/com/profile/FollowButton.tsx
index 6f6286e69d..f765fba7e5 100644
--- a/src/view/com/profile/FollowButton.tsx
+++ b/src/view/com/profile/FollowButton.tsx
@@ -54,6 +54,7 @@ export const FollowButton = observer(function FollowButtonImpl({
       }
       onPress={onToggleFollowInner}
       label={followState === FollowState.Following ? 'Unfollow' : 'Follow'}
+      withLoading={true}
     />
   )
 })
diff --git a/src/view/com/util/forms/Button.tsx b/src/view/com/util/forms/Button.tsx
index 8049d22437..94a90bf4fc 100644
--- a/src/view/com/util/forms/Button.tsx
+++ b/src/view/com/util/forms/Button.tsx
@@ -7,6 +7,8 @@ import {
   Pressable,
   ViewStyle,
   PressableStateCallbackType,
+  ActivityIndicator,
+  View,
 } from 'react-native'
 import {Text} from '../text/Text'
 import {useTheme} from 'lib/ThemeContext'
@@ -48,17 +50,19 @@ export function Button({
   accessibilityHint,
   accessibilityLabelledBy,
   onAccessibilityEscape,
+  withLoading = false,
 }: React.PropsWithChildren<{
   type?: ButtonType
   label?: string
   style?: StyleProp<ViewStyle>
   labelStyle?: StyleProp<TextStyle>
-  onPress?: () => void
+  onPress?: () => void | Promise<void>
   testID?: string
   accessibilityLabel?: string
   accessibilityHint?: string
   accessibilityLabelledBy?: string
   onAccessibilityEscape?: () => void
+  withLoading?: boolean
 }>) {
   const theme = useTheme()
   const typeOuterStyle = choose<ViewStyle, Record<ButtonType, ViewStyle>>(
@@ -138,13 +142,16 @@ export function Button({
     },
   )
 
+  const [isLoading, setIsLoading] = React.useState(false)
   const onPressWrapped = React.useCallback(
-    (event: Event) => {
+    async (event: Event) => {
       event.stopPropagation()
       event.preventDefault()
-      onPress?.()
+      withLoading && setIsLoading(true)
+      await onPress?.()
+      withLoading && setIsLoading(false)
     },
-    [onPress],
+    [onPress, withLoading],
   )
 
   const getStyle = React.useCallback(
@@ -160,6 +167,23 @@ export function Button({
     [typeOuterStyle, style],
   )
 
+  const renderChildern = React.useCallback(() => {
+    if (!label) {
+      return children
+    }
+
+    return (
+      <View style={styles.labelContainer}>
+        {label && withLoading && isLoading ? (
+          <ActivityIndicator size={12} color={typeLabelStyle.color} />
+        ) : null}
+        <Text type="button" style={[typeLabelStyle, labelStyle]}>
+          {label}
+        </Text>
+      </View>
+    )
+  }, [children, label, withLoading, isLoading, typeLabelStyle, labelStyle])
+
   return (
     <Pressable
       style={getStyle}
@@ -170,13 +194,7 @@ export function Button({
       accessibilityHint={accessibilityHint}
       accessibilityLabelledBy={accessibilityLabelledBy}
       onAccessibilityEscape={onAccessibilityEscape}>
-      {label ? (
-        <Text type="button" style={[typeLabelStyle, labelStyle]}>
-          {label}
-        </Text>
-      ) : (
-        children
-      )}
+      {renderChildern}
     </Pressable>
   )
 }
@@ -187,4 +205,8 @@ const styles = StyleSheet.create({
     paddingVertical: 8,
     borderRadius: 24,
   },
+  labelContainer: {
+    flexDirection: 'row',
+    gap: 4,
+  },
 })

From 98181ce278e21b8099ef0baed7fb3fe8ee83c0f9 Mon Sep 17 00:00:00 2001
From: Ansh Nanda <anshnanda10@gmail.com>
Date: Fri, 15 Sep 2023 18:32:34 +0530
Subject: [PATCH 04/17] remove dead code

---
 src/state/models/discovery/suggested-actors.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/state/models/discovery/suggested-actors.ts b/src/state/models/discovery/suggested-actors.ts
index 8a05d860e3..6580e144ca 100644
--- a/src/state/models/discovery/suggested-actors.ts
+++ b/src/state/models/discovery/suggested-actors.ts
@@ -23,10 +23,7 @@ export class SuggestedActorsModel {
   // data
   suggestions: SuggestedActor[] = []
 
-  constructor(
-    public rootStore: RootStoreModel,
-    opts?: {pageSize?: number; withSetup?: boolean},
-  ) {
+  constructor(public rootStore: RootStoreModel, opts?: {pageSize?: number}) {
     if (opts?.pageSize) {
       this.pageSize = opts.pageSize
     }

From b7ffc40445534471c468e18b004a61293b086562 Mon Sep 17 00:00:00 2001
From: Ansh Nanda <anshnanda10@gmail.com>
Date: Fri, 15 Sep 2023 18:36:31 +0530
Subject: [PATCH 05/17] hoist suggestedActors into onboarding model

---
 src/state/models/discovery/onboarding.ts      | 15 +++++++-------
 .../auth/onboarding/RecommendedFollows.tsx    | 20 ++++++++-----------
 2 files changed, 15 insertions(+), 20 deletions(-)

diff --git a/src/state/models/discovery/onboarding.ts b/src/state/models/discovery/onboarding.ts
index cbe54897f3..8ad321ed95 100644
--- a/src/state/models/discovery/onboarding.ts
+++ b/src/state/models/discovery/onboarding.ts
@@ -2,6 +2,7 @@ import {makeAutoObservable} from 'mobx'
 import {RootStoreModel} from '../root-store'
 import {hasProp} from 'lib/type-guards'
 import {track} from 'lib/analytics/analytics'
+import {SuggestedActorsModel} from './suggested-actors'
 
 export const OnboardingScreenSteps = {
   Welcome: 'Welcome',
@@ -17,7 +18,11 @@ export class OnboardingModel {
   // state
   step: OnboardingStep = 'Home' // default state to skip onboarding, only enabled for new users by calling start()
 
+  // data
+  suggestedActors: SuggestedActorsModel
+
   constructor(public rootStore: RootStoreModel) {
+    this.suggestedActors = new SuggestedActorsModel(this.rootStore)
     makeAutoObservable(this, {
       rootStore: false,
       hydrate: false,
@@ -58,6 +63,8 @@ export class OnboardingModel {
       return this.step
     } else if (this.step === 'RecommendedFeeds') {
       this.step = 'RecommendedFollows'
+      // prefetch recommended follows
+      this.suggestedActors.loadMore(true)
       return this.step
     } else if (this.step === 'RecommendedFollows') {
       this.finish()
@@ -95,12 +102,4 @@ export class OnboardingModel {
   get isActive() {
     return !this.isComplete
   }
-
-  async getRecommendedFollows() {
-    const res =
-      await this.rootStore.agent.api.app.bsky.graph.getSuggestedFollowsByActor({
-        actor: this.rootStore.me.did,
-      })
-    return res.data.suggestions
-  }
 }
diff --git a/src/view/com/auth/onboarding/RecommendedFollows.tsx b/src/view/com/auth/onboarding/RecommendedFollows.tsx
index e360679c7d..77c2f47658 100644
--- a/src/view/com/auth/onboarding/RecommendedFollows.tsx
+++ b/src/view/com/auth/onboarding/RecommendedFollows.tsx
@@ -10,7 +10,6 @@ import {Button} from 'view/com/util/forms/Button'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useStores} from 'state/index'
-import {SuggestedActorsModel} from 'state/models/discovery/suggested-actors'
 import {RecommendedFollowsItem} from './RecommendedFollowsItem'
 
 type Props = {
@@ -20,17 +19,14 @@ export const RecommendedFollows = observer(function RecommendedFollowsImpl({
   next,
 }: Props) {
   const store = useStores()
-  const suggestedActors = React.useMemo<SuggestedActorsModel>(
-    () => new SuggestedActorsModel(store, {withSetup: true}),
-    [store],
-  )
   const pal = usePalette('default')
   const {isTabletOrMobile} = useWebMediaQueries()
+
   React.useEffect(() => {
-    if (!suggestedActors.hasLoaded) {
-      suggestedActors.loadMore(true)
+    if (!store.onboarding.suggestedActors.hasLoaded) {
+      store.onboarding.suggestedActors.loadMore(true)
     }
-  }, [suggestedActors])
+  }, [store])
 
   const title = (
     <>
@@ -97,11 +93,11 @@ export const RecommendedFollows = observer(function RecommendedFollowsImpl({
           horizontal
           titleStyle={isTabletOrMobile ? undefined : {minWidth: 470}}
           contentStyle={{paddingHorizontal: 0}}>
-          {suggestedActors.isLoading ? (
+          {store.onboarding.suggestedActors.isLoading ? (
             <ActivityIndicator size="large" />
           ) : (
             <FlatList
-              data={suggestedActors.suggestions}
+              data={store.onboarding.suggestedActors.suggestions}
               renderItem={({item}) => <RecommendedFollowsItem item={item} />}
               keyExtractor={item => item.did}
               style={{flex: 1}}
@@ -120,11 +116,11 @@ export const RecommendedFollows = observer(function RecommendedFollowsImpl({
           <Text type="lg-medium" style={[pal.text, mStyles.header]}>
             Check out some recommended users. Follow them to see similar users.
           </Text>
-          {suggestedActors.isLoading ? (
+          {store.onboarding.suggestedActors.isLoading ? (
             <ActivityIndicator size="large" />
           ) : (
             <FlatList
-              data={suggestedActors.suggestions}
+              data={store.onboarding.suggestedActors.suggestions}
               renderItem={({item}) => <RecommendedFollowsItem item={item} />}
               keyExtractor={item => item.did}
               style={{flex: 1}}

From 6069457bb4d6fd456c4c4173a7779ee906413036 Mon Sep 17 00:00:00 2001
From: Ansh Nanda <anshnanda10@gmail.com>
Date: Fri, 15 Sep 2023 18:38:10 +0530
Subject: [PATCH 06/17] add comments

---
 src/view/com/auth/onboarding/RecommendedFollows.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/view/com/auth/onboarding/RecommendedFollows.tsx b/src/view/com/auth/onboarding/RecommendedFollows.tsx
index 77c2f47658..e95454ffea 100644
--- a/src/view/com/auth/onboarding/RecommendedFollows.tsx
+++ b/src/view/com/auth/onboarding/RecommendedFollows.tsx
@@ -23,7 +23,12 @@ export const RecommendedFollows = observer(function RecommendedFollowsImpl({
   const {isTabletOrMobile} = useWebMediaQueries()
 
   React.useEffect(() => {
-    if (!store.onboarding.suggestedActors.hasLoaded) {
+    // Load suggested actors if not already loaded
+    // prefetch should happen in the onboarding model
+    if (
+      !store.onboarding.suggestedActors.hasLoaded ||
+      store.onboarding.suggestedActors.isEmpty
+    ) {
       store.onboarding.suggestedActors.loadMore(true)
     }
   }, [store])

From 699fe78e66054009d9e4db1f21d4ff2c70d64df4 Mon Sep 17 00:00:00 2001
From: Ansh Nanda <anshnanda10@gmail.com>
Date: Fri, 15 Sep 2023 18:55:57 +0530
Subject: [PATCH 07/17] load more suggested follows on follow

---
 .../models/discovery/suggested-actors.ts      |  9 ++++--
 .../onboarding/RecommendedFollowsItem.tsx     | 29 +++++++++++++++++--
 src/view/com/util/forms/Button.tsx            |  1 +
 3 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/state/models/discovery/suggested-actors.ts b/src/state/models/discovery/suggested-actors.ts
index 6580e144ca..0ac7518d36 100644
--- a/src/state/models/discovery/suggested-actors.ts
+++ b/src/state/models/discovery/suggested-actors.ts
@@ -110,13 +110,16 @@ export class SuggestedActorsModel {
     }
   })
 
-  async fetchSuggestedFollows(actor: string): Promise<SuggestedActor[]> {
+  async insertSuggestionsByActor(actor: string) {
     const res =
       await this.rootStore.agent.app.bsky.graph.getSuggestedFollowsByActor({
         actor: actor,
       })
-    const {suggestions} = res.data
-    return suggestions
+    const {suggestions: moreSuggestions} = res.data
+    const indexToInsertAt = this.suggestions.findIndex(
+      suggestion => suggestion.did === actor,
+    )
+    this.suggestions.splice(indexToInsertAt + 1, 0, ...moreSuggestions)
   }
 
   // state transitions
diff --git a/src/view/com/auth/onboarding/RecommendedFollowsItem.tsx b/src/view/com/auth/onboarding/RecommendedFollowsItem.tsx
index 5ea0658575..1f81b5311b 100644
--- a/src/view/com/auth/onboarding/RecommendedFollowsItem.tsx
+++ b/src/view/com/auth/onboarding/RecommendedFollowsItem.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {View, StyleSheet} from 'react-native'
+import {View, StyleSheet, ActivityIndicator} from 'react-native'
 import {AppBskyActorDefs, moderateProfile} from '@atproto/api'
 import {observer} from 'mobx-react-lite'
 import {useStores} from 'state/index'
@@ -34,6 +34,8 @@ export const ProfileCard = observer(function ProfileCardImpl({
   const store = useStores()
   const pal = usePalette('default')
   const moderation = moderateProfile(profile, store.preferences.moderationOpts)
+  const [addingMoreSuggestions, setAddingMoreSuggestions] =
+    React.useState(false)
 
   return (
     <View style={styles.card}>
@@ -61,7 +63,18 @@ export const ProfileCard = observer(function ProfileCardImpl({
           </Text>
         </View>
 
-        <FollowButton did={profile.did} />
+        <FollowButton
+          did={profile.did}
+          onToggleFollow={async isFollow => {
+            if (isFollow) {
+              setAddingMoreSuggestions(true)
+              await store.onboarding.suggestedActors.insertSuggestionsByActor(
+                profile.did,
+              )
+              setAddingMoreSuggestions(false)
+            }
+          }}
+        />
       </View>
       {profile.description ? (
         <View style={styles.details}>
@@ -70,6 +83,12 @@ export const ProfileCard = observer(function ProfileCardImpl({
           </Text>
         </View>
       ) : undefined}
+      {addingMoreSuggestions ? (
+        <View style={styles.addingMoreContainer}>
+          <ActivityIndicator color={pal.colors.text} />
+          <Text style={[pal.text]}>Finding similar accounts...</Text>
+        </View>
+      ) : undefined}
     </View>
   )
 })
@@ -102,4 +121,10 @@ const styles = StyleSheet.create({
     paddingRight: 10,
     paddingBottom: 10,
   },
+  addingMoreContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 4,
+  },
 })
diff --git a/src/view/com/util/forms/Button.tsx b/src/view/com/util/forms/Button.tsx
index 94a90bf4fc..ce6429dea9 100644
--- a/src/view/com/util/forms/Button.tsx
+++ b/src/view/com/util/forms/Button.tsx
@@ -188,6 +188,7 @@ export function Button({
     <Pressable
       style={getStyle}
       onPress={onPressWrapped}
+      disabled={isLoading}
       testID={testID}
       accessibilityRole="button"
       accessibilityLabel={accessibilityLabel}

From ebbc26514a002bd96a0b4f98e774c31212e7e7fa Mon Sep 17 00:00:00 2001
From: Ansh Nanda <anshnanda10@gmail.com>
Date: Fri, 15 Sep 2023 19:06:16 +0530
Subject: [PATCH 08/17] styling changes

---
 src/state/models/discovery/suggested-actors.ts          | 7 ++++++-
 src/view/com/auth/onboarding/RecommendedFollowsItem.tsx | 5 +++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/state/models/discovery/suggested-actors.ts b/src/state/models/discovery/suggested-actors.ts
index 0ac7518d36..c99f4fd980 100644
--- a/src/state/models/discovery/suggested-actors.ts
+++ b/src/state/models/discovery/suggested-actors.ts
@@ -116,10 +116,15 @@ export class SuggestedActorsModel {
         actor: actor,
       })
     const {suggestions: moreSuggestions} = res.data
+    this.rootStore.me.follows.hydrateProfiles(moreSuggestions)
     const indexToInsertAt = this.suggestions.findIndex(
       suggestion => suggestion.did === actor,
     )
-    this.suggestions.splice(indexToInsertAt + 1, 0, ...moreSuggestions)
+    this.suggestions.splice(
+      indexToInsertAt + 1,
+      0,
+      ...moreSuggestions.splice(0, 5),
+    )
   }
 
   // state transitions
diff --git a/src/view/com/auth/onboarding/RecommendedFollowsItem.tsx b/src/view/com/auth/onboarding/RecommendedFollowsItem.tsx
index 1f81b5311b..378edcd6e3 100644
--- a/src/view/com/auth/onboarding/RecommendedFollowsItem.tsx
+++ b/src/view/com/auth/onboarding/RecommendedFollowsItem.tsx
@@ -85,10 +85,10 @@ export const ProfileCard = observer(function ProfileCardImpl({
       ) : undefined}
       {addingMoreSuggestions ? (
         <View style={styles.addingMoreContainer}>
-          <ActivityIndicator color={pal.colors.text} />
+          <ActivityIndicator size="small" color={pal.colors.text} />
           <Text style={[pal.text]}>Finding similar accounts...</Text>
         </View>
-      ) : undefined}
+      ) : null}
     </View>
   )
 })
@@ -126,5 +126,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     paddingVertical: 4,
+    gap: 4,
   },
 })

From 34463b72d9ea445972d55f7c4285194b1fcf80a4 Mon Sep 17 00:00:00 2001
From: Ansh Nanda <anshnanda10@gmail.com>
Date: Mon, 18 Sep 2023 14:14:26 +0530
Subject: [PATCH 09/17] add animation

---
 .../com/auth/onboarding/RecommendedFollowsItem.tsx   | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/view/com/auth/onboarding/RecommendedFollowsItem.tsx b/src/view/com/auth/onboarding/RecommendedFollowsItem.tsx
index 378edcd6e3..e9b4ffb682 100644
--- a/src/view/com/auth/onboarding/RecommendedFollowsItem.tsx
+++ b/src/view/com/auth/onboarding/RecommendedFollowsItem.tsx
@@ -11,18 +11,20 @@ import {sanitizeHandle} from 'lib/strings/handles'
 import {s} from 'lib/styles'
 import {UserAvatar} from 'view/com/util/UserAvatar'
 import {Text} from 'view/com/util/text/Text'
+import Animated, {FadeInRight} from 'react-native-reanimated'
 
 type Props = {
   item: SuggestedActor
 }
 export const RecommendedFollowsItem: React.FC<Props> = ({item}) => {
   const pal = usePalette('default')
+
   return (
-    <View>
-      <View style={[styles.cardContainer, pal.view, pal.border]}>
-        <ProfileCard key={item.did} profile={item} />
-      </View>
-    </View>
+    <Animated.View
+      entering={FadeInRight}
+      style={[styles.cardContainer, pal.view, pal.border]}>
+      <ProfileCard key={item.did} profile={item} />
+    </Animated.View>
   )
 }
 

From 0c70b31d5f07ae0a0f267701d7c444f95fe34720 Mon Sep 17 00:00:00 2001
From: Ansh Nanda <anshnanda10@gmail.com>
Date: Mon, 18 Sep 2023 16:00:41 +0530
Subject: [PATCH 10/17] tweak animations

---
 src/view/com/auth/onboarding/RecommendedFollows.tsx  | 12 ++++++++----
 .../com/auth/onboarding/RecommendedFollowsItem.tsx   |  5 +++--
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/view/com/auth/onboarding/RecommendedFollows.tsx b/src/view/com/auth/onboarding/RecommendedFollows.tsx
index e95454ffea..cfb3f3b27c 100644
--- a/src/view/com/auth/onboarding/RecommendedFollows.tsx
+++ b/src/view/com/auth/onboarding/RecommendedFollows.tsx
@@ -103,8 +103,10 @@ export const RecommendedFollows = observer(function RecommendedFollowsImpl({
           ) : (
             <FlatList
               data={store.onboarding.suggestedActors.suggestions}
-              renderItem={({item}) => <RecommendedFollowsItem item={item} />}
-              keyExtractor={item => item.did}
+              renderItem={({item, index}) => (
+                <RecommendedFollowsItem item={item} index={index} />
+              )}
+              keyExtractor={(item, index) => item.did + index.toString()}
               style={{flex: 1}}
             />
           )}
@@ -126,8 +128,10 @@ export const RecommendedFollows = observer(function RecommendedFollowsImpl({
           ) : (
             <FlatList
               data={store.onboarding.suggestedActors.suggestions}
-              renderItem={({item}) => <RecommendedFollowsItem item={item} />}
-              keyExtractor={item => item.did}
+              renderItem={({item, index}) => (
+                <RecommendedFollowsItem item={item} index={index} />
+              )}
+              keyExtractor={(item, index) => item.did + index.toString()}
               style={{flex: 1}}
             />
           )}
diff --git a/src/view/com/auth/onboarding/RecommendedFollowsItem.tsx b/src/view/com/auth/onboarding/RecommendedFollowsItem.tsx
index e9b4ffb682..1fa995f955 100644
--- a/src/view/com/auth/onboarding/RecommendedFollowsItem.tsx
+++ b/src/view/com/auth/onboarding/RecommendedFollowsItem.tsx
@@ -15,13 +15,14 @@ import Animated, {FadeInRight} from 'react-native-reanimated'
 
 type Props = {
   item: SuggestedActor
+  index: number
 }
-export const RecommendedFollowsItem: React.FC<Props> = ({item}) => {
+export const RecommendedFollowsItem: React.FC<Props> = ({item, index}) => {
   const pal = usePalette('default')
 
   return (
     <Animated.View
-      entering={FadeInRight}
+      entering={FadeInRight.delay(50 * index).springify()}
       style={[styles.cardContainer, pal.view, pal.border]}>
       <ProfileCard key={item.did} profile={item} />
     </Animated.View>

From 99460244ce9524659e2246c21b6f350c922107c1 Mon Sep 17 00:00:00 2001
From: Ansh Nanda <anshnanda10@gmail.com>
Date: Mon, 18 Sep 2023 16:50:25 +0530
Subject: [PATCH 11/17] adjust styling slightly

---
 src/view/com/auth/onboarding/RecommendedFollows.tsx | 1 +
 src/view/com/util/forms/Button.tsx                  | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/view/com/auth/onboarding/RecommendedFollows.tsx b/src/view/com/auth/onboarding/RecommendedFollows.tsx
index cfb3f3b27c..04bc105376 100644
--- a/src/view/com/auth/onboarding/RecommendedFollows.tsx
+++ b/src/view/com/auth/onboarding/RecommendedFollows.tsx
@@ -191,6 +191,7 @@ const mStyles = StyleSheet.create({
     marginBottom: 16,
     marginHorizontal: 16,
     marginTop: 16,
+    alignItems: 'center',
   },
   buttonText: {
     textAlign: 'center',
diff --git a/src/view/com/util/forms/Button.tsx b/src/view/com/util/forms/Button.tsx
index ce6429dea9..076fa1baab 100644
--- a/src/view/com/util/forms/Button.tsx
+++ b/src/view/com/util/forms/Button.tsx
@@ -208,6 +208,6 @@ const styles = StyleSheet.create({
   },
   labelContainer: {
     flexDirection: 'row',
-    gap: 4,
+    gap: 8,
   },
 })

From 292d454462637f9eece297cc27680de61bba962a Mon Sep 17 00:00:00 2001
From: Ansh Nanda <anshnanda10@gmail.com>
Date: Mon, 18 Sep 2023 18:20:58 +0530
Subject: [PATCH 12/17] adjust styles on mobile

---
 src/view/com/auth/onboarding/RecommendedFeeds.tsx | 1 +
 src/view/com/auth/onboarding/WelcomeMobile.tsx    | 4 ++++
 2 files changed, 5 insertions(+)

diff --git a/src/view/com/auth/onboarding/RecommendedFeeds.tsx b/src/view/com/auth/onboarding/RecommendedFeeds.tsx
index cfe73df781..8ad5f249e1 100644
--- a/src/view/com/auth/onboarding/RecommendedFeeds.tsx
+++ b/src/view/com/auth/onboarding/RecommendedFeeds.tsx
@@ -169,6 +169,7 @@ const mStyles = StyleSheet.create({
     marginBottom: 16,
     marginHorizontal: 16,
     marginTop: 16,
+    alignItems: 'center',
   },
   buttonText: {
     textAlign: 'center',
diff --git a/src/view/com/auth/onboarding/WelcomeMobile.tsx b/src/view/com/auth/onboarding/WelcomeMobile.tsx
index 19c8d52d00..1f0a64370a 100644
--- a/src/view/com/auth/onboarding/WelcomeMobile.tsx
+++ b/src/view/com/auth/onboarding/WelcomeMobile.tsx
@@ -88,6 +88,7 @@ export const WelcomeMobile = observer(function WelcomeMobileImpl({
         onPress={next}
         label="Continue"
         testID="continueBtn"
+        style={[styles.buttonContainer]}
         labelStyle={styles.buttonText}
       />
     </View>
@@ -117,6 +118,9 @@ const styles = StyleSheet.create({
   spacer: {
     height: 20,
   },
+  buttonContainer: {
+    alignItems: 'center',
+  },
   buttonText: {
     textAlign: 'center',
     fontSize: 18,

From 6d334bfbd57d73b1df8633e5ebb0ab7dd6323484 Mon Sep 17 00:00:00 2001
From: Ansh Nanda <anshnanda10@gmail.com>
Date: Mon, 18 Sep 2023 18:42:30 +0530
Subject: [PATCH 13/17] styling improvements for web

---
 .../onboarding/RecommendedFollowsItem.tsx     | 22 +++++++++++++++----
 src/view/com/profile/FollowButton.tsx         |  5 ++++-
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/view/com/auth/onboarding/RecommendedFollowsItem.tsx b/src/view/com/auth/onboarding/RecommendedFollowsItem.tsx
index 1fa995f955..e938b863d7 100644
--- a/src/view/com/auth/onboarding/RecommendedFollowsItem.tsx
+++ b/src/view/com/auth/onboarding/RecommendedFollowsItem.tsx
@@ -12,6 +12,7 @@ import {s} from 'lib/styles'
 import {UserAvatar} from 'view/com/util/UserAvatar'
 import {Text} from 'view/com/util/text/Text'
 import Animated, {FadeInRight} from 'react-native-reanimated'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 
 type Props = {
   item: SuggestedActor
@@ -19,11 +20,20 @@ type Props = {
 }
 export const RecommendedFollowsItem: React.FC<Props> = ({item, index}) => {
   const pal = usePalette('default')
+  const {isMobile} = useWebMediaQueries()
 
   return (
     <Animated.View
       entering={FadeInRight.delay(50 * index).springify()}
-      style={[styles.cardContainer, pal.view, pal.border]}>
+      style={[
+        styles.cardContainer,
+        pal.view,
+        pal.border,
+        {
+          maxWidth: isMobile ? undefined : 670,
+          borderRightWidth: isMobile ? undefined : 1,
+        },
+      ]}>
       <ProfileCard key={item.did} profile={item} />
     </Animated.View>
   )
@@ -52,7 +62,7 @@ export const ProfileCard = observer(function ProfileCardImpl({
         </View>
         <View style={styles.layoutContent}>
           <Text
-            type="lg"
+            type="2xl-bold"
             style={[s.bold, pal.text]}
             numberOfLines={1}
             lineHeight={1.2}>
@@ -61,13 +71,14 @@ export const ProfileCard = observer(function ProfileCardImpl({
               moderation.profile,
             )}
           </Text>
-          <Text type="md" style={[pal.textLight]} numberOfLines={1}>
+          <Text type="xl" style={[pal.textLight]} numberOfLines={1}>
             {sanitizeHandle(profile.handle, '@')}
           </Text>
         </View>
 
         <FollowButton
           did={profile.did}
+          labelStyle={styles.followButton}
           onToggleFollow={async isFollow => {
             if (isFollow) {
               setAddingMoreSuggestions(true)
@@ -81,7 +92,7 @@ export const ProfileCard = observer(function ProfileCardImpl({
       </View>
       {profile.description ? (
         <View style={styles.details}>
-          <Text style={pal.text} numberOfLines={4}>
+          <Text type="lg" style={pal.text} numberOfLines={4}>
             {profile.description as string}
           </Text>
         </View>
@@ -131,4 +142,7 @@ const styles = StyleSheet.create({
     paddingVertical: 4,
     gap: 4,
   },
+  followButton: {
+    fontSize: 16,
+  },
 })
diff --git a/src/view/com/profile/FollowButton.tsx b/src/view/com/profile/FollowButton.tsx
index f765fba7e5..458426c145 100644
--- a/src/view/com/profile/FollowButton.tsx
+++ b/src/view/com/profile/FollowButton.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {View} from 'react-native'
+import {StyleProp, TextStyle, View} from 'react-native'
 import {observer} from 'mobx-react-lite'
 import {Button, ButtonType} from '../util/forms/Button'
 import {useStores} from 'state/index'
@@ -11,11 +11,13 @@ export const FollowButton = observer(function FollowButtonImpl({
   followedType = 'default',
   did,
   onToggleFollow,
+  labelStyle,
 }: {
   unfollowedType?: ButtonType
   followedType?: ButtonType
   did: string
   onToggleFollow?: (v: boolean) => void
+  labelStyle?: StyleProp<TextStyle>
 }) {
   const store = useStores()
   const followState = store.me.follows.getFollowState(did)
@@ -52,6 +54,7 @@ export const FollowButton = observer(function FollowButtonImpl({
       type={
         followState === FollowState.Following ? followedType : unfollowedType
       }
+      labelStyle={labelStyle}
       onPress={onToggleFollowInner}
       label={followState === FollowState.Following ? 'Unfollow' : 'Follow'}
       withLoading={true}

From 716749720fc894bfd60ede460e72521521a44883 Mon Sep 17 00:00:00 2001
From: Ansh Nanda <anshnanda10@gmail.com>
Date: Tue, 19 Sep 2023 22:38:38 +0530
Subject: [PATCH 14/17] fix text alignment in RecommendedFollows

---
 .../auth/onboarding/RecommendedFollows.tsx    | 19 +++++++++++--------
 yarn.lock                                     | 11 -----------
 2 files changed, 11 insertions(+), 19 deletions(-)

diff --git a/src/view/com/auth/onboarding/RecommendedFollows.tsx b/src/view/com/auth/onboarding/RecommendedFollows.tsx
index 04bc105376..f2710d2ac6 100644
--- a/src/view/com/auth/onboarding/RecommendedFollows.tsx
+++ b/src/view/com/auth/onboarding/RecommendedFollows.tsx
@@ -115,14 +115,17 @@ export const RecommendedFollows = observer(function RecommendedFollowsImpl({
 
       <Mobile>
         <View style={[mStyles.container]} testID="recommendedFollowsOnboarding">
-          <ViewHeader
-            title="Recommended Follows"
-            showBackButton={false}
-            showOnDesktop
-          />
-          <Text type="lg-medium" style={[pal.text, mStyles.header]}>
-            Check out some recommended users. Follow them to see similar users.
-          </Text>
+          <View>
+            <ViewHeader
+              title="Recommended Follows"
+              showBackButton={false}
+              showOnDesktop
+            />
+            <Text type="lg-medium" style={[pal.text, mStyles.header]}>
+              Check out some recommended users. Follow them to see similar
+              users.
+            </Text>
+          </View>
           {store.onboarding.suggestedActors.isLoading ? (
             <ActivityIndicator size="large" />
           ) : (
diff --git a/yarn.lock b/yarn.lock
index 470fa2ea80..a9400b4e98 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -34,17 +34,6 @@
     jsonpointer "^5.0.0"
     leven "^3.1.0"
 
-"@atproto/api@*":
-  version "0.3.13"
-  resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.3.13.tgz#e5ccaa83bb909e662286cdf74a77a76de6562a47"
-  integrity sha512-smDlomgipca16G+jKXAZSMfsAmA5wG8WR3Z1dj29ZShVJlhs6+HHdxX7dWVDYEdSeb2rp/wyHN/tQhxGDAkz/g==
-  dependencies:
-    "@atproto/common-web" "*"
-    "@atproto/uri" "*"
-    "@atproto/xrpc" "*"
-    tlds "^1.234.0"
-    typed-emitter "^2.1.0"
-
 "@atproto/api@^0.6.13":
   version "0.6.13"
   resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.6.13.tgz#26caeae983c577dfedf6ab1f054b31eb158d8ca6"

From e5de1aa3ab4483042d727674eb50e53e7117f1a6 Mon Sep 17 00:00:00 2001
From: Ansh Nanda <anshnanda10@gmail.com>
Date: Tue, 19 Sep 2023 23:05:46 +0530
Subject: [PATCH 15/17] dedupe inserted suggestions

---
 src/state/models/discovery/suggested-actors.ts | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/state/models/discovery/suggested-actors.ts b/src/state/models/discovery/suggested-actors.ts
index c99f4fd980..f519b7852d 100644
--- a/src/state/models/discovery/suggested-actors.ts
+++ b/src/state/models/discovery/suggested-actors.ts
@@ -110,21 +110,21 @@ export class SuggestedActorsModel {
     }
   })
 
-  async insertSuggestionsByActor(actor: string) {
+  async insertSuggestionsByActor(actor: string, indexToInsertAt: number) {
     const res =
       await this.rootStore.agent.app.bsky.graph.getSuggestedFollowsByActor({
         actor: actor,
       })
     const {suggestions: moreSuggestions} = res.data
     this.rootStore.me.follows.hydrateProfiles(moreSuggestions)
-    const indexToInsertAt = this.suggestions.findIndex(
-      suggestion => suggestion.did === actor,
-    )
-    this.suggestions.splice(
-      indexToInsertAt + 1,
-      0,
-      ...moreSuggestions.splice(0, 5),
+
+    // dedupe
+    const toInsert = moreSuggestions.filter(
+      s => !this.suggestions.find(s2 => s2.did === s.did),
     )
+
+    //  insert
+    this.suggestions.splice(indexToInsertAt + 1, 0, ...toInsert)
   }
 
   // state transitions

From df65b9f3819ffb8d0ca55b7068e767283f51fa41 Mon Sep 17 00:00:00 2001
From: Ansh Nanda <anshnanda10@gmail.com>
Date: Tue, 19 Sep 2023 23:27:46 +0530
Subject: [PATCH 16/17] fix animation duration

---
 src/state/models/discovery/suggested-actors.ts  |  6 ++++--
 .../auth/onboarding/RecommendedFollowsItem.tsx  | 17 ++++++++++++++---
 src/view/com/profile/FollowButton.tsx           |  4 ++--
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/state/models/discovery/suggested-actors.ts b/src/state/models/discovery/suggested-actors.ts
index f519b7852d..afa5e74e3e 100644
--- a/src/state/models/discovery/suggested-actors.ts
+++ b/src/state/models/discovery/suggested-actors.ts
@@ -19,6 +19,7 @@ export class SuggestedActorsModel {
   loadMoreCursor: string | undefined = undefined
   error = ''
   hasMore = false
+  lastInsertedAtIndex = -1
 
   // data
   suggestions: SuggestedActor[] = []
@@ -111,20 +112,21 @@ export class SuggestedActorsModel {
   })
 
   async insertSuggestionsByActor(actor: string, indexToInsertAt: number) {
+    // fetch suggestions
     const res =
       await this.rootStore.agent.app.bsky.graph.getSuggestedFollowsByActor({
         actor: actor,
       })
     const {suggestions: moreSuggestions} = res.data
     this.rootStore.me.follows.hydrateProfiles(moreSuggestions)
-
     // dedupe
     const toInsert = moreSuggestions.filter(
       s => !this.suggestions.find(s2 => s2.did === s.did),
     )
-
     //  insert
     this.suggestions.splice(indexToInsertAt + 1, 0, ...toInsert)
+    // update index
+    this.lastInsertedAtIndex = indexToInsertAt
   }
 
   // state transitions
diff --git a/src/view/com/auth/onboarding/RecommendedFollowsItem.tsx b/src/view/com/auth/onboarding/RecommendedFollowsItem.tsx
index e938b863d7..bb907d342d 100644
--- a/src/view/com/auth/onboarding/RecommendedFollowsItem.tsx
+++ b/src/view/com/auth/onboarding/RecommendedFollowsItem.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {useMemo} from 'react'
 import {View, StyleSheet, ActivityIndicator} from 'react-native'
 import {AppBskyActorDefs, moderateProfile} from '@atproto/api'
 import {observer} from 'mobx-react-lite'
@@ -20,11 +20,19 @@ type Props = {
 }
 export const RecommendedFollowsItem: React.FC<Props> = ({item, index}) => {
   const pal = usePalette('default')
+  const store = useStores()
   const {isMobile} = useWebMediaQueries()
+  const delay = useMemo(() => {
+    return (
+      50 *
+      (Math.abs(store.onboarding.suggestedActors.lastInsertedAtIndex - index) %
+        5)
+    )
+  }, [index, store.onboarding.suggestedActors.lastInsertedAtIndex])
 
   return (
     <Animated.View
-      entering={FadeInRight.delay(50 * index).springify()}
+      entering={FadeInRight.delay(delay).springify()}
       style={[
         styles.cardContainer,
         pal.view,
@@ -34,15 +42,17 @@ export const RecommendedFollowsItem: React.FC<Props> = ({item, index}) => {
           borderRightWidth: isMobile ? undefined : 1,
         },
       ]}>
-      <ProfileCard key={item.did} profile={item} />
+      <ProfileCard key={item.did} profile={item} index={index} />
     </Animated.View>
   )
 }
 
 export const ProfileCard = observer(function ProfileCardImpl({
   profile,
+  index,
 }: {
   profile: AppBskyActorDefs.ProfileViewBasic
+  index: number
 }) {
   const store = useStores()
   const pal = usePalette('default')
@@ -84,6 +94,7 @@ export const ProfileCard = observer(function ProfileCardImpl({
               setAddingMoreSuggestions(true)
               await store.onboarding.suggestedActors.insertSuggestionsByActor(
                 profile.did,
+                index,
               )
               setAddingMoreSuggestions(false)
             }
diff --git a/src/view/com/profile/FollowButton.tsx b/src/view/com/profile/FollowButton.tsx
index 458426c145..4b2b944f7b 100644
--- a/src/view/com/profile/FollowButton.tsx
+++ b/src/view/com/profile/FollowButton.tsx
@@ -30,18 +30,18 @@ export const FollowButton = observer(function FollowButtonImpl({
     const updatedFollowState = await store.me.follows.fetchFollowState(did)
     if (updatedFollowState === FollowState.Following) {
       try {
+        onToggleFollow?.(false)
         await store.agent.deleteFollow(store.me.follows.getFollowUri(did))
         store.me.follows.removeFollow(did)
-        onToggleFollow?.(false)
       } catch (e: any) {
         store.log.error('Failed to delete follow', e)
         Toast.show('An issue occurred, please try again.')
       }
     } else if (updatedFollowState === FollowState.NotFollowing) {
       try {
+        onToggleFollow?.(true)
         const res = await store.agent.follow(did)
         store.me.follows.addFollow(did, res.uri)
-        onToggleFollow?.(true)
       } catch (e: any) {
         store.log.error('Failed to create follow', e)
         Toast.show('An issue occurred, please try again.')

From d0bcbc6c6ec61a4ad5569d2b3ee9315d4891baef Mon Sep 17 00:00:00 2001
From: Paul Frazee <pfrazee@gmail.com>
Date: Tue, 19 Sep 2023 12:44:09 -0700
Subject: [PATCH 17/17] Minor spacing tweak

---
 src/view/com/auth/onboarding/RecommendedFollowsItem.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/view/com/auth/onboarding/RecommendedFollowsItem.tsx b/src/view/com/auth/onboarding/RecommendedFollowsItem.tsx
index bb907d342d..144fdc2e9b 100644
--- a/src/view/com/auth/onboarding/RecommendedFollowsItem.tsx
+++ b/src/view/com/auth/onboarding/RecommendedFollowsItem.tsx
@@ -149,8 +149,9 @@ const styles = StyleSheet.create({
   addingMoreContainer: {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: 4,
+    paddingLeft: 54,
+    paddingTop: 4,
+    paddingBottom: 12,
     gap: 4,
   },
   followButton: {