Perf: Optimize member list on the landing page for collective with large number of members

src/components/Page/TextEditor.vue

@@ -37,6 +37,7 @@ import SkeletonLoading from '../SkeletonLoading.vue'
 import { useEditor } from '../../composables/useEditor.ts'
 import { useReader } from '../../composables/useReader.ts'
 import pageContentMixin from '../../mixins/pageContentMixin.js'
+import { useCirclesStore } from '../../stores/circles.js'
 import { useCollectivesStore } from '../../stores/collectives.js'
 import { usePagesStore } from '../../stores/pages.js'
 import { useRootStore } from '../../stores/root.js'
@@ -121,9 +122,15 @@ export default {
 			this.initEditMode()
 		})
 
-		this.textEditWatcher = this.$watch('isTextEdit', (val) => {
+		this.textEditWatcher = this.$watch('isTextEdit', async (val) => {
 			if (val === false) {
 				this.stopEdit()
+			} else if (val === true) {
+				// Load full circle members for autocomplete when entering edit mode
+				const circlesStore = useCirclesStore()
+				if (!circlesStore.currentCircleMembersFullyLoaded && !this.isPublic && circlesStore.currentCircleMembers?.length > 0) {
+					await this.getCircleMembers(this.currentCollective.circleId)
+				}
 			}
 		})
 		subscribe('collectives:attachment:insert', this.insertAttachment)
@@ -144,6 +151,7 @@ export default {
 		...mapActions(useRootStore, ['load', 'done']),
 		...mapActions(useVersionsStore, ['getVersions']),
 		...mapActions(usePagesStore, ['setTextEdit', 'setTextPreview', 'touchPage']),
+		...mapActions(useCirclesStore, ['getCircleMembers']),
 
 		insertAttachment({ name }) {
 			// inspired by the fixedEncodeURIComponent function suggested in

src/stores/circles.js

@@ -18,6 +18,7 @@ export const useCirclesStore = defineStore('circles', {
 	state: () => ({
 		circles: useLocalStorage(STORE_PREFIX + 'circles', []),
 		circlesMembers: useLocalStorage(STORE_PREFIX + 'circlesMembers', {}),
+		circlesMembersFullyLoaded: {},
 	}),
 
 	getters: {
@@ -59,6 +60,12 @@ export const useCirclesStore = defineStore('circles', {
 			}
 			return users
 		},
+
+		currentCircleMembersFullyLoaded: (state) => {
+			const collectivesStore = useCollectivesStore()
+			const currentCircleId = collectivesStore.currentCollective?.circleId
+			return state.circlesMembersFullyLoaded[currentCircleId] || false
+		},
 	},
 
 	actions: {
@@ -108,10 +115,14 @@ export const useCirclesStore = defineStore('circles', {
 		 * Get members of a team
 		 *
 		 * @param {string} circleId ID of the team
+		 * @param {number} limit Limit of members to fetch, 0 for all members
 		 */
-		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
+			if (limit === 0) {
+				this.circlesMembersFullyLoaded[circleId] = true
+			}
 		},
 
 		/**

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))
 				}
 			}