search

GetStream / stream-chat-react

React Chat SDK ➜ Stream Chat 💬
https://getstream.io/chat/sdk/react/
Other
702 stars 273 forks source link

bug: VirtualizedMessageList re-renders all messages (on new message), cut playing videos, gifs etc #1955

Closed lr-mjaouen closed 1 year ago

lr-mjaouen commented 1 year ago

Describe the bug

A clear and concise description of what the bug is.

If you send a YouTube video for instance on the demo one, the only one using a VirtualizedMessageList (virtuoso?), https://getstream.io/chat/demos/livestream/ And if you send a new text message, the list is re-rendered, making videos gifs or any other integrationto be cut and mounted again. It's making the virtualized list difficult to use since on every messages all integrations will be stopped, rerendered etc (it really slows down the performances & the user experience).

To Reproduce

Steps to reproduce the behavior:

  1. Go to https://getstream.io/chat/demos/livestream/
  2. Send a new message with a youtube video
  3. Play the video in the chat
  4. Send a new classic text message
  5. Everything is rerendered, the youtube video is stopped & rerendered

Expected behavior

A clear and concise description of what you expected to happen. Don't re-render the list and existing messages just add the last one to the list without an extra mount. If possible keep the last current message mounted (just hidden when necessary) (like Slack does since a few months) in order to keep this message mounted even while (far) scrolling.

Screenshots image

If applicable, add screenshots to help explain your problem.

Package version "stream-chat": "^8.1.3", "stream-chat-react": "10.4.1",

Desktop (please complete the following information):

Additional context

(It's working ok for the MessageList component since it's not mounted again)

MartinCupela commented 1 year ago

@lr-mjaouen this limitation is known to us and is related to the virtuoso dependency. We do not have an ETA to tackle this problem so we keep this issue in our backlog.

lr-mjaouen commented 1 year ago

Ok thank you.

lr-mjaouen commented 1 year ago

@MartinCupela what is an ETA? Thank you.

MartinCupela commented 1 year ago

@lr-mjaouen we do not have ETA for this at the moment.

lr-mjaouen commented 1 year ago

estimated time of arrival

MartinCupela commented 1 year ago

This issues has been fixed by https://github.com/GetStream/stream-chat-react/pull/2067