Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Visually improve the empty state of feeds (#4466)

authored by

Paul Frazee and committed by
GitHub
4efd576f c2d7d234

+40 -21
+1 -1
src/screens/Profile/Sections/Feed.tsx
··· 56 56 })) 57 57 58 58 const renderPostsEmpty = React.useCallback(() => { 59 - return <EmptyState icon="feed" message={_(msg`This feed is empty!`)} /> 59 + return <EmptyState icon="growth" message={_(msg`No posts yet.`)} /> 60 60 }, [_]) 61 61 62 62 React.useEffect(() => {
+37 -18
src/view/com/util/EmptyState.tsx
··· 5 5 FontAwesomeIcon, 6 6 FontAwesomeIconStyle, 7 7 } from '@fortawesome/react-native-fontawesome' 8 - import {Text} from './text/Text' 8 + 9 + import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' 10 + import {usePalette} from 'lib/hooks/usePalette' 9 11 import {UserGroupIcon} from 'lib/icons' 10 - import {usePalette} from 'lib/hooks/usePalette' 11 12 import {isWeb} from 'platform/detection' 13 + import {Growth_Stroke2_Corner0_Rounded as Growth} from '#/components/icons/Growth' 14 + import {Text} from './text/Text' 12 15 13 16 export function EmptyState({ 14 17 testID, ··· 17 20 style, 18 21 }: { 19 22 testID?: string 20 - icon: IconProp | 'user-group' 23 + icon: IconProp | 'user-group' | 'growth' 21 24 message: string 22 25 style?: StyleProp<ViewStyle> 23 26 }) { 24 27 const pal = usePalette('default') 28 + const {isTabletOrDesktop} = useWebMediaQueries() 29 + const iconSize = isTabletOrDesktop ? 80 : 64 25 30 return ( 26 31 <View 27 32 testID={testID} 28 - style={[styles.container, isWeb && pal.border, style]}> 29 - <View style={styles.iconContainer}> 33 + style={[ 34 + styles.container, 35 + isWeb && pal.border, 36 + isTabletOrDesktop && {paddingRight: 20}, 37 + style, 38 + ]}> 39 + <View 40 + style={[ 41 + styles.iconContainer, 42 + isTabletOrDesktop && styles.iconContainerBig, 43 + pal.viewLight, 44 + ]}> 30 45 {icon === 'user-group' ? ( 31 - <UserGroupIcon size="64" style={styles.icon} /> 46 + <UserGroupIcon size={iconSize} /> 47 + ) : icon === 'growth' ? ( 48 + <Growth width={iconSize} fill={pal.colors.emptyStateIcon} /> 32 49 ) : ( 33 50 <FontAwesomeIcon 34 51 icon={icon} 35 - size={64} 36 - style={[ 37 - styles.icon, 38 - {color: pal.colors.emptyStateIcon} as FontAwesomeIconStyle, 39 - ]} 52 + size={iconSize} 53 + style={[{color: pal.colors.emptyStateIcon} as FontAwesomeIconStyle]} 40 54 /> 41 55 )} 42 56 </View> 43 - <Text 44 - type="xl-medium" 45 - style={[{color: pal.colors.textVeryLight}, styles.text]}> 57 + <Text type="xl" style={[{color: pal.colors.textLight}, styles.text]}> 46 58 {message} 47 59 </Text> 48 60 </View> ··· 51 63 52 64 const styles = StyleSheet.create({ 53 65 container: { 54 - paddingVertical: 24, 55 - paddingHorizontal: 36, 56 66 borderTopWidth: isWeb ? 1 : undefined, 57 67 }, 58 68 iconContainer: { 59 69 flexDirection: 'row', 60 - }, 61 - icon: { 70 + alignItems: 'center', 71 + justifyContent: 'center', 72 + height: 100, 73 + width: 100, 62 74 marginLeft: 'auto', 63 75 marginRight: 'auto', 76 + borderRadius: 80, 77 + marginTop: 30, 78 + }, 79 + iconContainerBig: { 80 + width: 140, 81 + height: 140, 82 + marginTop: 50, 64 83 }, 65 84 text: { 66 85 textAlign: 'center',
+1 -1
src/view/screens/ProfileFeed.tsx
··· 468 468 }, [onScrollToTop, isScreenFocused]) 469 469 470 470 const renderPostsEmpty = useCallback(() => { 471 - return <EmptyState icon="feed" message={_(msg`This feed is empty!`)} /> 471 + return <EmptyState icon="hashtag" message={_(msg`This feed is empty.`)} /> 472 472 }, [_]) 473 473 474 474 return (
+1 -1
src/view/screens/ProfileList.tsx
··· 726 726 }, [onScrollToTop, isScreenFocused]) 727 727 728 728 const renderPostsEmpty = useCallback(() => { 729 - return <EmptyState icon="feed" message={_(msg`This feed is empty!`)} /> 729 + return <EmptyState icon="hashtag" message={_(msg`This feed is empty.`)} /> 730 730 }, [_]) 731 731 732 732 return (