From 9fb5646b1870f951f0373eefc774743f42596e64 Mon Sep 17 00:00:00 2001
From: Kostiantyn Miakshyn <molodchick@gmail.com>
Date: Wed, 22 Apr 2026 16:23:32 +0200
Subject: [PATCH 1/2] Perf: Optimize member list for collective with large
 number of members

Signed-off-by: Kostiantyn Miakshyn <molodchick@gmail.com>
---
 src/components/Member/CurrentMembers.vue      | 41 ++++++++++++++-----
 .../Page/LandingPageWidgets/MembersWidget.vue |  1 +
 src/stores/circles.js                         |  5 ++-
 src/views/CollectiveView.vue                  |  2 +-
 4 files changed, 35 insertions(+), 14 deletions(-)

diff --git a/src/components/Member/CurrentMembers.vue b/src/components/Member/CurrentMembers.vue
index 1de85b4056..dd196cd20d 100644
--- a/src/components/Member/CurrentMembers.vue
+++ b/src/components/Member/CurrentMembers.vue
@@ -8,17 +8,24 @@
 		<NcAppNavigationCaption
 			v-if="isSearching"
 			:name="t('collectives', 'Members')" />
-		<MemberItem
-			v-for="item in searchedMembers"
-			:key="item.singleId"
-			:circleId
-			:currentUserIsAdmin
-			:memberId="item.id"
-			:userId="item.userId"
-			:displayName="item.displayName"
-			:userType="circleMemberType(item)"
-			:level="item.level"
-			:isCurrentUser="isCurrentUser(item)" />
+		<RecycleScroller
+			v-if="searchedMembers.length > 0"
+			class="scroller"
+			:items="searchedMembers"
+			:itemSize="56"
+			keyField="singleId">
+			<template #default="{ item }">
+				<MemberItem
+					:circleId
+					:currentUserIsAdmin
+					:memberId="item.id"
+					:userId="item.userId"
+					:displayName="item.displayName"
+					:userType="circleMemberType(item)"
+					:level="item.level"
+					:isCurrentUser="isCurrentUser(item)" />
+			</template>
+		</RecycleScroller>
 		<MembersHint
 			v-if="isSearching && searchedMembers.length === 0"
 			:hint="t('collectives', 'No search results')" />
@@ -28,11 +35,14 @@
 <script>
 import { getCurrentUser } from '@nextcloud/auth'
 import { t } from '@nextcloud/l10n'
+import { RecycleScroller } from 'vue-virtual-scroller'
 import NcAppNavigationCaption from '@nextcloud/vue/components/NcAppNavigationCaption'
 import MemberItem from './MemberItem.vue'
 import MembersHint from './MembersHint.vue'
 import { circleMemberType } from '../../util/circles.ts'
 
+import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
+
 export default {
 	name: 'CurrentMembers',
 
@@ -40,6 +50,7 @@ export default {
 		MembersHint,
 		MemberItem,
 		NcAppNavigationCaption,
+		RecycleScroller,
 	},
 
 	props: {
@@ -117,3 +128,11 @@ export default {
 	},
 }
 </script>
+
+<style scoped lang="scss">
+.current-members {
+	.scroller {
+		height: 224px;
+	}
+}
+</style>
diff --git a/src/components/Page/LandingPageWidgets/MembersWidget.vue b/src/components/Page/LandingPageWidgets/MembersWidget.vue
index 37a9ae653a..d409768549 100644
--- a/src/components/Page/LandingPageWidgets/MembersWidget.vue
+++ b/src/components/Page/LandingPageWidgets/MembersWidget.vue
@@ -185,6 +185,7 @@ export default {
 	},
 
 	mounted() {
+		this.updateShowMembersCountDebounced()
 		window.addEventListener('resize', this.updateShowMembersCountDebounced)
 	},
 
diff --git a/src/stores/circles.js b/src/stores/circles.js
index 4ccad42ef5..f2852737a2 100644
--- a/src/stores/circles.js
+++ b/src/stores/circles.js
@@ -108,9 +108,10 @@ export const useCirclesStore = defineStore('circles', {
 		 * Get members of a team
 		 *
 		 * @param {string} circleId ID of the team
+		 * @param {number} limit Number of members to return
 		 */
-		async getCircleMembers(circleId) {
-			const response = await axios.get(generateOcsUrl(`apps/circles/circles/${circleId}/members?fullDetails=true`))
+		async getCircleMembers(circleId, limit = 0) {
+			const response = await axios.get(generateOcsUrl(`apps/circles/circles/${circleId}/members?fullDetails=true&limit=${limit}`))
 			this.circlesMembers[circleId] = response.data.ocs.data
 		},
 
diff --git a/src/views/CollectiveView.vue b/src/views/CollectiveView.vue
index 955d3bd445..b69e16f8ed 100644
--- a/src/views/CollectiveView.vue
+++ b/src/views/CollectiveView.vue
@@ -221,7 +221,7 @@ export default {
 					promises.push(this.getTemplates(setLoading))
 				}
 				if (!this.isPublic) {
-					promises.push(this.getCircleMembers(this.currentCollective.circleId))
+					promises.push(this.getCircleMembers(this.currentCollective.circleId, 15))
 				}
 			}
 

From e9c6e384d25c4fb4b3d519a9537530ad7879625d Mon Sep 17 00:00:00 2001
From: Kostiantyn Miakshyn <molodchick@gmail.com>
Date: Mon, 4 May 2026 17:29:49 +0200
Subject: [PATCH 2/2] Perf: Optimize member list for collective with large
 number of members (code review changes)

Signed-off-by: Kostiantyn Miakshyn <molodchick@gmail.com>
---
 src/components/Member/CurrentMembers.vue | 2 +-
 src/stores/circles.js                    | 5 ++---
 src/views/CollectiveView.vue             | 2 +-
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/Member/CurrentMembers.vue b/src/components/Member/CurrentMembers.vue
index dd196cd20d..2274a4f3c6 100644
--- a/src/components/Member/CurrentMembers.vue
+++ b/src/components/Member/CurrentMembers.vue
@@ -132,7 +132,7 @@ export default {
 <style scoped lang="scss">
 .current-members {
 	.scroller {
-		height: 224px;
+		max-height: 370px;
 	}
 }
 </style>
diff --git a/src/stores/circles.js b/src/stores/circles.js
index f2852737a2..4ccad42ef5 100644
--- a/src/stores/circles.js
+++ b/src/stores/circles.js
@@ -108,10 +108,9 @@ export const useCirclesStore = defineStore('circles', {
 		 * Get members of a team
 		 *
 		 * @param {string} circleId ID of the team
-		 * @param {number} limit Number of members to return
 		 */
-		async getCircleMembers(circleId, limit = 0) {
-			const response = await axios.get(generateOcsUrl(`apps/circles/circles/${circleId}/members?fullDetails=true&limit=${limit}`))
+		async getCircleMembers(circleId) {
+			const response = await axios.get(generateOcsUrl(`apps/circles/circles/${circleId}/members?fullDetails=true`))
 			this.circlesMembers[circleId] = response.data.ocs.data
 		},
 
diff --git a/src/views/CollectiveView.vue b/src/views/CollectiveView.vue
index b69e16f8ed..955d3bd445 100644
--- a/src/views/CollectiveView.vue
+++ b/src/views/CollectiveView.vue
@@ -221,7 +221,7 @@ export default {
 					promises.push(this.getTemplates(setLoading))
 				}
 				if (!this.isPublic) {
-					promises.push(this.getCircleMembers(this.currentCollective.circleId, 15))
+					promises.push(this.getCircleMembers(this.currentCollective.circleId))
 				}
 			}