fix layout shifting in notifs

src/view/com/feeds/FeedSourceCard.tsx

@@ -2,7 +2,6 @@ import {
   Linking,
   Pressable,
   type StyleProp,
-  StyleSheet,
   View,
   type ViewStyle,
 } from 'react-native'
@@ -15,9 +14,7 @@ import {
 import {Plural, Trans} from '@lingui/macro'
 
 import {useNavigationDeduped} from '#/lib/hooks/useNavigationDeduped'
-import {usePalette} from '#/lib/hooks/usePalette'
 import {sanitizeHandle} from '#/lib/strings/handles'
-import {s} from '#/lib/styles'
 import {
   type FeedSourceInfo,
   hydrateFeedGenerator,
@@ -25,11 +22,11 @@ import {
   useFeedSourceInfoQuery,
 } from '#/state/queries/feed'
 import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
-import {Text} from '#/view/com/util/text/Text'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, useTheme} from '#/alf'
 import {shouldClickOpenNewTab} from '#/components/Link'
 import {RichText} from '#/components/RichText'
+import {Text} from '#/components/Typography'
 
 type FeedSourceCardProps = {
   feedUri: string
@@ -90,8 +87,6 @@ export function FeedSourceCardLoaded({
   hideTopBorder?: boolean
 }) {
   const t = useTheme()
-  const pal = usePalette('default')
-
   const navigation = useNavigationDeduped()
 
   /*
@@ -102,30 +97,16 @@ export function FeedSourceCardLoaded({
    */
   if (!feed)
     return (
-      <View
+      <FeedLoadingPlaceholder
         style={[
-          pal.border,
-          {
-            borderTopWidth:
-              showMinimalPlaceholder || hideTopBorder
-                ? 0
-                : StyleSheet.hairlineWidth,
-            flexDirection: 'row',
-            alignItems: 'center',
-            flex: 1,
-            paddingRight: 18,
-          },
-        ]}>
-        {showMinimalPlaceholder ? (
-          <FeedLoadingPlaceholder
-            style={[a.flex_1]}
-            showTopBorder={false}
-            showLowerPlaceholder={false}
-          />
-        ) : (
-          <FeedLoadingPlaceholder style={[a.flex_1]} showTopBorder={false} />
-        )}
-      </View>
+          t.atoms.border_contrast_low,
+          !(showMinimalPlaceholder || hideTopBorder) && a.border_t,
+          a.flex_1,
+          style,
+        ]}
+        showTopBorder={false}
+        showLowerPlaceholder={!showMinimalPlaceholder}
+      />
     )
 
   return (
@@ -168,14 +149,19 @@ export function FeedSourceCardLoaded({
       }}
       key={feed.uri}>
       <View style={[a.flex_row, a.align_center]}>
-        <View style={[s.mr10]}>
+        <View style={[a.mr_md]}>
           <UserAvatar type="algo" size={36} avatar={feed.avatar} />
         </View>
-        <View style={[a.flex_1, a.gap_2xs]}>
-          <Text emoji style={[pal.text, s.bold]} numberOfLines={1}>
+        <View style={[a.flex_1, a.gap_xs]}>
+          <Text
+            emoji
+            style={[a.text_md, a.font_bold, a.leading_tight]}
+            numberOfLines={1}>
             {feed.displayName}
           </Text>
-          <Text type="sm" style={[pal.textLight]} numberOfLines={1}>
+          <Text
+            style={[a.text_sm, t.atoms.text_contrast_medium, a.leading_tight]}
+            numberOfLines={1}>
             {feed.type === 'feed' ? (
               <Trans>Feed by {sanitizeHandle(feed.creatorHandle, '@')}</Trans>
             ) : (
@@ -194,7 +180,13 @@ export function FeedSourceCardLoaded({
       ) : null}
 
       {showLikes && feed.type === 'feed' ? (
-        <Text type="sm-medium" style={[pal.text, pal.textLight]}>
+        <Text
+          style={[
+            a.text_sm,
+            a.font_bold,
+            t.atoms.text_contrast_medium,
+            a.leading_tight,
+          ]}>
           <Trans>
             Liked by{' '}
             <Plural value={feed.likeCount || 0} one="# user" other="# users" />

src/view/com/notifications/NotificationFeedItem.tsx

@@ -675,6 +675,7 @@ let NotificationFeedItem = ({
                   t.atoms.bg,
                   t.atoms.border_contrast_low,
                   a.border,
+                  a.p_md,
                   styles.feedcard,
                 ]}
                 showLikes
@@ -1000,7 +1001,6 @@ const styles = StyleSheet.create({
   },
   feedcard: {
     borderRadius: 8,
-    paddingVertical: 12,
     marginTop: 6,
   },
   addedContainer: {

src/view/com/util/LoadingPlaceholder.tsx

@@ -233,8 +233,7 @@ export function FeedLoadingPlaceholder({
     <View
       style={[
         {
-          paddingHorizontal: 16,
-          paddingVertical: 16,
+          padding: 16,
           borderTopWidth: showTopBorder ? StyleSheet.hairlineWidth : 0,
         },
         pal.border,
@@ -252,12 +251,7 @@ export function FeedLoadingPlaceholder({
         </View>
       </View>
       {showLowerPlaceholder && (
-        <View style={{paddingHorizontal: 5, marginTop: 10}}>
-          <LoadingPlaceholder
-            width={260}
-            height={8}
-            style={{marginVertical: 12}}
-          />
+        <View style={{marginTop: 12}}>
           <LoadingPlaceholder width={120} height={8} />
         </View>
       )}
@@ -352,7 +346,7 @@ const styles = StyleSheet.create({
   },
   avatar: {
     borderRadius: 999,
-    marginRight: 10,
+    marginRight: 12,
   },
   notification: {
     flexDirection: 'row',

src/view/screens/SavedFeeds.tsx

@@ -296,7 +296,7 @@ function ListItem({
         <FeedSourceCard
           key={feedUri}
           feedUri={feedUri}
-          style={[isPinned && {paddingRight: 8}]}
+          style={[isPinned && a.pr_sm]}
           showMinimalPlaceholder
           hideTopBorder={true}
         />
@@ -391,26 +391,17 @@ function ListItem({
 function FollowingFeedCard() {
   const t = useTheme()
   return (
-    <View
-      style={[
-        a.flex_row,
-        a.align_center,
-        a.flex_1,
-        {
-          paddingHorizontal: 16,
-          paddingVertical: 16,
-        },
-      ]}>
+    <View style={[a.flex_row, a.align_center, a.flex_1, a.p_lg]}>
       <View
         style={[
           a.align_center,
           a.justify_center,
           a.rounded_sm,
+          a.mr_md,
           {
             width: 36,
             height: 36,
             backgroundColor: t.palette.primary_500,
-            marginRight: 10,
           },
         ]}>
         <FilterTimeline
@@ -423,8 +414,7 @@ function FollowingFeedCard() {
           fill={t.palette.white}
         />
       </View>
-      <View
-        style={{flex: 1, flexDirection: 'row', gap: 8, alignItems: 'center'}}>
+      <View style={[a.flex_1, a.flex_row, a.gap_sm, a.align_center]}>
         <Text type="lg-medium" style={[t.atoms.text]} numberOfLines={1}>
           <Trans>Following</Trans>
         </Text>