diff --git a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
index a96d3c03ed1..56f85102d7f 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessageButtonsBar/MessageButtonsBar.vue
@@ -289,8 +289,8 @@ import MessageForwarder from './MessageForwarder.vue'
 import { PARTICIPANT, CONVERSATION, ATTENDEE } from '../../../../../constants.js'
 import { getMessageReminder, removeMessageReminder, setMessageReminder } from '../../../../../services/remindersService.js'
 import { copyConversationLinkToClipboard } from '../../../../../services/urlService.js'
-import { useReactionsStore } from '../../../../../stores/reactions.js'
 import { useIntegrationsStore } from '../../../../../stores/integrations.js'
+import { useReactionsStore } from '../../../../../stores/reactions.js'
 
 const EmojiIndex = new EmojiIndexFactory(data)
 const supportReminders = getCapabilities()?.spreed?.features?.includes('remind-me-later')
diff --git a/src/components/RightSidebar/Participants/ParticipantsTab.vue b/src/components/RightSidebar/Participants/ParticipantsTab.vue
index acdece449ea..ad7a3338d73 100644
--- a/src/components/RightSidebar/Participants/ParticipantsTab.vue
+++ b/src/components/RightSidebar/Participants/ParticipantsTab.vue
@@ -66,6 +66,7 @@
 
 <script>
 import debounce from 'debounce'
+import { toRefs } from 'vue'
 
 import { getCapabilities } from '@nextcloud/capabilities'
 import { showError } from '@nextcloud/dialogs'
@@ -82,9 +83,9 @@ import Hint from '../../Hint.vue'
 import SearchBox from '../../LeftSidebar/SearchBox/SearchBox.vue'
 import SelectPhoneNumber from '../../SelectPhoneNumber.vue'
 
+import { useGetParticipants } from '../../../composables/useGetParticipants.js'
 import { useIsInCall } from '../../../composables/useIsInCall.js'
 import { useSortParticipants } from '../../../composables/useSortParticipants.js'
-import getParticipants from '../../../mixins/getParticipants.js'
 import { searchPossibleConversations } from '../../../services/conversationsService.js'
 import { EventBus } from '../../../services/EventBus.js'
 import { addParticipant } from '../../../services/participantsService.js'
@@ -108,9 +109,11 @@ export default {
 		SelectPhoneNumber,
 	},
 
-	mixins: [getParticipants],
-
 	props: {
+		isActive: {
+			type: Boolean,
+			required: true,
+		},
 		canSearch: {
 			type: Boolean,
 			required: true,
@@ -121,13 +124,16 @@ export default {
 		},
 	},
 
-	setup() {
+	setup(props) {
+		const { isActive } = toRefs(props)
 		const { sortParticipants } = useSortParticipants()
 		const isInCall = useIsInCall()
+		const { cancelableGetParticipants } = useGetParticipants(isActive, false)
 
 		return {
 			sortParticipants,
 			isInCall,
+			cancelableGetParticipants,
 		}
 	},
 
@@ -144,6 +150,10 @@ export default {
 	},
 
 	computed: {
+		participantsInitialised() {
+			return this.$store.getters.participantsInitialised(this.token)
+		},
+
 		participants() {
 			return this.$store.getters.participantsList(this.token).slice().sort(this.sortParticipants)
 		},
@@ -181,7 +191,7 @@ export default {
 			return this.searchText !== ''
 		},
 		noResults() {
-			return this.searchResults === []
+			return this.searchResults.length === 0
 		},
 	},
 
@@ -189,20 +199,11 @@ export default {
 		searchText(value) {
 			this.isFocused = !!value
 		},
-
-		isActive(value) {
-			if (value && this.pendingChanges) {
-				this.debounceUpdateParticipants()
-			}
-		}
 	},
 
 	beforeMount() {
 		EventBus.$on('route-change', this.abortSearch)
 		subscribe('user_status:status.updated', this.updateUserStatus)
-
-		// Initialises the get participants mixin
-		this.initialiseGetParticipantsMixin()
 	},
 
 	beforeDestroy() {
@@ -211,8 +212,6 @@ export default {
 
 		this.cancelSearchPossibleConversations()
 		this.cancelSearchPossibleConversations = null
-
-		this.stopGetParticipantsMixin()
 	},
 
 	methods: {
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index 04cf6938594..826ca0a4b54 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -164,8 +164,8 @@ import TopBarMenu from './TopBarMenu.vue'
 import BreakoutRoomsEditor from '../BreakoutRoomsEditor/BreakoutRoomsEditor.vue'
 import ConversationIcon from '../ConversationIcon.vue'
 
+import { useGetParticipants } from '../../composables/useGetParticipants.js'
 import { CONVERSATION } from '../../constants.js'
-import getParticipants from '../../mixins/getParticipants.js'
 import BrowserStorage from '../../services/BrowserStorage.js'
 import { getStatusMessage } from '../../utils/userStatus.js'
 import { localCallParticipantModel, localMediaModel } from '../../utils/webrtc/index.js'
@@ -194,10 +194,7 @@ export default {
 		MessageText,
 	},
 
-	mixins: [
-		richEditor,
-		getParticipants,
-	],
+	mixins: [richEditor],
 
 	props: {
 		isInCall: {
@@ -214,6 +211,10 @@ export default {
 		},
 	},
 
+	setup() {
+		useGetParticipants()
+	},
+
 	data: () => {
 		return {
 			unreadNotificationHandle: null,
@@ -344,18 +345,6 @@ export default {
 				this.notifyUnreadMessages(null)
 			}
 		},
-
-		isOneToOneConversation: {
-			immediate: true,
-			// Group conversations have mixin in RightSidebar, so should work only for one-to-one
-			handler(newValue) {
-				if (newValue) {
-					this.initialiseGetParticipantsMixin()
-				} else {
-					this.stopGetParticipantsMixin()
-				}
-			},
-		},
 	},
 
 	mounted() {
diff --git a/src/composables/useGetParticipants.js b/src/composables/useGetParticipants.js
new file mode 100644
index 00000000000..4bc3f64983a
--- /dev/null
+++ b/src/composables/useGetParticipants.js
@@ -0,0 +1,136 @@
+/**
+ * @copyright Copyright (c) 2024 Dorra Jaouad <dorra.jaoued1@gmail.com>
+ *
+ * @author Dorra Jaouad <dorra.jaoued1@gmail.com>
+ * @author Marco Ambrosini <marcoambrosini@icloud.com>
+ *
+ * @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/>.
+ *
+ */
+import debounce from 'debounce'
+import { ref, nextTick, computed, watch, onBeforeUnmount, onMounted } from 'vue'
+
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
+
+import { useIsInCall } from './useIsInCall.js'
+import { useStore } from './useStore.js'
+import { CONVERSATION } from '../constants.js'
+import { EventBus } from '../services/EventBus.js'
+
+/**
+ * @param {import('vue').Ref} isActive whether the participants tab is active
+ * @param {boolean} isTopBar whether the component is the top bar
+ */
+export function useGetParticipants(isActive = ref(true), isTopBar = true) {
+
+	// Encapsulation
+	const store = useStore()
+	const token = computed(() => store.getters.getToken())
+	const conversation = computed(() => store.getters.conversation(token.value))
+	const isInCall = useIsInCall()
+	const isOneToOneConversation = computed(() => conversation.value?.type === CONVERSATION.TYPE.ONE_TO_ONE)
+	let fetchingParticipants = false
+	let pendingChanges = true
+
+	/**
+	 * Initialise the get participants listeners
+	 *
+	 */
+	function initialiseGetParticipants() {
+		EventBus.$on('joined-conversation', onJoinedConversation)
+
+		// FIXME this works only temporary until signaling is fixed to be only on the calls
+		// Then we have to search for another solution. Maybe the room list which we update
+		// periodically gets a hash of all online sessions?
+		EventBus.$on('signaling-participant-list-changed', debounceUpdateParticipants)
+		subscribe('guest-promoted', onJoinedConversation)
+	}
+
+	/**
+	 * Stop the get participants listeners
+	 *
+	 */
+	function stopGetParticipants() {
+		EventBus.$off('joined-conversation', onJoinedConversation)
+		EventBus.$off('signaling-participant-list-changed', debounceUpdateParticipants)
+		unsubscribe('guest-promoted', onJoinedConversation)
+	}
+
+	const onJoinedConversation = () => {
+		if (isOneToOneConversation.value) {
+			cancelableGetParticipants()
+		} else {
+			nextTick(() => debounceUpdateParticipants())
+		}
+	}
+
+	const debounceUpdateParticipants = () => {
+		if (!isActive.value && !isInCall.value) {
+			// Update is ignored but there is a flag to force the participants update
+			pendingChanges = true
+			return
+		}
+
+		if (store.getters.windowIsVisible() && (isInCall.value || !conversation.value?.hasCall)) {
+			debounceFastUpdateParticipants()
+		} else {
+			debounceSlowUpdateParticipants()
+		}
+	    pendingChanges = false
+	}
+
+	const cancelableGetParticipants = async () => {
+		const isInLobby = store.getters.isInLobby
+		const isModeratorOrUser = store.getters.isModeratorOrUser
+		if (fetchingParticipants || token.value === '' || isInLobby || !isModeratorOrUser) {
+			return
+		}
+
+		fetchingParticipants = true
+		debounceFastUpdateParticipants.clear()
+		debounceSlowUpdateParticipants.clear()
+
+		await store.dispatch('fetchParticipants', { token: token.value })
+		fetchingParticipants = false
+	}
+
+	const debounceFastUpdateParticipants = debounce(
+		cancelableGetParticipants, 3000)
+	const debounceSlowUpdateParticipants = debounce(
+		cancelableGetParticipants, 15000)
+
+	onMounted(() => {
+		if (isTopBar) {
+			initialiseGetParticipants()
+		}
+	})
+
+	watch(isActive, (newValue) => {
+		if (newValue && pendingChanges) {
+			debounceUpdateParticipants()
+		}
+	})
+
+	onBeforeUnmount(() => {
+		if (isTopBar) {
+			stopGetParticipants()
+		}
+	})
+
+	return {
+		cancelableGetParticipants,
+	}
+}
diff --git a/src/mixins/getParticipants.js b/src/mixins/getParticipants.js
deleted file mode 100644
index 63979d079d4..00000000000
--- a/src/mixins/getParticipants.js
+++ /dev/null
@@ -1,130 +0,0 @@
-/**
- * @copyright Copyright (c) 2019 Marco Ambrosini <marcoambrosini@icloud.com>
- *
- * @author Marco Ambrosini <marcoambrosini@icloud.com>
- *
- * @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/>.
- *
- */
-import debounce from 'debounce'
-
-import { subscribe, unsubscribe } from '@nextcloud/event-bus'
-
-import { EventBus } from '../services/EventBus.js'
-
-const getParticipants = {
-
-	data() {
-		return {
-			participantsInitialised: false,
-			fetchingParticipants: false,
-			pendingChanges: false,
-			debounceFastUpdateParticipants: null,
-			debounceSlowUpdateParticipants: null,
-		}
-	},
-
-	props: {
-		isActive: {
-			type: Boolean,
-			default: true,
-		},
-	},
-
-	created() {
-		this.debounceFastUpdateParticipants = debounce(function() {
-			this.cancelableGetParticipants()
-		}, 3000)
-
-		this.debounceSlowUpdateParticipants = debounce(function() {
-			this.cancelableGetParticipants()
-		}, 15000)
-	},
-
-	methods: {
-		initialiseGetParticipantsMixin() {
-			EventBus.$on('route-change', this.onRouteChange)
-			EventBus.$on('joined-conversation', this.onJoinedConversation)
-
-			// FIXME this works only temporary until signaling is fixed to be only on the calls
-			// Then we have to search for another solution. Maybe the room list which we update
-			// periodically gets a hash of all online sessions?
-			EventBus.$on('signaling-participant-list-changed', this.debounceUpdateParticipants)
-
-			subscribe('guest-promoted', this.onJoinedConversation)
-		},
-
-		stopGetParticipantsMixin() {
-			EventBus.$off('route-change', this.onRouteChange)
-			EventBus.$off('joined-conversation', this.onJoinedConversation)
-			EventBus.$off('signaling-participant-list-changed', this.debounceUpdateParticipants)
-
-			unsubscribe('guest-promoted', this.onJoinedConversation)
-		},
-
-		onRouteChange() {
-			// Reset participantsInitialised when there is only the current user in the participant list
-			this.participantsInitialised = this.$store.getters.participantsList(this.token).length > 1
-		},
-		/**
-		 * If the conversation has been joined, we get the participants
-		 */
-		onJoinedConversation() {
-			this.$nextTick(() => {
-				this.debounceUpdateParticipants()
-			})
-		},
-
-		debounceUpdateParticipants() {
-			if (!this.isActive && !this.isInCall) {
-				// Update is ignored but there is a flag to force the participants update
-				this.pendingChanges = true
-				return
-			}
-
-			// this.conversation is provided by component, where mixin is used
-			if (this.$store.getters.windowIsVisible()
-				&& (this.isInCall || !this.conversation?.hasCall)) {
-				this.debounceFastUpdateParticipants()
-			} else {
-				this.debounceSlowUpdateParticipants()
-			}
-			this.pendingChanges = false
-		},
-
-		async cancelableGetParticipants() {
-			const isInLobby = this.$store.getters.isInLobby
-			const isModeratorOrUser = this.$store.getters.isModeratorOrUser
-			if (this.fetchingParticipants || this.token === '' || isInLobby || !isModeratorOrUser) {
-				return
-			}
-
-			this.fetchingParticipants = true
-
-			// Clear previously requested updates
-			this.debounceFastUpdateParticipants.clear()
-			this.debounceSlowUpdateParticipants.clear()
-
-			const response = await this.$store.dispatch('fetchParticipants', { token: this.token })
-			if (response) {
-				this.participantsInitialised = true
-			}
-			this.fetchingParticipants = false
-		},
-	},
-}
-
-export default getParticipants
diff --git a/src/store/conversationsStore.js b/src/store/conversationsStore.js
index efef245d91a..0c778772491 100644
--- a/src/store/conversationsStore.js
+++ b/src/store/conversationsStore.js
@@ -66,8 +66,8 @@ import {
 } from '../services/recordingService.js'
 import { talkBroadcastChannel } from '../services/talkBroadcastChannel.js'
 import { useChatExtrasStore } from '../stores/chatExtras.js'
-import { useTalkHashStore } from '../stores/talkHash.js'
 import { useReactionsStore } from '../stores/reactions.js'
+import { useTalkHashStore } from '../stores/talkHash.js'
 
 const DUMMY_CONVERSATION = {
 	token: '',
diff --git a/src/store/participantsStore.js b/src/store/participantsStore.js
index b8e22728ac8..178424777cd 100644
--- a/src/store/participantsStore.js
+++ b/src/store/participantsStore.js
@@ -85,6 +85,8 @@ const state = {
 	},
 	speaking: {
 	},
+	initialised: {
+	},
 	/**
 	 * Stores the cancel function returned by `cancelableFetchParticipants`,
 	 * which allows to cancel the previous request for participants
@@ -204,6 +206,19 @@ const getters = {
 		return null
 	},
 
+	/**
+	 * Gets the initialisation status of the participants for a conversation.
+	 * This is used to determine if the participants have been fetched for a
+	 * conversation or not.
+	 *
+	 * @param {object} state - the state object.
+	 * param {string} token - the conversation token.
+	 * @return {boolean} - The initialisation status of the participants.
+	 */
+	participantsInitialised: (state) => (token) => {
+		return state.initialised[token]
+	},
+
 	/**
 	 * Replaces the legacy getParticipant getter. Returns a callback function in which you can
 	 * pass in the token and attendeeId as arguments to get the participant object.
@@ -316,6 +331,10 @@ const mutations = {
 		}
 	},
 
+	setParticipantsInitialised(state, { token, initialised }) {
+		Vue.set(state.initialised, token, initialised)
+	},
+
 	setInCall(state, { token, sessionId, flags }) {
 		if (flags === PARTICIPANT.CALL_FLAG.DISCONNECTED) {
 			if (state.inCall[token] && state.inCall[token][sessionId]) {
@@ -507,6 +526,7 @@ const actions = {
 		const attendee = getters.findParticipant(token, participant)
 		if (!attendee) {
 			commit('addParticipant', { token, participant })
+			commit('setParticipantsInitialised', { token, initialised: false })
 		}
 	},
 
@@ -647,6 +667,9 @@ const actions = {
 				}
 			})
 
+			if (context.state.initialised[token] === false) {
+				context.commit('setParticipantsInitialised', { token, initialised: true })
+			}
 			// Discard current cancel function
 			context.commit('setCancelFetchParticipants', null)