4 files changed, 130 insertions, 119 deletions
diff --git a/src/view/com/auth/onboarding/RecommendedFeeds.tsx b/src/view/com/auth/onboarding/RecommendedFeeds.tsx
index 92d12f60b..99cdcafd0 100644
--- a/src/view/com/auth/onboarding/RecommendedFeeds.tsx
+++ b/src/view/com/auth/onboarding/RecommendedFeeds.tsx
@@ -15,7 +15,9 @@ import {RECOMMENDED_FEEDS} from 'lib/constants'
 type Props = {
   next: () => void
 }
-export const RecommendedFeeds = observer(({next}: Props) => {
+export const RecommendedFeeds = observer(function RecommendedFeedsImpl({
+  next,
+}: Props) {
   const pal = usePalette('default')
   const {isTabletOrMobile} = useWebMediaQueries()
 
diff --git a/src/view/com/auth/onboarding/RecommendedFeedsItem.tsx b/src/view/com/auth/onboarding/RecommendedFeedsItem.tsx
index d16b3213e..e5d12273a 100644
--- a/src/view/com/auth/onboarding/RecommendedFeedsItem.tsx
+++ b/src/view/com/auth/onboarding/RecommendedFeedsItem.tsx
@@ -13,130 +13,134 @@ import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {makeRecordUri} from 'lib/strings/url-helpers'
 import {sanitizeHandle} from 'lib/strings/handles'
 
-export const RecommendedFeedsItem = observer(
-  ({did, rkey}: {did: string; rkey: string}) => {
-    const {isMobile} = useWebMediaQueries()
-    const pal = usePalette('default')
-    const uri = makeRecordUri(did, 'app.bsky.feed.generator', rkey)
-    const item = useCustomFeed(uri)
-    if (!item) return null
-    const onToggle = async () => {
-      if (item.isSaved) {
-        try {
-          await item.unsave()
-        } catch (e) {
-          Toast.show('There was an issue contacting your server')
-          console.error('Failed to unsave feed', {e})
-        }
-      } else {
-        try {
-          await item.save()
-          await item.pin()
-        } catch (e) {
-          Toast.show('There was an issue contacting your server')
-          console.error('Failed to pin feed', {e})
-        }
+export const RecommendedFeedsItem = observer(function RecommendedFeedsItemImpl({
+  did,
+  rkey,
+}: {
+  did: string
+  rkey: string
+}) {
+  const {isMobile} = useWebMediaQueries()
+  const pal = usePalette('default')
+  const uri = makeRecordUri(did, 'app.bsky.feed.generator', rkey)
+  const item = useCustomFeed(uri)
+  if (!item) return null
+  const onToggle = async () => {
+    if (item.isSaved) {
+      try {
+        await item.unsave()
+      } catch (e) {
+        Toast.show('There was an issue contacting your server')
+        console.error('Failed to unsave feed', {e})
+      }
+    } else {
+      try {
+        await item.save()
+        await item.pin()
+      } catch (e) {
+        Toast.show('There was an issue contacting your server')
+        console.error('Failed to pin feed', {e})
       }
     }
-    return (
-      <View testID={`feed-${item.displayName}`}>
-        <View
-          style={[
-            pal.border,
-            {
-              flex: isMobile ? 1 : undefined,
-              flexDirection: 'row',
-              gap: 18,
-              maxWidth: isMobile ? undefined : 670,
-              borderRightWidth: isMobile ? undefined : 1,
-              paddingHorizontal: 24,
-              paddingVertical: isMobile ? 12 : 24,
-              borderTopWidth: 1,
-            },
-          ]}>
-          <View style={{marginTop: 2}}>
-            <UserAvatar type="algo" size={42} avatar={item.data.avatar} />
-          </View>
-          <View style={{flex: isMobile ? 1 : undefined}}>
+  }
+  return (
+    <View testID={`feed-${item.displayName}`}>
+      <View
+        style={[
+          pal.border,
+          {
+            flex: isMobile ? 1 : undefined,
+            flexDirection: 'row',
+            gap: 18,
+            maxWidth: isMobile ? undefined : 670,
+            borderRightWidth: isMobile ? undefined : 1,
+            paddingHorizontal: 24,
+            paddingVertical: isMobile ? 12 : 24,
+            borderTopWidth: 1,
+          },
+        ]}>
+        <View style={{marginTop: 2}}>
+          <UserAvatar type="algo" size={42} avatar={item.data.avatar} />
+        </View>
+        <View style={{flex: isMobile ? 1 : undefined}}>
+          <Text
+            type="2xl-bold"
+            numberOfLines={1}
+            style={[pal.text, {fontSize: 19}]}>
+            {item.displayName}
+          </Text>
+
+          <Text style={[pal.textLight, {marginBottom: 8}]} numberOfLines={1}>
+            by {sanitizeHandle(item.data.creator.handle, '@')}
+          </Text>
+
+          {item.data.description ? (
             <Text
-              type="2xl-bold"
-              numberOfLines={1}
-              style={[pal.text, {fontSize: 19}]}>
-              {item.displayName}
+              type="xl"
+              style={[
+                pal.text,
+                {
+                  flex: isMobile ? 1 : undefined,
+                  maxWidth: 550,
+                  marginBottom: 18,
+                },
+              ]}
+              numberOfLines={6}>
+              {item.data.description}
             </Text>
+          ) : null}
 
-            <Text style={[pal.textLight, {marginBottom: 8}]} numberOfLines={1}>
-              by {sanitizeHandle(item.data.creator.handle, '@')}
-            </Text>
+          <View style={{flexDirection: 'row', alignItems: 'center', gap: 12}}>
+            <Button
+              type="inverted"
+              style={{paddingVertical: 6}}
+              onPress={onToggle}>
+              <View
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  paddingRight: 2,
+                  gap: 6,
+                }}>
+                {item.isSaved ? (
+                  <>
+                    <FontAwesomeIcon
+                      icon="check"
+                      size={16}
+                      color={pal.colors.textInverted}
+                    />
+                    <Text type="lg-medium" style={pal.textInverted}>
+                      Added
+                    </Text>
+                  </>
+                ) : (
+                  <>
+                    <FontAwesomeIcon
+                      icon="plus"
+                      size={16}
+                      color={pal.colors.textInverted}
+                    />
+                    <Text type="lg-medium" style={pal.textInverted}>
+                      Add
+                    </Text>
+                  </>
+                )}
+              </View>
+            </Button>
 
-            {item.data.description ? (
-              <Text
-                type="xl"
-                style={[
-                  pal.text,
-                  {
-                    flex: isMobile ? 1 : undefined,
-                    maxWidth: 550,
-                    marginBottom: 18,
-                  },
-                ]}
-                numberOfLines={6}>
-                {item.data.description}
+            <View style={{flexDirection: 'row', gap: 4}}>
+              <HeartIcon
+                size={16}
+                strokeWidth={2.5}
+                style={[pal.textLight, {position: 'relative', top: 2}]}
+              />
+              <Text type="lg-medium" style={[pal.text, pal.textLight]}>
+                {item.data.likeCount || 0}
               </Text>
-            ) : null}
-
-            <View style={{flexDirection: 'row', alignItems: 'center', gap: 12}}>
-              <Button
-                type="inverted"
-                style={{paddingVertical: 6}}
-                onPress={onToggle}>
-                <View
-                  style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    paddingRight: 2,
-                    gap: 6,
-                  }}>
-                  {item.isSaved ? (
-                    <>
-                      <FontAwesomeIcon
-                        icon="check"
-                        size={16}
-                        color={pal.colors.textInverted}
-                      />
-                      <Text type="lg-medium" style={pal.textInverted}>
-                        Added
-                      </Text>
-                    </>
-                  ) : (
-                    <>
-                      <FontAwesomeIcon
-                        icon="plus"
-                        size={16}
-                        color={pal.colors.textInverted}
-                      />
-                      <Text type="lg-medium" style={pal.textInverted}>
-                        Add
-                      </Text>
-                    </>
-                  )}
-                </View>
-              </Button>
-
-              <View style={{flexDirection: 'row', gap: 4}}>
-                <HeartIcon
-                  size={16}
-                  strokeWidth={2.5}
-                  style={[pal.textLight, {position: 'relative', top: 2}]}
-                />
-                <Text type="lg-medium" style={[pal.text, pal.textLight]}>
-                  {item.data.likeCount || 0}
-                </Text>
-              </View>
             </View>
           </View>
         </View>
       </View>
-    )
-  },
-)
+    </View>
+  )
+})
diff --git a/src/view/com/auth/onboarding/WelcomeDesktop.tsx b/src/view/com/auth/onboarding/WelcomeDesktop.tsx
index 7b7555ace..c066e9bd5 100644
--- a/src/view/com/auth/onboarding/WelcomeDesktop.tsx
+++ b/src/view/com/auth/onboarding/WelcomeDesktop.tsx
@@ -14,7 +14,9 @@ type Props = {
   skip: () => void
 }
 
-export const WelcomeDesktop = observer(({next}: Props) => {
+export const WelcomeDesktop = observer(function WelcomeDesktopImpl({
+  next,
+}: Props) {
   const pal = usePalette('default')
   const horizontal = useMediaQuery({minWidth: 1300})
   const title = (
diff --git a/src/view/com/auth/onboarding/WelcomeMobile.tsx b/src/view/com/auth/onboarding/WelcomeMobile.tsx
index 0f627ad0b..19c8d52d0 100644
--- a/src/view/com/auth/onboarding/WelcomeMobile.tsx
+++ b/src/view/com/auth/onboarding/WelcomeMobile.tsx
@@ -13,7 +13,10 @@ type Props = {
   skip: () => void
 }
 
-export const WelcomeMobile = observer(({next, skip}: Props) => {
+export const WelcomeMobile = observer(function WelcomeMobileImpl({
+  next,
+  skip,
+}: Props) {
   const pal = usePalette('default')
 
   return (