Description
In ChatWindow.jsx, all retrieved messages in the active conversation are rendered directly into the DOM. For users with large chat histories, this leads to significant DOM size, slow re-renders, and scroll performance degradation.
Impact
UI lag, high memory consumption, and potential browser crashes on low-end devices during long scroll operations.
Proposed Fix
- Integrate a virtual list implementation (like
react-window or standard intersection observers) to only mount the visible portion of the message list in the DOM.
- Optimize scrolling rendering cycle to prevent layout shifts.
Description
In
ChatWindow.jsx, all retrieved messages in the active conversation are rendered directly into the DOM. For users with large chat histories, this leads to significant DOM size, slow re-renders, and scroll performance degradation.Impact
UI lag, high memory consumption, and potential browser crashes on low-end devices during long scroll operations.
Proposed Fix
react-windowor standard intersection observers) to only mount the visible portion of the message list in the DOM.