In this case, this can be achieved with the lazy loading of the message during scroll similar to how it is done in most of the top messaging apps like Facebook Messanger, MS Teams etc.
We have a task logged for providing a method that will help with the scroll position as currently if we load more messages the scroll position will not move:
Currently, a possible approach will be to keep in the state which was the last message (as a text), then go over all messages and programmatically scroll to that message using the scrollToView method:https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewhttps://stackblitz.com/edit/react-conv-ui-scroll-738fhc?file=index.html
We understand that the current approach is not ideal, this is why we logged the task, but it could be useful until the official method is ready.
Virtualization is not recommended for messages. The virtualization relies on elements with fixed height, which is not possible with the messages as they can be with very dynamic height. This is why even the top messaging applications use lazy loading instead of virtualization.
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.