zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

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

Browse source
This commit is contained in:
Hailey 2024-06-21 19:59:08 -07:00 • committed by GitHub
parent 1715afd80e
commit 35f64535cb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 153 additions and 105 deletions
Download patch file Download diff file Expand all files Collapse all files

105
src/view/com/feeds/ProfileFeedgens.tsx
View file

@ -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,
},
})

32
src/view/com/lists/ProfileLists.tsx
View file

@ -3,7 +3,6 @@ import {
findNodeHandle,
ListRenderItemInfo,
StyleProp,
StyleSheet,
View,
ViewStyle,
} from 'react-native'
@ -12,17 +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 {RQKEY, useProfileListsQuery} from '#/state/queries/profile-lists'
import {useAnalytics} from 'lib/analytics/analytics'
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 {ListCard} from './ListCard'
const LOADING = {_reactKey: '__loading__'}
const EMPTY = {_reactKey: '__empty__'}
@ -48,7 +47,7 @@ export const ProfileLists = React.forwardRef<SectionRef, ProfileListsProps>(
{did, scrollElRef, headerOffset, enabled, style, testID, setScrollViewTag},
ref,
) {
const theme = useTheme()
const t = useTheme()
const {track} = useAnalytics()
const {_} = useLingui()
const [isPTRing, setIsPTRing] = React.useState(false)
@ -166,15 +165,18 @@ export const ProfileLists = React.forwardRef<SectionRef, ProfileListsProps>(
return <FeedLoadingPlaceholder />
}
return (
<ListCard
list={item}
testID={`list-${item.name}`}
style={styles.item}
noBorder={index === 0 && !isWeb}
/>
<View
style={[
(index !== 0 || isWeb) && a.border_t,
t.atoms.border_contrast_low,
a.px_lg,
a.py_lg,
]}>
<FeedCard.Default type="list" view={item} />
</View>
)
},
[error, refetch, onPressRetryLoadMore, _],
[error, refetch, onPressRetryLoadMore, _, t.atoms.border_contrast_low],
)
React.useEffect(() => {
@ -198,7 +200,7 @@ export const ProfileLists = React.forwardRef<SectionRef, ProfileListsProps>(
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
@ -208,9 +210,3 @@ export const ProfileLists = React.forwardRef<SectionRef, ProfileListsProps>(
)
},
)
const styles = StyleSheet.create({
item: {
paddingHorizontal: 18,
},
})

9
src/view/screens/Feeds.tsx
View file

@ -627,7 +627,7 @@ function FollowingFeed() {
fill={t.palette.white}
/>
</View>
<FeedCard.TitleAndByline title={_(msg`Following`)} />
<FeedCard.TitleAndByline title={_(msg`Following`)} type="feed" />
</FeedCard.Header>
</View>
)
@ -644,7 +644,7 @@ function SavedFeed({
savedFeed.type === 'feed' ? savedFeed.view.displayName : savedFeed.view.name
return (
<FeedCard.Link testID={`saved-feed-${feed.displayName}`} feed={feed}>
<FeedCard.Link testID={`saved-feed-${feed.displayName}`} {...savedFeed}>
{({hovered, pressed}) => (
<View
style={[
@ -657,7 +657,10 @@ function SavedFeed({
]}>
<FeedCard.Header>
<FeedCard.Avatar src={feed.avatar} size={28} />
<FeedCard.TitleAndByline title={displayName} />
<FeedCard.TitleAndByline
title={displayName}
type={savedFeed.type}
/>
<ChevronRight size="sm" fill={t.atoms.text_contrast_low.color} />
</FeedCard.Header>