From 430e638f62611961ae8a20342bd8284ebc124c04 Mon Sep 17 00:00:00 2001 From: lebaudantoine Date: Tue, 14 Jul 2026 19:13:32 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F(frontend)=20narrow=20Partici?= =?UTF-8?q?pantToggle=20event=20subscriptions?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Reduce the set of events the ParticipantToggle subscribes to, so it does not re-render on every LocalParticipant event but only on the ones that actually affect its rendering. --- .../controls/Participants/ParticipantsToggle.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx index 1ac9f87e..8e205f90 100644 --- a/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx +++ b/src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsToggle.tsx @@ -3,10 +3,11 @@ import { RiGroupLine, RiInfinityLine } from '@remixicon/react' import { ToggleButton } from '@/primitives' import { VisualOnlyTooltip } from '@/primitives/VisualOnlyTooltip' import { css } from '@/styled-system/css' -import { useParticipants } from '@livekit/components-react' +import { useRemoteParticipants } from '@livekit/components-react' import { useSidePanel } from '../../../hooks/useSidePanel' import { ToggleButtonProps } from '@/primitives/ToggleButton' import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut' +import { RoomEvent } from 'livekit-client' export const ParticipantsToggle = ({ onPress, @@ -19,8 +20,13 @@ export const ParticipantsToggle = ({ * The 'numParticipant' property on the room only updates when the room's metadata changes, * resulting in a delay compared to the participant list's actual refresh rate. */ - const participants = useParticipants() - const numParticipants = participants?.length + const remoteParticipants = useRemoteParticipants({ + updateOnlyOn: [ + RoomEvent.ParticipantConnected, + RoomEvent.ParticipantDisconnected, + ], + }) + const numParticipants = remoteParticipants?.length + 1 // for the local participant const announcedCount = numParticipants && numParticipants > 0 ? numParticipants : 1