feat(ParticipantsTab) - virtual scrolling for participants list

src/components/AvatarWrapper/AvatarWrapper.vue

@@ -37,6 +37,7 @@
 			{{ firstLetterOfGuestName }}
 		</div>
 		<NcAvatar v-else
+			:key="id"
 			:user="id"
 			:display-name="name"
 			:menu-container="menuContainerWithFallback"

src/components/RightSidebar/Participants/ParticipantsList/Participant/Participant.vue

@@ -20,7 +20,8 @@
 -->
 
 <template>
-	<li :data-nav-id="`${participant.source}_${participant.id}`"
+	<component :is="tag"
+		:data-nav-id="participantNavigationId"
 		class="participant-row"
 		:class="{
 			'offline': isOffline,
@@ -201,7 +202,7 @@
 			@close="hidePermissionsEditor" />
 		<!-- Checkmark in case the current participant is selected -->
 		<div v-if="isSelected" class="icon-checkmark participant-row__utils utils__checkmark" />
-	</li>
+	</component>
 </template>
 
 <script>
@@ -275,6 +276,11 @@ export default {
 	],
 
 	props: {
+		tag: {
+			type: String,
+			default: 'li',
+		},
+
 		participant: {
 			type: Object,
 			required: true,
@@ -320,6 +326,14 @@ export default {
 			return this.$store.getters.getMainContainerSelector()
 		},
 
+		participantNavigationId() {
+			if (this.participant.actorType && this.participant.actorId) {
+				return this.participant.actorType + '_' + this.participant.actorId
+			} else {
+				return this.participant.source + '_' + this.participant.id
+			}
+		},
+
 		participantSettingsAriaLabel() {
 			return t('spreed', 'Settings for participant "{user}"', { user: this.computedName })
 		},

src/components/RightSidebar/Participants/ParticipantsList/ParticipantsList.vue

@@ -20,17 +20,15 @@
 -->
 
 <template>
-	<div>
-		<ul>
-			<Participant v-for="item in items"
-				:key="generateKey(item)"
-				:participant="item"
-				:is-selectable="participantsSelectable"
-				:show-user-status="showUserStatus"
-				@click-participant="handleClickParticipant" />
-		</ul>
+	<ul>
+		<Participant v-for="item in items"
+			:key="generateKey(item)"
+			:participant="item"
+			:is-selectable="participantsSelectable"
+			:show-user-status="showUserStatus"
+			@click-participant="handleClickParticipant" />
 		<LoadingPlaceholder v-if="loading" type="participants" :count="dummyParticipants" />
-	</div>
+	</ul>
 </template>
 
 <script>

src/components/RightSidebar/Participants/ParticipantsList/ParticipantsListVirtual.vue

@@ -0,0 +1,82 @@
+<!--
+  - @copyright Copyright (c) 2023 Maksim Sukharev <antreesy.web@gmail.com>
+  -
+  - @author Grigorii Shartsev <me@shgk.me>
+  -
+  - @license AGPL-3.0-or-later
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -->
+
+<template>
+	<RecycleScroller ref="scroller"
+		list-tag="ul"
+		item-tag="li"
+		:items="participants"
+		:item-size="PARTICIPANT_ITEM_SIZE"
+		key-field="attendeeId">
+		<template #default="{ item }">
+			<Participant :participant="item" tag="div" />
+		</template>
+		<template v-if="loading" #after>
+			<LoadingPlaceholder type="participants" :count="dummyParticipants" />
+		</template>
+	</RecycleScroller>
+</template>
+
+<script>
+import { RecycleScroller } from 'vue-virtual-scroller'
+
+import LoadingPlaceholder from '../../../LoadingPlaceholder.vue'
+import Participant from './Participant/Participant.vue'
+
+import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
+
+const PARTICIPANT_ITEM_SIZE = 64
+
+export default {
+	name: 'ParticipantsListVirtual',
+
+	components: {
+		LoadingPlaceholder,
+		Participant,
+		RecycleScroller,
+	},
+
+	props: {
+		participants: {
+			type: Array,
+			required: true,
+		},
+
+		loading: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	setup() {
+		return {
+			PARTICIPANT_ITEM_SIZE,
+		}
+	},
+
+	computed: {
+		dummyParticipants() {
+			const dummies = 6 - this.participants.length
+			return dummies > 0 ? dummies : 0
+		},
+	},
+}
+</script>

src/components/RightSidebar/Participants/ParticipantsTab.vue

@@ -20,19 +20,19 @@
 -->
 
 <template>
-	<div>
+	<div class="wrapper">
 		<SearchBox v-if="canSearch"
 			:value.sync="searchText"
 			:is-focused.sync="isFocused"
 			:placeholder-text="searchBoxPlaceholder"
 			@input="handleInput"
 			@abort-search="abortSearch" />
 
-		<ParticipantsList v-if="!isSearching"
-			:items="participants"
+		<ParticipantsListVirtual v-if="!isSearching"
+			:participants="participants"
 			:loading="!participantsInitialised" />
 
-		<template v-else>
+		<div v-else class="scroller">
 			<NcAppNavigationCaption v-if="canAdd" :title="t('spreed', 'Participants')" />
 
 			<ParticipantsList v-if="filteredParticipants.length"
@@ -46,7 +46,7 @@
 				:no-results="noResults"
 				:search-text="searchText"
 				@click="addParticipants" />
-		</template>
+		</div>
 	</div>
 </template>
 
@@ -62,6 +62,7 @@ import NcAppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigati
 import Hint from '../../Hint.vue'
 import SearchBox from '../../LeftSidebar/SearchBox/SearchBox.vue'
 import ParticipantsList from './ParticipantsList/ParticipantsList.vue'
+import ParticipantsListVirtual from './ParticipantsList/ParticipantsListVirtual.vue'
 import ParticipantsSearchResults from './ParticipantsSearchResults/ParticipantsSearchResults.vue'
 
 import { useSortParticipants } from '../../../composables/useSortParticipants.js'
@@ -75,6 +76,7 @@ import CancelableRequest from '../../../utils/cancelableRequest.js'
 export default {
 	name: 'ParticipantsTab',
 	components: {
+		ParticipantsListVirtual,
 		ParticipantsList,
 		Hint,
 		NcAppNavigationCaption,
@@ -264,6 +266,15 @@ export default {
 </script>
 
 <style scoped>
+.wrapper {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+
+.scroller {
+	overflow-y: auto;
+}
 
 /** TODO: fix these in the nextcloud-vue library **/