Tweak feed card to prevent spinnerz when pushing to screen (#4600)

1 files changed, 47 insertions, 58 deletions

diff --git a/src/view/com/feeds/ProfileFeedgens.tsx b/src/view/com/feeds/ProfileFeedgens.tsx
index 197f35e4d..ec1a55e22 100644
--- a/src/view/com/feeds/ProfileFeedgens.tsx
+++ b/src/view/com/feeds/ProfileFeedgens.tsx
@@ -3,7 +3,6 @@ import {
   findNodeHandle,
   ListRenderItemInfo,
   StyleProp,
-  StyleSheet,
   View,
   ViewStyle,
 } from 'react-native'
@@ -12,18 +11,17 @@ import {useLingui} from '@lingui/react'
 import {useQueryClient} from '@tanstack/react-query'
 
 import {cleanError} from '#/lib/strings/errors'
-import {useTheme} from '#/lib/ThemeContext'
 import {logger} from '#/logger'
 import {isNative, isWeb} from '#/platform/detection'
-import {hydrateFeedGenerator} from '#/state/queries/feed'
 import {usePreferencesQuery} from '#/state/queries/preferences'
 import {RQKEY, useProfileFeedgensQuery} from '#/state/queries/profile-feedgens'
 import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
 import {EmptyState} from 'view/com/util/EmptyState'
+import {atoms as a, useTheme} from '#/alf'
+import * as FeedCard from '#/components/FeedCard'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {List, ListRef} from '../util/List'
 import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn'
-import {FeedSourceCardLoaded} from './FeedSourceCard'
 
 const LOADING = {_reactKey: '__loading__'}
 const EMPTY = {_reactKey: '__empty__'}
@@ -52,7 +50,7 @@ export const ProfileFeedgens = React.forwardRef<
   ref,
 ) {
   const {_} = useLingui()
-  const theme = useTheme()
+  const t = useTheme()
   const [isPTRing, setIsPTRing] = React.useState(false)
   const opts = React.useMemo(() => ({enabled}), [enabled])
   const {
@@ -79,10 +77,9 @@ export const ProfileFeedgens = React.forwardRef<
       items = items.concat([EMPTY])
     } else if (data?.pages) {
       for (const page of data?.pages) {
-        items = items.concat(page.feeds.map(feed => hydrateFeedGenerator(feed)))
+        items = items.concat(page.feeds)
       }
-    }
-    if (isError && !isEmpty) {
+    } else if (isError && !isEmpty) {
       items = items.concat([LOAD_MORE_ERROR_ITEM])
     }
     return items
@@ -132,48 +129,46 @@ export const ProfileFeedgens = React.forwardRef<
   // rendering
   // =
 
-  const renderItemInner = React.useCallback(
-    ({item, index}: ListRenderItemInfo<any>) => {
-      if (item === EMPTY) {
-        return (
-          <EmptyState
-            icon="hashtag"
-            message={_(msg`You have no feeds.`)}
-            testID="listsEmpty"
-          />
-        )
-      } else if (item === ERROR_ITEM) {
-        return (
-          <ErrorMessage message={cleanError(error)} onPressTryAgain={refetch} />
-        )
-      } else if (item === LOAD_MORE_ERROR_ITEM) {
-        return (
-          <LoadMoreRetryBtn
-            label={_(
-              msg`There was an issue fetching your lists. Tap here to try again.`,
-            )}
-            onPress={onPressRetryLoadMore}
-          />
-        )
-      } else if (item === LOADING) {
-        return <FeedLoadingPlaceholder />
-      }
-      if (preferences) {
-        return (
-          <FeedSourceCardLoaded
-            feedUri={item.uri}
-            feed={item}
-            preferences={preferences}
-            style={styles.item}
-            showLikes
-            hideTopBorder={index === 0 && !isWeb}
-          />
-        )
-      }
-      return null
-    },
-    [error, refetch, onPressRetryLoadMore, preferences, _],
-  )
+  const renderItem = ({item, index}: ListRenderItemInfo<any>) => {
+    if (item === EMPTY) {
+      return (
+        <EmptyState
+          icon="hashtag"
+          message={_(msg`You have no feeds.`)}
+          testID="listsEmpty"
+        />
+      )
+    } else if (item === ERROR_ITEM) {
+      return (
+        <ErrorMessage message={cleanError(error)} onPressTryAgain={refetch} />
+      )
+    } else if (item === LOAD_MORE_ERROR_ITEM) {
+      return (
+        <LoadMoreRetryBtn
+          label={_(
+            msg`There was an issue fetching your lists. Tap here to try again.`,
+          )}
+          onPress={onPressRetryLoadMore}
+        />
+      )
+    } else if (item === LOADING) {
+      return <FeedLoadingPlaceholder />
+    }
+    if (preferences) {
+      return (
+        <View
+          style={[
+            (index !== 0 || isWeb) && a.border_t,
+            t.atoms.border_contrast_low,
+            a.px_lg,
+            a.py_lg,
+          ]}>
+          <FeedCard.Default type="feed" view={item} />
+        </View>
+      )
+    }
+    return null
+  }
 
   React.useEffect(() => {
     if (enabled && scrollElRef.current) {
@@ -189,12 +184,12 @@ export const ProfileFeedgens = React.forwardRef<
         ref={scrollElRef}
         data={items}
         keyExtractor={(item: any) => item._reactKey || item.uri}
-        renderItem={renderItemInner}
+        renderItem={renderItem}
         refreshing={isPTRing}
         onRefresh={onRefresh}
         headerOffset={headerOffset}
         contentContainerStyle={isNative && {paddingBottom: headerOffset + 100}}
-        indicatorStyle={theme.colorScheme === 'dark' ? 'white' : 'black'}
+        indicatorStyle={t.name === 'light' ? 'black' : 'white'}
         removeClippedSubviews={true}
         // @ts-ignore our .web version only -prf
         desktopFixedHeight
@@ -203,9 +198,3 @@ export const ProfileFeedgens = React.forwardRef<
     </View>
   )
 })
-
-const styles = StyleSheet.create({
-  item: {
-    paddingHorizontal: 18,
-  },
-})