feat: add virtual scroll to member list

[AIlkiv]

My proposed solution:

1. Makes the list more compact.
2. Fewer requests to server.
3. The user's browser works normally, even with 1000+ members.

Demo:

contacts.mp4

[AIlkiv]

@nfebe
I would be very grateful for a review.

[codecov]

Codecov Report

❌ Patch coverage is 0% with 34 lines in your changes missing coverage. Please review.
✅ Project coverage is 1.89%. Comparing base (0af386b) to head (2ca5cf7).

Files with missing lines	Patch %	Lines
src/components/MemberList/MemberList.vue	0.00%	30 Missing ⚠️
src/store/circles.js	0.00%	2 Missing and 1 partial ⚠️
src/components/CircleDetails.vue	0.00%	1 Missing ⚠️

❗ There is a different number of reports uploaded between BASE (0af386b) and HEAD (2ca5cf7). Click for more details.

HEAD has 1 upload less than BASE

Flag	BASE (0af386b)	HEAD (2ca5cf7)
	2	1

Additional details and impacted files

@@            Coverage Diff             @@
##              main   #4625      +/-   ##
==========================================
- Coverage     9.86%   1.89%   -7.98%     
==========================================
  Files          124      98      -26     
  Lines         6173    5437     -736     
  Branches      1423    1433      +10     
==========================================
- Hits           609     103     -506     
+ Misses        5441    5210     -231     
- Partials       123     124       +1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[nfebe]

Nice! I like that it doesn't appear when the aren't that many members.

[st3iny]

Let's wait for #4581 please.

[st3iny]

Done, conflicts need to be addressed though.

[github-actions]

Hello there,
Thank you so much for taking the time and effort to create a pull request to our Nextcloud project.

We hope that the review process is going smooth and is helpful for you. We want to ensure your pull request is reviewed to your satisfaction. If you have a moment, our community management team would very much appreciate your feedback on your experience with this PR review process.

Your feedback is valuable to us as we continuously strive to improve our community developer experience. Please take a moment to complete our short survey by clicking on the following link: https://cloud.nextcloud.com/apps/forms/s/i9Ago4EQRZ7TWxjfmeEpPkf6

Thank you for contributing to Nextcloud and we hope to hear from you soon!

(If you believe you should not receive this message, you can add yourself to the blocklist.)

[st3iny]

Looks good so far. Thank you for the PR.

Please use the virtual scroller package virtua we already include to prevent adding another dependency.

Here is a usage example from the Contacts code:

contacts/src/components/ContactsList.vue

Lines 67 to 76 in 416d03f

	<VList v-slot="{ item, index }"
	ref="scroller"
	class="contacts-list"
	:data="filteredList">
	<ContactsListItem :key="item.key"
	:index="index"
	:source="item"
	:reload-bus="reloadBus"
	:on-select-multiple-from-parent="onSelectMultiple" />
	</VList>

Here is some more documentation: https://github.com/inokawa/virtua#vue

[AIlkiv]

@st3iny

I looked into the issue more deeply. With groups of over 1,000, there is a noticeable delay in receiving data.

Therefore, I suggest limiting the number of participants to a maximum of 200. If the team is larger, we will not display participants with an empty search.

What do you think?

PR in circles: nextcloud/circles#2112

[st3iny]

@AIlkiv That makes sense. If the fetching is becoming the bottleneck instead of the rendering.