GetStream
bug: Chat Component Re-renders and Causes Layout Shifts on Small Screens
When opening the chat on smartphones, after the component is mounted, a re-render occurs, causing the message list to jump to the middle of the conversation. This results in an unpleasant lag or jump, affecting the user experience.
To Reproduce
Steps to reproduce the behavior:
- Open the chat on a smartphone.
- Wait for the component to mount.
- Ensure there are many messages in the conversation.
- Observe the message list jumping to the middle of the conversation after re-rendering.
- Feel the slight lag or visual jump.
Expected behavior The message list should remain at the last message without shifting or jumping after the component is mounted and re-rendered.
Component Mounts:
After 1 second:
Package version "stream-chat": "^8.47.1", "stream-chat-react": "^12.8.1",
Smartphone (please complete the following information): Device: iPhone 15 Pro OS: iOS (latest version) Browser: Chrome, Safari (latest versions)
The issue occurs specifically on smartphones, with recent versions of Chrome and Safari browsers. After the chat component mounts, the message list jumps to the middle of the conversation, creating an unpleasant feeling of lag or stuttering.
Hey, @lildinozzz, could you please specify which message list component you're using? Our SDK allows our integrators to choose between VirtualizedMessageList and MessageList.
Hey, @lildinozzz, could you please specify which message list component you're using? Our SDK allows our integrators to choose between
VirtualizedMessageListandMessageList.
MessageList
Hey @lildinozzz , I tried to reproduce the issue with iPhone 15 Pro with app in examples/vite and was unsuccessful. Are there any customizations you have done to the application?
Could you please try to recreate any relevant customizations in a forked sandbox?
