Describe the bug
I'm having performance issues loading stream chat in Safari after migrating to v14 (migrated from v10, so I'm not sure which version introduced the issue). The page becomes very unresponsive when a MessageList is rendered and remains slow even after the component unmounts until the page is refreshed. This doesn't seem to happen in Chrome or Firefox.
To Reproduce
Steps to reproduce the behavior:
- Render a
MessageList inside a Channel in Safari
- Notice page having performance issues. In my case, I had a message list that had less than 25 messages. Two of them did have images, but the rest were very small, like 1 character messages just for testing/overflow/etc
Expected behavior
MessageList renders without impacting page performance in Safari
Package version
- stream-chat-react: 14.10.0
- stream-chat: 9.50.2
Desktop (please complete the following information):
- OS: macOS
- Browser Safari
- Version 16.6
Additional context
This seems specific to MessageList because commenting that out seemed to remove the performance issues. Replacing it with VirtualizedMessageList seems to work as an alternative.
AI seems to think InfiniteScrollPaginator is the cause due to a { passive: false } wheel event listener that may be contributing to Safari's rendering pipeline being blocked on scroll events. Not sure if that's the root cause, but sharing in case it's helpful.
Describe the bug
I'm having performance issues loading stream chat in Safari after migrating to v14 (migrated from v10, so I'm not sure which version introduced the issue). The page becomes very unresponsive when a
MessageListis rendered and remains slow even after the component unmounts until the page is refreshed. This doesn't seem to happen in Chrome or Firefox.To Reproduce
Steps to reproduce the behavior:
MessageListinside aChannelin SafariExpected behavior
MessageListrenders without impacting page performance in SafariPackage version
Desktop (please complete the following information):
Additional context
This seems specific to
MessageListbecause commenting that out seemed to remove the performance issues. Replacing it withVirtualizedMessageListseems to work as an alternative.AI seems to think
InfiniteScrollPaginatoris the cause due to a{ passive: false }wheel event listener that may be contributing to Safari's rendering pipeline being blocked on scroll events. Not sure if that's the root cause, but sharing in case it's helpful.