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()}.
+
+
+ )}
+
+ )}
);