Display pending counter in group member list

app/soapbox/features/group/group-members.tsx

@@ -1,8 +1,9 @@
 import React, { useMemo } from 'react';
 
 import ScrollableList from 'soapbox/components/scrollable-list';
+import { useGroup } from 'soapbox/hooks';
+import { useGroupMembershipRequests } from 'soapbox/hooks/api/groups/useGroupMembershipRequests';
 import { useGroupMembers } from 'soapbox/hooks/api/useGroupMembers';
-import { useGroup } from 'soapbox/queries/groups';
 import { GroupRoles } from 'soapbox/schemas/group-member';
 
 import PlaceholderAccount from '../placeholder/components/placeholder-account';
@@ -22,8 +23,9 @@ const GroupMembers: React.FC<IGroupMembers> = (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 { entities: pending, isFetching: isFetchingPending } = useGroupMembershipRequests(groupId);
 
-  const isLoading = isFetchingGroup || isFetchingOwners || isFetchingAdmins || isFetchingUsers;
+  const isLoading = isFetchingGroup || isFetchingOwners || isFetchingAdmins || isFetchingUsers || isFetchingPending;
 
   const members = useMemo(() => [
     ...owners,
@@ -44,6 +46,9 @@ const GroupMembers: React.FC<IGroupMembers> = (props) => {
         className='divide-y divide-solid divide-gray-300'
         itemClassName='py-3 last:pb-0'
       >
+        {(pending.length > 0) && (
+          <div>{pending.length} pending members</div>
+        )}
         {members.map((member) => (
           <GroupMemberListItem
             group={group as Group}