[CIS-2084] Fix message list jumps by removing the inverted table view

[nuno-vieira]

🔗 Issue Links

CIS-2084
#2094

🎯 Goal

Fx the jumping issues we currently have with the inverted table view solution.

📝 Summary

The inverted table view is the root cause of the jumps. Since our message list cells have unpredictable heights, especially because they can be totally customizable, the table view can't properly calculate the new content size of the table when new messages are being inserted. The jumps are basically caused by this, and when the message is not inverted, this is not a problem, because the table view grows to the bottom of the screen.

This solution tries to remove the need for inverting the table view by:

• If we were previously at the bottom of the message list, and a new message is inserted, keep the message list at the bottom by scrolling to the newest message always
• When loading the initial messages, we also make sure it starts at the bottom, by scrolling to the bottom.
• When loading previous messages, prepend the messages at the top and adjust the scroll content offset.

This implementation requires some UX changes:

• The loading of the previous messages is not prefetched anymore, and we show a loading spinner at the top. This is how iMessage, Instagram and FB Messenger are doing it as well. The reason is that without this, the scrolling would stop weirdly because we need to adjust the content offset of the table view when prepending new items.
• When opening a message list with few messages, they stick to the top instead of the bottom like it was before. This is also how the other major apps are doing it as well, so it doesn't seem like a problem.

Known Issues:

• When opening the message list, the start at the bottom is not yet very stable.
• Keyboard is not adjusting properly when it is open (Working on it at the moment)

Why it is draft:

• We are currently exploring another solution which is actually the one used by the SwiftUI SDK, and that is to keep everything like it is right now, and skip insertions at the bottom when the user is scrolled to the top. But this requires using a proper diffing algorithm, so until we check which is the best solution, we will keep this one in Draft.

🎨 Showcase

Loading Previous Messages	Few messages UX	Stick to the bottom
Simulator.Screen.Recording.-.iPhone.12.-.2022-08-02.at.18.56.08.mp4	Simulator.Screen.Recording.-.iPhone.12.-.2022-08-02.at.18.54.50.mp4	Simulator.Screen.Recording.-.iPhone.12.-.2022-08-02.at.18.54.06.mp4

🧪 Manual Testing Notes

Full regression is required

☑️ Contributor Checklist

• I have signed the Stream CLA (required)
• Changelog is updated with client-facing changes
• New code is covered by unit tests
• This change follows zero ⚠️ policy (required)
• Comparison screenshots added for visual changes
• Affected documentation updated (docusaurus, tutorial, CMS)

[nuno-vieira]

Closing the PR for now because the DifferenceKit solution is looking much better.