diff --git a/src/view/com/lists/ListMembers.tsx b/src/view/com/lists/ListMembers.tsx
index cf7bb6b9e9..0caae67011 100644
--- a/src/view/com/lists/ListMembers.tsx
+++ b/src/view/com/lists/ListMembers.tsx
@@ -1,11 +1,5 @@
-import React from 'react'
-import {
- ActivityIndicator,
- Dimensions,
- StyleProp,
- View,
- ViewStyle,
-} from 'react-native'
+import React, {useCallback} from 'react'
+import {Dimensions, StyleProp, View, ViewStyle} from 'react-native'
import {AppBskyActorDefs, AppBskyGraphDefs} from '@atproto/api'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
@@ -16,6 +10,7 @@ import {logger} from '#/logger'
import {useModalControls} from '#/state/modals'
import {useListMembersQuery} from '#/state/queries/list-members'
import {useSession} from '#/state/session'
+import {ListFooter} from '#/components/Lists'
import {ProfileCard} from '../profile/ProfileCard'
import {ErrorMessage} from '../util/error/ErrorMessage'
import {Button} from '../util/forms/Button'
@@ -66,6 +61,7 @@ export function ListMembers({
refetch,
fetchNextPage,
hasNextPage,
+ isFetchingNextPage,
} = useListMembersQuery(list)
const isEmpty = !isFetching && !data?.pages[0].items.length
const isOwner =
@@ -197,14 +193,17 @@ export function ListMembers({
],
)
- const Footer = React.useCallback(
- () => (
-
- {isFetching && }
-
- ),
- [isFetching],
- )
+ const renderFooter = useCallback(() => {
+ if (isEmpty) return null
+ return (
+
+ )
+ }, [hasNextPage, error, isFetchingNextPage, fetchNextPage, isEmpty])
return (
@@ -214,8 +213,8 @@ export function ListMembers({
data={items}
keyExtractor={(item: any) => item.subject?.did || item._reactKey}
renderItem={renderItem}
- ListHeaderComponent={renderHeader}
- ListFooterComponent={Footer}
+ ListHeaderComponent={!isEmpty ? renderHeader : undefined}
+ ListFooterComponent={renderFooter}
refreshing={isRefreshing}
onRefresh={onRefresh}
headerOffset={headerOffset}
diff --git a/src/view/com/util/EmptyState.tsx b/src/view/com/util/EmptyState.tsx
index a6352c2fef..6b2600a401 100644
--- a/src/view/com/util/EmptyState.tsx
+++ b/src/view/com/util/EmptyState.tsx
@@ -26,9 +26,7 @@ export function EmptyState({
const {isTabletOrDesktop} = useWebMediaQueries()
const iconSize = isTabletOrDesktop ? 64 : 48
return (
-
+
)}
{({headerHeight, scrollElRef}) => (
@@ -771,9 +774,13 @@ interface FeedSectionProps {
headerHeight: number
scrollElRef: ListRef
isFocused: boolean
+ onPressAddUser: () => void
}
const FeedSection = React.forwardRef(
- function FeedSectionImpl({feed, scrollElRef, headerHeight, isFocused}, ref) {
+ function FeedSectionImpl(
+ {feed, scrollElRef, headerHeight, isFocused, onPressAddUser},
+ ref,
+ ) {
const queryClient = useQueryClient()
const [hasNew, setHasNew] = React.useState(false)
const [isScrolledDown, setIsScrolledDown] = React.useState(false)
@@ -800,8 +807,23 @@ const FeedSection = React.forwardRef(
}, [onScrollToTop, isScreenFocused])
const renderPostsEmpty = useCallback(() => {
- return
- }, [_])
+ return (
+
+
+
+
+
+ Start adding people!
+
+
+
+ )
+ }, [_, onPressAddUser])
return (
@@ -840,10 +862,9 @@ const AboutSection = React.forwardRef(
{list, onPressAddUser, headerHeight, scrollElRef},
ref,
) {
- const pal = usePalette('default')
const {_} = useLingui()
- const {isMobile} = useWebMediaQueries()
const {currentAccount} = useSession()
+ const {isMobile} = useWebMediaQueries()
const [isScrolledDown, setIsScrolledDown] = React.useState(false)
const isOwner = list.creator.did === currentAccount?.did
@@ -862,50 +883,66 @@ const AboutSection = React.forwardRef(
if (!isOwner) {
return
}
- return (
-
-
- {isOwner && (
-
-
-
- Add
-
-
- )}
+ if (isMobile) {
+ return (
+
+
+
+
+ Add people
+
+
+ )
+ }
+ return (
+
+
+
+
+ Add people
+
+
)
- }, [isMobile, pal.colors.link, pal.link, isOwner, _, onPressAddUser])
+ }, [isOwner, _, onPressAddUser, isMobile])
const renderEmptyState = useCallback(() => {
return (
-
+
+
+
+
+
+ Start adding people!
+
+
+
)
- }, [_])
+ }, [_, onPressAddUser])
return (