I am try to implement a chat feature, I am implementing it with a lazyVStack inside a scrollView where the most current message is at the bottom and the user scrolls up to get older messages (standard chat behavior). Everything works as expected, however when the I scroll to the top and fetch more messages I get a jarring affect where all new messages are displayed and I then need to scroll back down to the last message before the fetch occurred. It is a poor UX experience, everything I see online says you just need to scroll back which I don’t understand because I don’t see this behavior in any apps I use.

When messages are fetched I am inserting them into my array at index 0. If I reverse this were I scroll down to see old messages (and append them as they are fetched) everything works smoothly.

My desired behavior would be for my last message to be pushed slightly down on the load of more messages and the user then is able to continue scrolling up. Similar to an iMessage UX. Any links to example code would would be greatly appreciated.

I have tried different animations both inserting new data and on the scroll, I have adjusted how many messages are fetched. Some combinations create a better experience than others but nothing is great.