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

+77 -25

src/components/FeedCard.tsx

··· 8 8 } from '@atproto/api' 9 9 import {msg, plural, Trans} from '@lingui/macro' 10 10 import {useLingui} from '@lingui/react' 11 + import {useQueryClient} from '@tanstack/react-query' 11 12 12 13 import {logger} from '#/logger' 13 14 import { ··· 16 17 useRemoveFeedMutation, 17 18 } from '#/state/queries/preferences' 18 19 import {sanitizeHandle} from 'lib/strings/handles' 20 + import {precacheFeedFromGeneratorView, precacheList} from 'state/queries/feed' 19 21 import {useSession} from 'state/session' 20 22 import {UserAvatar} from '#/view/com/util/UserAvatar' 21 23 import * as Toast from 'view/com/util/Toast' ··· 31 33 import {RichText} from '#/components/RichText' 32 34 import {Text} from '#/components/Typography' 33 35 34 - export function Default({ 35 - type, 36 - view, 37 - }: 36 + type Props = 38 37 | { 39 38 type: 'feed' 40 39 view: AppBskyFeedDefs.GeneratorView ··· 42 41 | { 43 42 type: 'list' 44 43 view: AppBskyGraphDefs.ListView 45 - }) { 44 + } 45 + 46 + export function Default(props: Props) { 47 + const {type, view} = props 46 48 const displayName = type === 'feed' ? view.displayName : view.name 49 + const purpose = type === 'list' ? view.purpose : undefined 47 50 return ( 48 - <Link feed={view}> 51 + <Link label={displayName} {...props}> 49 52 <Outer> 50 53 <Header> 51 54 <Avatar src={view.avatar} /> 52 - <TitleAndByline title={displayName} creator={view.creator} /> 53 - <Action uri={view.uri} pin /> 55 + <TitleAndByline 56 + title={displayName} 57 + creator={view.creator} 58 + type={type} 59 + purpose={purpose} 60 + /> 61 + <Action uri={view.uri} pin type={type} purpose={purpose} /> 54 62 </Header> 55 63 <Description description={view.description} /> 56 64 {type === 'feed' && <Likes count={view.likeCount || 0} />} ··· 60 68 } 61 69 62 70 export function Link({ 71 + type, 72 + view, 73 + label, 63 74 children, 64 - feed, 65 - }: { 66 - feed: AppBskyFeedDefs.GeneratorView | AppBskyGraphDefs.ListView 67 - } & Omit<LinkProps, 'to'>) { 75 + }: Props & Omit<LinkProps, 'to'>) { 76 + const queryClient = useQueryClient() 77 + 68 78 const href = React.useMemo(() => { 69 - return createProfileFeedHref({feed}) 70 - }, [feed]) 71 - return <InternalLink to={href}>{children}</InternalLink> 79 + return createProfileFeedHref({feed: view}) 80 + }, [view]) 81 + 82 + return ( 83 + <InternalLink 84 + to={href} 85 + label={label} 86 + onPress={() => { 87 + if (type === 'feed') { 88 + precacheFeedFromGeneratorView(queryClient, view) 89 + } else { 90 + precacheList(queryClient, view) 91 + } 92 + }}> 93 + {children} 94 + </InternalLink> 95 + ) 72 96 } 73 97 74 98 export function Outer({children}: {children: React.ReactNode}) { ··· 108 132 export function TitleAndByline({ 109 133 title, 110 134 creator, 135 + type, 136 + purpose, 111 137 }: { 112 138 title: string 113 139 creator?: AppBskyActorDefs.ProfileViewBasic 140 + type: 'feed' | 'list' 141 + purpose?: AppBskyGraphDefs.ListView['purpose'] 114 142 }) { 115 143 const t = useTheme() 116 144 ··· 123 151 <Text 124 152 style={[a.leading_snug, t.atoms.text_contrast_medium]} 125 153 numberOfLines={1}> 126 - <Trans>Feed by {sanitizeHandle(creator.handle, '@')}</Trans> 154 + {type === 'list' && purpose === 'app.bsky.graph.defs#curatelist' ? ( 155 + <Trans>List by {sanitizeHandle(creator.handle, '@')}</Trans> 156 + ) : type === 'list' && purpose === 'app.bsky.graph.defs#modlist' ? ( 157 + <Trans> 158 + Moderation list by {sanitizeHandle(creator.handle, '@')} 159 + </Trans> 160 + ) : ( 161 + <Trans>Feed by {sanitizeHandle(creator.handle, '@')}</Trans> 162 + )} 127 163 </Text> 128 164 )} 129 165 </View> ··· 184 220 ) 185 221 } 186 222 187 - export function Action({uri, pin}: {uri: string; pin?: boolean}) { 223 + export function Action({ 224 + uri, 225 + pin, 226 + type, 227 + purpose, 228 + }: { 229 + uri: string 230 + pin?: boolean 231 + type: 'feed' | 'list' 232 + purpose?: AppBskyGraphDefs.ListView['purpose'] 233 + }) { 188 234 const {hasSession} = useSession() 189 - if (!hasSession) return null 190 - return <ActionInner uri={uri} pin={pin} /> 235 + if (!hasSession || purpose !== 'app.bsky.graph.defs#curatelist') return null 236 + return <ActionInner uri={uri} pin={pin} type={type} /> 191 237 } 192 238 193 - function ActionInner({uri, pin}: {uri: string; pin?: boolean}) { 239 + function ActionInner({ 240 + uri, 241 + pin, 242 + type, 243 + }: { 244 + uri: string 245 + pin?: boolean 246 + type: 'feed' | 'list' 247 + }) { 194 248 const {_} = useLingui() 195 249 const {data: preferences} = usePreferencesQuery() 196 250 const {isPending: isAddSavedFeedPending, mutateAsync: saveFeeds} = ··· 198 252 const {isPending: isRemovePending, mutateAsync: removeFeed} = 199 253 useRemoveFeedMutation() 200 254 const savedFeedConfig = React.useMemo(() => { 201 - return preferences?.savedFeeds?.find( 202 - feed => feed.type === 'feed' && feed.value === uri, 203 - ) 255 + return preferences?.savedFeeds?.find(feed => feed.value === uri) 204 256 }, [preferences?.savedFeeds, uri]) 205 257 const removePromptControl = Prompt.usePromptControl() 206 258 const isPending = isAddSavedFeedPending || isRemovePending ··· 216 268 } else { 217 269 await saveFeeds([ 218 270 { 219 - type: 'feed', 271 + type, 220 272 value: uri, 221 273 pinned: pin || false, 222 274 }, ··· 228 280 Toast.show(_(msg`Failed to update feeds`)) 229 281 } 230 282 }, 231 - [_, pin, saveFeeds, removeFeed, uri, savedFeedConfig], 283 + [_, pin, saveFeeds, removeFeed, uri, savedFeedConfig, type], 232 284 ) 233 285 234 286 const onPrompRemoveFeed = React.useCallback(

+9 -1

src/state/queries/feed.ts

··· 578 578 ) 579 579 } 580 580 581 - function precacheList( 581 + export function precacheList( 582 582 queryClient: QueryClient, 583 583 list: AppBskyGraphDefs.ListView, 584 584 ) { ··· 588 588 list, 589 589 ) 590 590 } 591 + 592 + export function precacheFeedFromGeneratorView( 593 + queryClient: QueryClient, 594 + view: AppBskyFeedDefs.GeneratorView, 595 + ) { 596 + const hydratedFeed = hydrateFeedGenerator(view) 597 + precacheFeed(queryClient, hydratedFeed) 598 + }

+47 -58

src/view/com/feeds/ProfileFeedgens.tsx

··· 3 3 findNodeHandle, 4 4 ListRenderItemInfo, 5 5 StyleProp, 6 - StyleSheet, 7 6 View, 8 7 ViewStyle, 9 8 } from 'react-native' ··· 12 11 import {useQueryClient} from '@tanstack/react-query' 13 12 14 13 import {cleanError} from '#/lib/strings/errors' 15 - import {useTheme} from '#/lib/ThemeContext' 16 14 import {logger} from '#/logger' 17 15 import {isNative, isWeb} from '#/platform/detection' 18 - import {hydrateFeedGenerator} from '#/state/queries/feed' 19 16 import {usePreferencesQuery} from '#/state/queries/preferences' 20 17 import {RQKEY, useProfileFeedgensQuery} from '#/state/queries/profile-feedgens' 21 18 import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' 22 19 import {EmptyState} from 'view/com/util/EmptyState' 20 + import {atoms as a, useTheme} from '#/alf' 21 + import * as FeedCard from '#/components/FeedCard' 23 22 import {ErrorMessage} from '../util/error/ErrorMessage' 24 23 import {List, ListRef} from '../util/List' 25 24 import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn' 26 - import {FeedSourceCardLoaded} from './FeedSourceCard' 27 25 28 26 const LOADING = {_reactKey: '__loading__'} 29 27 const EMPTY = {_reactKey: '__empty__'} ··· 52 50 ref, 53 51 ) { 54 52 const {_} = useLingui() 55 - const theme = useTheme() 53 + const t = useTheme() 56 54 const [isPTRing, setIsPTRing] = React.useState(false) 57 55 const opts = React.useMemo(() => ({enabled}), [enabled]) 58 56 const { ··· 79 77 items = items.concat([EMPTY]) 80 78 } else if (data?.pages) { 81 79 for (const page of data?.pages) { 82 - items = items.concat(page.feeds.map(feed => hydrateFeedGenerator(feed))) 80 + items = items.concat(page.feeds) 83 81 } 84 - } 85 - if (isError && !isEmpty) { 82 + } else if (isError && !isEmpty) { 86 83 items = items.concat([LOAD_MORE_ERROR_ITEM]) 87 84 } 88 85 return items ··· 132 129 // rendering 133 130 // = 134 131 135 - const renderItemInner = React.useCallback( 136 - ({item, index}: ListRenderItemInfo<any>) => { 137 - if (item === EMPTY) { 138 - return ( 139 - <EmptyState 140 - icon="hashtag" 141 - message={_(msg`You have no feeds.`)} 142 - testID="listsEmpty" 143 - /> 144 - ) 145 - } else if (item === ERROR_ITEM) { 146 - return ( 147 - <ErrorMessage message={cleanError(error)} onPressTryAgain={refetch} /> 148 - ) 149 - } else if (item === LOAD_MORE_ERROR_ITEM) { 150 - return ( 151 - <LoadMoreRetryBtn 152 - label={_( 153 - msg`There was an issue fetching your lists. Tap here to try again.`, 154 - )} 155 - onPress={onPressRetryLoadMore} 156 - /> 157 - ) 158 - } else if (item === LOADING) { 159 - return <FeedLoadingPlaceholder /> 160 - } 161 - if (preferences) { 162 - return ( 163 - <FeedSourceCardLoaded 164 - feedUri={item.uri} 165 - feed={item} 166 - preferences={preferences} 167 - style={styles.item} 168 - showLikes 169 - hideTopBorder={index === 0 && !isWeb} 170 - /> 171 - ) 172 - } 173 - return null 174 - }, 175 - [error, refetch, onPressRetryLoadMore, preferences, _], 176 - ) 132 + const renderItem = ({item, index}: ListRenderItemInfo<any>) => { 133 + if (item === EMPTY) { 134 + return ( 135 + <EmptyState 136 + icon="hashtag" 137 + message={_(msg`You have no feeds.`)} 138 + testID="listsEmpty" 139 + /> 140 + ) 141 + } else if (item === ERROR_ITEM) { 142 + return ( 143 + <ErrorMessage message={cleanError(error)} onPressTryAgain={refetch} /> 144 + ) 145 + } else if (item === LOAD_MORE_ERROR_ITEM) { 146 + return ( 147 + <LoadMoreRetryBtn 148 + label={_( 149 + msg`There was an issue fetching your lists. Tap here to try again.`, 150 + )} 151 + onPress={onPressRetryLoadMore} 152 + /> 153 + ) 154 + } else if (item === LOADING) { 155 + return <FeedLoadingPlaceholder /> 156 + } 157 + if (preferences) { 158 + return ( 159 + <View 160 + style={[ 161 + (index !== 0 || isWeb) && a.border_t, 162 + t.atoms.border_contrast_low, 163 + a.px_lg, 164 + a.py_lg, 165 + ]}> 166 + <FeedCard.Default type="feed" view={item} /> 167 + </View> 168 + ) 169 + } 170 + return null 171 + } 177 172 178 173 React.useEffect(() => { 179 174 if (enabled && scrollElRef.current) { ··· 189 184 ref={scrollElRef} 190 185 data={items} 191 186 keyExtractor={(item: any) => item._reactKey || item.uri} 192 - renderItem={renderItemInner} 187 + renderItem={renderItem} 193 188 refreshing={isPTRing} 194 189 onRefresh={onRefresh} 195 190 headerOffset={headerOffset} 196 191 contentContainerStyle={isNative && {paddingBottom: headerOffset + 100}} 197 - indicatorStyle={theme.colorScheme === 'dark' ? 'white' : 'black'} 192 + indicatorStyle={t.name === 'light' ? 'black' : 'white'} 198 193 removeClippedSubviews={true} 199 194 // @ts-ignore our .web version only -prf 200 195 desktopFixedHeight ··· 203 198 </View> 204 199 ) 205 200 }) 206 - 207 - const styles = StyleSheet.create({ 208 - item: { 209 - paddingHorizontal: 18, 210 - }, 211 - })

+14 -18

src/view/com/lists/ProfileLists.tsx

··· 3 3 findNodeHandle, 4 4 ListRenderItemInfo, 5 5 StyleProp, 6 - StyleSheet, 7 6 View, 8 7 ViewStyle, 9 8 } from 'react-native' ··· 12 11 import {useQueryClient} from '@tanstack/react-query' 13 12 14 13 import {cleanError} from '#/lib/strings/errors' 15 - import {useTheme} from '#/lib/ThemeContext' 16 14 import {logger} from '#/logger' 17 15 import {isNative, isWeb} from '#/platform/detection' 18 16 import {RQKEY, useProfileListsQuery} from '#/state/queries/profile-lists' 19 17 import {useAnalytics} from 'lib/analytics/analytics' 20 18 import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder' 21 19 import {EmptyState} from 'view/com/util/EmptyState' 20 + import {atoms as a, useTheme} from '#/alf' 21 + import * as FeedCard from '#/components/FeedCard' 22 22 import {ErrorMessage} from '../util/error/ErrorMessage' 23 23 import {List, ListRef} from '../util/List' 24 24 import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn' 25 - import {ListCard} from './ListCard' 26 25 27 26 const LOADING = {_reactKey: '__loading__'} 28 27 const EMPTY = {_reactKey: '__empty__'} ··· 48 47 {did, scrollElRef, headerOffset, enabled, style, testID, setScrollViewTag}, 49 48 ref, 50 49 ) { 51 - const theme = useTheme() 50 + const t = useTheme() 52 51 const {track} = useAnalytics() 53 52 const {_} = useLingui() 54 53 const [isPTRing, setIsPTRing] = React.useState(false) ··· 166 165 return <FeedLoadingPlaceholder /> 167 166 } 168 167 return ( 169 - <ListCard 170 - list={item} 171 - testID={`list-${item.name}`} 172 - style={styles.item} 173 - noBorder={index === 0 && !isWeb} 174 - /> 168 + <View 169 + style={[ 170 + (index !== 0 || isWeb) && a.border_t, 171 + t.atoms.border_contrast_low, 172 + a.px_lg, 173 + a.py_lg, 174 + ]}> 175 + <FeedCard.Default type="list" view={item} /> 176 + </View> 175 177 ) 176 178 }, 177 - [error, refetch, onPressRetryLoadMore, _], 179 + [error, refetch, onPressRetryLoadMore, _, t.atoms.border_contrast_low], 178 180 ) 179 181 180 182 React.useEffect(() => { ··· 198 200 contentContainerStyle={ 199 201 isNative && {paddingBottom: headerOffset + 100} 200 202 } 201 - indicatorStyle={theme.colorScheme === 'dark' ? 'white' : 'black'} 203 + indicatorStyle={t.name === 'light' ? 'black' : 'white'} 202 204 removeClippedSubviews={true} 203 205 // @ts-ignore our .web version only -prf 204 206 desktopFixedHeight ··· 208 210 ) 209 211 }, 210 212 ) 211 - 212 - const styles = StyleSheet.create({ 213 - item: { 214 - paddingHorizontal: 18, 215 - }, 216 - })

+6 -3

src/view/screens/Feeds.tsx

··· 627 627 fill={t.palette.white} 628 628 /> 629 629 </View> 630 - <FeedCard.TitleAndByline title={_(msg`Following`)} /> 630 + <FeedCard.TitleAndByline title={_(msg`Following`)} type="feed" /> 631 631 </FeedCard.Header> 632 632 </View> 633 633 ) ··· 644 644 savedFeed.type === 'feed' ? savedFeed.view.displayName : savedFeed.view.name 645 645 646 646 return ( 647 - <FeedCard.Link testID={`saved-feed-${feed.displayName}`} feed={feed}> 647 + <FeedCard.Link testID={`saved-feed-${feed.displayName}`} {...savedFeed}> 648 648 {({hovered, pressed}) => ( 649 649 <View 650 650 style={[ ··· 657 657 ]}> 658 658 <FeedCard.Header> 659 659 <FeedCard.Avatar src={feed.avatar} size={28} /> 660 - <FeedCard.TitleAndByline title={displayName} /> 660 + <FeedCard.TitleAndByline 661 + title={displayName} 662 + type={savedFeed.type} 663 + /> 661 664 662 665 <ChevronRight size="sm" fill={t.atoms.text_contrast_low.color} /> 663 666 </FeedCard.Header>

Configure Feed

Configure Feed