chore: Virtualize rendering of conversations (WPB-15154)

[thisisamir98]

WPB-15154 [Web] Improve loading of conversation list by only loading what is visible in viewport

Description

This pull request introduces virtualized rendering for the conversations list in the left sidebar of the application, leveraging the @tanstack/react-virtual library. The change optimizes the rendering of large conversation lists by only rendering items visible within the viewport, significantly improving performance and resource efficiency.

Changes

1. Integration of @tanstack/react-virtual

• Added @tanstack/react-virtual to the project dependencies.
• Utilized the useVirtualizer hook to manage virtualized rendering of the conversations list.

2. Updated ConversationsList Component

• Implemented a virtualized list rendering pattern to dynamically calculate and render only the visible items.
• Added a ref for the scrollable container to support virtualization.
• Updated the component structure and styling to accommodate the virtualized rendering logic.

Benefits

1. Performance Improvements

• Reduced Memory Usage: Only renders visible items, significantly lowering DOM node count.
• Enhanced Scrolling Performance: Eliminates lag during scrolling, even with large data sets.

2. Improved User Experience

• Faster Initial Rendering: Users experience quicker load times for the conversations list.
• Smooth Scrolling: Ensures seamless navigation through extensive chat histories.

3. Scalability

• Handles larger data sets efficiently, making the application more robust for users with extensive chat activity.

Rendering:

• Limited number of conversations mounted to dom
• Re-rendering limited amount of conversations on scroll

Screen.Recording.2024-12-18.at.8.00.02.PM.mov

Below numbers are measured on a Apple Macbook 2020 with M1 CPU

Memory:

• Without virtualization heap size is about 30 megabytes more
• Without virtualization on scroll heap size rises about 300 megabytes, with virtualization only 30 megabytes

Screen.Recording.2024-12-19.at.1.40.00.PM.mov

Frame rate & GPU usage without virtualization

Screen.Recording.2024-12-19.at.1.51.59.PM.mov

Frame rate & GPU usage with virtualization

Screen.Recording.2024-12-19.at.1.53.10.PM.mov

Measured performance when scrolling without virtualization

Measured performance when scrolling with virtualization

[sonarqubecloud]

Quality Gate passed

Issues
8 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud