diff --git a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx index 9973beee6c..692dc032b9 100644 --- a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx +++ b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx @@ -157,11 +157,17 @@ export const MembersListCard = (props: { const [showAggregateMembers, setShowAggregateMembers] = useState(false); - const { value: descendantMembers } = useAsync( - async () => - await getAllDesendantMembersForGroupEntity(groupEntity, catalogApi), - [catalogApi, groupEntity], - ); + const { loading: loadingDescendantMembers, value: descendantMembers } = + useAsync(async () => { + if (!showAggregateMembersToggle) { + return [] as UserEntity[]; + } + + return await getAllDesendantMembersForGroupEntity( + groupEntity, + catalogApi, + ); + }, [catalogApi, groupEntity]); const { loading, error, @@ -237,21 +243,25 @@ export const MembersListCard = (props: { Aggregated Members )} - - {members && members.length > 0 ? ( - members - .slice(pageSize * (page - 1), pageSize * page) - .map(member => ( - - )) - ) : ( - - - This group has no {memberDisplayTitle.toLocaleLowerCase()}. - - - )} - + {showAggregateMembers && loadingDescendantMembers ? ( + + ) : ( + + {members && members.length > 0 ? ( + members + .slice(pageSize * (page - 1), pageSize * page) + .map(member => ( + + )) + ) : ( + + + This group has no {memberDisplayTitle.toLocaleLowerCase()}. + + + )} + + )} );