fix(participants-pane): virtualize participant list for improved performance (#17011)

[ajinkyap9]

Summary

Fixes #17011

This PR implements list virtualization using react-window to solve the performance issue where unmounting 500+ components with useTranslation hook was causing 10+ second UI freezes.

Problem

As documented in the FIXME comment in the codebase:

It seems that useTranslation is not very scalable. Unmount 500 components that have the useTranslation hook is taking more than 10s. To workaround the issue we need to pass the texts as props. This is temporary and dirty solution!!!
One potential proper fix would be to use react-window component in order to lower the number of components mounted.

Solution

• Implement FixedSizeList from react-window with AutoSizer for dynamic sizing
• Only virtualize lists with 20+ participants (small lists render normally for simplicity)
• Reduces mounted components from 500+ to ~20-30 visible items at any time
• Eliminates the unmount performance issue entirely

Changes

File	Changes
MeetingParticipantItems.tsx	Added virtualized list rendering using react-window
MeetingParticipants.tsx	Added listContainer style for proper AutoSizer height; updated comments

Testing

• Small participant lists (<20) render without virtualization
• Large participant lists use virtualized rendering
• Context menu interactions work correctly
• Search filtering works with virtualized list

Notes

• react-window and react-virtualized-auto-sizer are already project dependencies
• Implementation follows the same pattern as CurrentVisitorsList.tsx which already uses virtualization
• Item height (56px) matches existing participant item styling

[jitsi-jenkins]

Hi, thanks for your contribution!
If you haven't already done so, could you please make sure you sign our CLA (https://jitsi.org/icla for individuals and https://jitsi.org/ccla for corporations)? We would unfortunately be unable to merge your patch unless we have that piece :(.

[Copilot]

Pull request overview

This PR targets the participants pane performance regression when closing/unmounting very large participant lists by introducing list virtualization (react-window) so far fewer row components are mounted at once.

Changes:

• Add a virtualized rendering path for large participant lists in MeetingParticipantItems using AutoSizer + FixedSizeList.
• Add a flex-based listContainer wrapper in MeetingParticipants to provide a stable height for virtualization and update the related inline comment.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File	Description
react/features/participants-pane/components/web/MeetingParticipants.tsx	Adds listContainer styling and wraps the list to support AutoSizer height; updates performance-related comment.
react/features/participants-pane/components/web/MeetingParticipantItems.tsx	Implements conditional virtualization for participant rows via react-window.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[ajinkyap9]

Hi @jitsi-jenkins , thank you for the reminder!

I have now signed the Individual CLA. Please let me know if there’s anything else needed from my side.
Looking forward to your feedback on the PR.