acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

[APP-1403] Profile empty states (#8969)

Browse Source 
* update: Empty state component

* update type error fixes

* add empty state icon

* update translations on labels

* update: lint error for empty state

* remove unused prompt

* update type errors

* fix lint errors and update profile followers and profile follows

* updated starterpack

* fix lint errors

* address feedback

* update icons to be a react element

* update icons

* update viewbox for icons

* optimize: icons and update profile lists

* optimize: icons and update profile lists

* lint error fix

* update iconSize from the rebase
This commit is contained in:
Anastasiya Uraleva
2025-11-27 03:22:03 -08:00
committed by GitHub
parent 2d056e5be6
commit d0649e9a9e
44 changed files with 551 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/view/com/feeds/ProfileFeedgens.tsx
+15 -4
View File
@@ -15,6 +15,7 @@ import {
} from 'react-native'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useNavigation} from '@react-navigation/native'
import {useQueryClient} from '@tanstack/react-query'
import {cleanError} from '#/lib/strings/errors'
@@ -29,6 +30,7 @@ import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
import {LoadMoreRetryBtn} from '#/view/com/util/LoadMoreRetryBtn'
import {atoms as a, ios, useTheme} from '#/alf'
import * as FeedCard from '#/components/FeedCard'
import {HashtagWide_Stroke1_Corner0_Rounded as HashtagWideIcon} from '#/components/icons/Hashtag'
import {ListFooter} from '#/components/Lists'
const LOADING = {_reactKey: '__loading__'}
@@ -78,6 +80,7 @@ export function ProfileFeedgens({
} = useProfileFeedgensQuery(did, opts)
const isEmpty = !isPending && !data?.pages[0]?.feeds.length
const {data: preferences} = usePreferencesQuery()
const navigation = useNavigation()
const items = useMemo(() => {
let items: any[] = []
@@ -147,9 +150,17 @@ export function ProfileFeedgens({
if (item === EMPTY) {
return (
<EmptyState
icon="hashtag"
message={_(msg`You have no feeds.`)}
testID="listsEmpty"
style={{width: '100%'}}
icon={HashtagWideIcon}
message={_(msg`You haven't made any custom feeds yet.`)}
textStyle={[t.atoms.text_contrast_medium, a.font_medium]}
button={{
label: _(msg`Browse custom feeds`),
text: _(msg`Browse custom feeds`),
onPress: () => navigation.navigate('Feeds' as never),
size: 'small',
color: 'secondary',
}}
/>
)
} else if (item === ERROR_ITEM) {
@@ -183,7 +194,7 @@ export function ProfileFeedgens({
}
return null
},
[_, t, error, refetch, onPressRetryLoadMore, preferences],
[_, t, error, refetch, onPressRetryLoadMore, preferences, navigation],
)
useEffect(() => {
src/view/com/lists/MyLists.tsx
+6 -7
View File
@@ -18,7 +18,7 @@ import {logger} from '#/logger'
import {useModerationOpts} from '#/state/preferences/moderation-opts'
import {type MyListsFilter, useMyListsQuery} from '#/state/queries/my-lists'
import {atoms as a, useTheme} from '#/alf'
import {BulletList_Stroke2_Corner0_Rounded as ListIcon} from '#/components/icons/BulletList'
import {BulletList_Stroke1_Corner0_Rounded as ListIcon} from '#/components/icons/BulletList'
import * as ListCard from '#/components/ListCard'
import {Text} from '#/components/Typography'
import {ErrorMessage} from '../util/error/ErrorMessage'
@@ -69,7 +69,7 @@ export function MyLists({
switch (filter) {
case 'curate':
emptyText = _(
msg`Public, sharable lists which can be used to drive feeds.`,
msg`Lists allow you to see content from your favorite people.`,
)
break
case 'mod':
@@ -102,19 +102,18 @@ export function MyLists({
({item, index}: {item: any; index: number}) => {
if (item === EMPTY) {
return (
<View style={[a.flex_1, a.align_center, a.gap_sm, a.px_xl, a.pt_xl]}>
<View style={[a.flex_1, a.align_center, a.gap_sm, a.px_xl, a.pt_3xl]}>
<View
style={[
a.align_center,
a.justify_center,
a.rounded_full,
t.atoms.bg_contrast_25,
{
width: 32,
height: 32,
width: 64,
height: 64,
},
]}>
<ListIcon size="md" fill={t.atoms.text_contrast_low.color} />
<ListIcon size="2xl" fill={t.atoms.text_contrast_medium.color} />
</View>
<Text
style={[
src/view/com/lists/ProfileLists.tsx
+50 -33
View File
@@ -15,19 +15,22 @@ import {
} from 'react-native'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useNavigation} from '@react-navigation/native'
import {useQueryClient} from '@tanstack/react-query'
import {cleanError} from '#/lib/strings/errors'
import {logger} from '#/logger'
import {isIOS, isNative, isWeb} from '#/platform/detection'
import {RQKEY, useProfileListsQuery} from '#/state/queries/profile-lists'
import {usePreferencesQuery} from '#/state/queries/preferences'
import {RQKEY, useProfileFeedgensQuery} from '#/state/queries/profile-feedgens'
import {EmptyState} from '#/view/com/util/EmptyState'
import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
import {List, type ListRef} from '#/view/com/util/List'
import {FeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
import {LoadMoreRetryBtn} from '#/view/com/util/LoadMoreRetryBtn'
import {atoms as a, ios, useTheme} from '#/alf'
import * as ListCard from '#/components/ListCard'
import * as FeedCard from '#/components/FeedCard'
import {BulletList_Stroke1_Corner0_Rounded as ListIcon} from '#/components/icons/BulletList'
import {ListFooter} from '#/components/Lists'
const LOADING = {_reactKey: '__loading__'}
@@ -39,7 +42,7 @@ interface SectionRef {
scrollToTop: () => void
}
interface ProfileListsProps {
interface ProfileFeedgensProps {
ref?: React.Ref<SectionRef>
did: string
scrollElRef: ListRef
@@ -59,23 +62,25 @@ export function ProfileLists({
style,
testID,
setScrollViewTag,
}: ProfileListsProps) {
const t = useTheme()
}: ProfileFeedgensProps) {
const {_} = useLingui()
const {height} = useWindowDimensions()
const t = useTheme()
const [isPTRing, setIsPTRing] = useState(false)
const {height} = useWindowDimensions()
const opts = useMemo(() => ({enabled}), [enabled])
const {
data,
isPending,
isFetchingNextPage,
hasNextPage,
fetchNextPage,
isFetchingNextPage,
isError,
error,
refetch,
} = useProfileListsQuery(did, opts)
const isEmpty = !isPending && !data?.pages[0]?.lists.length
} = useProfileFeedgensQuery(did, opts)
const isEmpty = !isPending && !data?.pages[0]?.feeds.length
const {data: preferences} = usePreferencesQuery()
const navigation = useNavigation()
const items = useMemo(() => {
let items: any[] = []
@@ -88,10 +93,9 @@ export function ProfileLists({
items = items.concat([EMPTY])
} else if (data?.pages) {
for (const page of data?.pages) {
items = items.concat(page.lists)
items = items.concat(page.feeds)
}
}
if (isError && !isEmpty) {
} else if (isError && !isEmpty) {
items = items.concat([LOAD_MORE_ERROR_ITEM])
}
return items
@@ -119,17 +123,18 @@ export function ProfileLists({
try {
await refetch()
} catch (err) {
logger.error('Failed to refresh lists', {message: err})
logger.error('Failed to refresh feeds', {message: err})
}
setIsPTRing(false)
}, [refetch, setIsPTRing])
const onEndReached = useCallback(async () => {
if (isFetchingNextPage || !hasNextPage || isError) return
try {
await fetchNextPage()
} catch (err) {
logger.error('Failed to load more lists', {message: err})
logger.error('Failed to load more feeds', {message: err})
}
}, [isFetchingNextPage, hasNextPage, isError, fetchNextPage])
@@ -140,14 +145,23 @@ export function ProfileLists({
// rendering
// =
const renderItemInner = useCallback(
const renderItem = useCallback(
({item, index}: ListRenderItemInfo<any>) => {
if (item === EMPTY) {
return (
<EmptyState
icon="list-ul"
message={_(msg`You have no lists.`)}
testID="listsEmpty"
icon={ListIcon}
message={_(
msg`Lists allow you to see content from your favorite people.`,
)}
textStyle={[t.atoms.text_contrast_medium, a.font_medium]}
button={{
label: _(msg`Create a list`),
text: _(msg`Create a list`),
onPress: () => navigation.navigate('Lists' as never),
size: 'small',
color: 'primary',
}}
/>
)
} else if (item === ERROR_ITEM) {
@@ -166,19 +180,22 @@ export function ProfileLists({
} else if (item === LOADING) {
return <FeedLoadingPlaceholder />
}
return (
<View
style={[
(index !== 0 || isWeb) && a.border_t,
t.atoms.border_contrast_low,
a.px_lg,
a.py_lg,
]}>
<ListCard.Default view={item} />
</View>
)
if (preferences) {
return (
<View
style={[
(index !== 0 || isWeb) && a.border_t,
t.atoms.border_contrast_low,
a.px_lg,
a.py_lg,
]}>
<FeedCard.Default view={item} />
</View>
)
}
return null
},
[error, refetch, onPressRetryLoadMore, _, t.atoms.border_contrast_low],
[_, t, error, refetch, onPressRetryLoadMore, preferences, navigation],
)
useEffect(() => {
@@ -188,7 +205,7 @@ export function ProfileLists({
}
}, [enabled, scrollElRef, setScrollViewTag])
const ProfileListsFooter = useCallback(() => {
const ProfileFeedgensFooter = useCallback(() => {
if (isEmpty) return null
return (
<ListFooter
@@ -215,8 +232,8 @@ export function ProfileLists({
ref={scrollElRef}
data={items}
keyExtractor={keyExtractor}
renderItem={renderItemInner}
ListFooterComponent={ProfileListsFooter}
renderItem={renderItem}
ListFooterComponent={ProfileFeedgensFooter}
refreshing={isPTRing}
onRefresh={onRefresh}
headerOffset={headerOffset}
src/view/com/notifications/NotificationFeed.tsx
+2 -1
View File
@@ -19,6 +19,7 @@ import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
import {List, type ListProps, type ListRef} from '#/view/com/util/List'
import {NotificationFeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
import {LoadMoreRetryBtn} from '#/view/com/util/LoadMoreRetryBtn'
import {Bell_Stroke2_Corner0_Rounded as BellIcon} from '#/components/icons/Bell'
import {NotificationFeedItem} from './NotificationFeedItem'
const EMPTY_FEED_ITEM = {_reactKey: '__empty__'}
@@ -118,7 +119,7 @@ export function NotificationFeed({
if (item === EMPTY_FEED_ITEM) {
return (
<EmptyState
icon="bell"
icon={BellIcon}
message={_(msg`No notifications yet!`)}
style={styles.emptyState}
/>
src/view/com/posts/PostFeedErrorMessage.tsx
+4 -1
View File
@@ -15,6 +15,7 @@ import {cleanError} from '#/lib/strings/errors'
import {logger} from '#/logger'
import {type FeedDescriptor} from '#/state/queries/post-feed'
import {useRemoveFeedMutation} from '#/state/queries/preferences'
import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning'
import * as Prompt from '#/components/Prompt'
import {EmptyState} from '../util/EmptyState'
import {ErrorMessage} from '../util/error/ErrorMessage'
@@ -50,6 +51,7 @@ export function PostFeedErrorMessage({
() => detectKnownError(feedDesc, error),
[feedDesc, error],
)
if (
typeof knownError !== 'undefined' &&
knownError !== KnownError.Unknown &&
@@ -68,7 +70,8 @@ export function PostFeedErrorMessage({
if (knownError === KnownError.Block) {
return (
<EmptyState
icon="ban"
icon={WarningIcon}
iconSize="2xl"
message={_l(msgLingui`Posts hidden`)}
style={{paddingVertical: 40}}
/>
src/view/com/profile/ProfileFollowers.tsx
+13 -1
View File
@@ -2,6 +2,7 @@ import React from 'react'
import {type AppBskyActorDefs as ActorDefs} from '@atproto/api'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useNavigation} from '@react-navigation/native'
import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender'
import {cleanError} from '#/lib/strings/errors'
@@ -9,6 +10,7 @@ import {logger} from '#/logger'
import {useProfileFollowersQuery} from '#/state/queries/profile-followers'
import {useResolveDidQuery} from '#/state/queries/resolve-uri'
import {useSession} from '#/state/session'
import {PeopleRemove2_Stroke1_Corner0_Rounded as PeopleRemoveIcon} from '#/components/icons/PeopleRemove2'
import {ListFooter, ListMaybePlaceholder} from '#/components/Lists'
import {List} from '../util/List'
import {ProfileCardWithFollowBtn} from './ProfileCard'
@@ -39,6 +41,7 @@ function keyExtractor(item: ActorDefs.ProfileViewBasic) {
export function ProfileFollowers({name}: {name: string}) {
const {_} = useLingui()
const navigation = useNavigation()
const initialNumToRender = useInitialNumToRender()
const {currentAccount} = useSession()
@@ -129,12 +132,21 @@ export function ProfileFollowers({name}: {name: string}) {
emptyType="results"
emptyMessage={
isMe
? _(msg`You do not have any followers.`)
? _(msg`No followers yet`)
: _(msg`This user doesn't have any followers.`)
}
errorMessage={cleanError(resolveError || error)}
onRetry={isError ? refetch : undefined}
sideBorders={false}
useEmptyState={true}
emptyStateIcon={PeopleRemoveIcon}
emptyStateButton={{
label: _(msg`Go back`),
text: _(msg`Go back`),
color: 'secondary',
size: 'small',
onPress: () => navigation.goBack(),
}}
/>
)
}
src/view/com/profile/ProfileFollows.tsx
+24 -1
View File
@@ -2,13 +2,17 @@ import React from 'react'
import {type AppBskyActorDefs as ActorDefs} from '@atproto/api'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {useNavigation} from '@react-navigation/native'
import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender'
import {type NavigationProp} from '#/lib/routes/types'
import {cleanError} from '#/lib/strings/errors'
import {logger} from '#/logger'
import {isWeb} from '#/platform/detection'
import {useProfileFollowsQuery} from '#/state/queries/profile-follows'
import {useResolveDidQuery} from '#/state/queries/resolve-uri'
import {useSession} from '#/state/session'
import {PeopleRemove2_Stroke1_Corner0_Rounded as PeopleRemoveIcon} from '#/components/icons/PeopleRemove2'
import {ListFooter, ListMaybePlaceholder} from '#/components/Lists'
import {List} from '../util/List'
import {ProfileCardWithFollowBtn} from './ProfileCard'
@@ -41,6 +45,16 @@ export function ProfileFollows({name}: {name: string}) {
const {_} = useLingui()
const initialNumToRender = useInitialNumToRender()
const {currentAccount} = useSession()
const navigation = useNavigation<NavigationProp>()
const onPressFindAccounts = React.useCallback(() => {
if (isWeb) {
navigation.navigate('Search', {})
} else {
navigation.navigate('SearchTab')
navigation.popToTop()
}
}, [navigation])
const [isPTRing, setIsPTRing] = React.useState(false)
const {
@@ -129,12 +143,21 @@ export function ProfileFollows({name}: {name: string}) {
emptyType="results"
emptyMessage={
isMe
? _(msg`You are not following anyone.`)
? _(msg`You are not following anyone yet`)
: _(msg`This user isn't following anyone.`)
}
errorMessage={cleanError(resolveError || error)}
onRetry={isError ? refetch : undefined}
sideBorders={false}
useEmptyState={true}
emptyStateIcon={PeopleRemoveIcon}
emptyStateButton={{
label: _(msg`See suggested accounts`),
text: _(msg`See suggested accounts`),
onPress: onPressFindAccounts,
size: 'tiny',
color: 'primary',
}}
/>
)
}
src/view/com/util/EmptyState.tsx
+84 -49
View File
@@ -1,76 +1,111 @@
import {type StyleProp, StyleSheet, View, type ViewStyle} from 'react-native'
import {type IconProp} from '@fortawesome/fontawesome-svg-core'
import {
FontAwesomeIcon,
type FontAwesomeIconStyle,
} from '@fortawesome/react-native-fontawesome'
import React from 'react'
import {type StyleProp, type TextStyle, type ViewStyle} from 'react-native'
import {View} from 'react-native'
import {usePalette} from '#/lib/hooks/usePalette'
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
import {UserGroupIcon} from '#/lib/icons'
import {Growth_Stroke2_Corner0_Rounded as Growth} from '#/components/icons/Growth'
import {Text} from './text/Text'
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
import {Button, type ButtonProps, ButtonText} from '#/components/Button'
import {EditBig_Stroke1_Corner0_Rounded as EditIcon} from '#/components/icons/EditBig'
import {Text} from '#/components/Typography'
export type EmptyStateButtonProps = Omit<ButtonProps, 'children' | 'label'> & {
label: string
text: string
}
export function EmptyState({
testID,
icon,
iconSize = '3xl',
message,
style,
textStyle,
button,
}: {
testID?: string
icon: IconProp | 'user-group' | 'growth'
icon?: React.ComponentType<any> | React.ReactElement
iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl'
message: string
style?: StyleProp<ViewStyle>
textStyle?: StyleProp<TextStyle>
button?: EmptyStateButtonProps
}) {
const pal = usePalette('default')
const {isTabletOrDesktop} = useWebMediaQueries()
const iconSize = isTabletOrDesktop ? 64 : 48
const t = useTheme()
const {gtMobile} = useBreakpoints()
const placeholderIcon = (
<EditIcon size="2xl" fill={t.atoms.text_contrast_medium.color} />
)
const renderIcon = () => {
if (!icon) {
return placeholderIcon
}
if (React.isValidElement(icon)) {
return icon
}
if (
typeof icon === 'function' ||
(typeof icon === 'object' && icon && 'render' in icon)
) {
const IconComponent = icon
return (
<IconComponent
size={iconSize}
fill={t.atoms.text_contrast_medium.color}
style={{color: t.atoms.text_contrast_low.color}}
/>
)
}
return placeholderIcon
}
return (
<View testID={testID} style={style}>
<View
style={[
styles.iconContainer,
isTabletOrDesktop && styles.iconContainerBig,
pal.viewLight,
a.flex_row,
a.align_center,
a.justify_center,
a.self_center,
a.rounded_full,
a.mt_5xl,
{height: 64, width: 64},
React.isValidElement(icon)
? a.bg_transparent
: [isTabletOrDesktop && {marginTop: 50}],
]}>
{icon === 'user-group' ? (
<UserGroupIcon size={iconSize} />
) : icon === 'growth' ? (
<Growth width={iconSize} fill={pal.colors.emptyStateIcon} />
) : (
<FontAwesomeIcon
icon={icon}
size={iconSize}
style={[{color: pal.colors.emptyStateIcon} as FontAwesomeIconStyle]}
/>
)}
{renderIcon()}
</View>
<Text type="xl" style={[{color: pal.colors.textLight}, styles.text]}>
<Text
style={[
{
color: pal.colors.textLight,
maxWidth: gtMobile ? '40%' : '60%',
},
a.pt_xs,
a.font_medium,
a.text_md,
a.leading_snug,
a.text_center,
a.self_center,
textStyle,
]}>
{message}
</Text>
{button && (
<View style={[a.flex_shrink, a.mt_xl, a.self_center]}>
<Button {...button}>
<ButtonText>{button.text}</ButtonText>
</Button>
</View>
)}
</View>
)
}
const styles = StyleSheet.create({
iconContainer: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
height: 80,
width: 80,
marginLeft: 'auto',
marginRight: 'auto',
borderRadius: 80,
marginTop: 30,
},
iconContainerBig: {
width: 100,
height: 100,
marginTop: 50,
},
text: {
textAlign: 'center',
paddingTop: 20,
},
})