diff --git a/app/soapbox/features/group/group-members.tsx b/app/soapbox/features/group/group-members.tsx index 34dbb04c3..0ef02ce9c 100644 --- a/app/soapbox/features/group/group-members.tsx +++ b/app/soapbox/features/group/group-members.tsx @@ -25,7 +25,7 @@ const GroupMembers: React.FC = (props) => { const { groupMembers: owners, isFetching: isFetchingOwners } = useGroupMembers(groupId, GroupRoles.OWNER); const { groupMembers: admins, isFetching: isFetchingAdmins } = useGroupMembers(groupId, GroupRoles.ADMIN); const { groupMembers: users, isFetching: isFetchingUsers, fetchNextPage, hasNextPage } = useGroupMembers(groupId, GroupRoles.USER); - const { accounts: pending, isFetching: isFetchingPending } = useGroupMembershipRequests(groupId); + const { accounts: pending, isFetching: isFetchingPending, totalCount: pendingTotalCount } = useGroupMembershipRequests(groupId); const isLoading = isFetchingGroup || isFetchingOwners || isFetchingAdmins || isFetchingUsers || isFetchingPending; @@ -35,6 +35,9 @@ const GroupMembers: React.FC = (props) => { ...users, ], [owners, admins, users]); + // If the API gives us `X-Total-Count`, use it. Otherwise fallback to the number in the store. + const pendingCount = typeof pendingTotalCount === 'number' ? pendingTotalCount : pending.length; + return ( <> = (props) => { placeholderCount={3} className='divide-y divide-solid divide-gray-200 dark:divide-gray-800' itemClassName='py-3 last:pb-0' - prepend={(pending.length > 0) && ( + prepend={(pendingCount > 0) && (
- +
)} >