MM-14196 Add virtualised list for posts

[sudheerDev]

Summary

Known issues

• P1: First team switch does not reliably work because of channel sync issue.
• slow network fast posting causes scroll pops upwards
• text box expansion should not overlap post list content
• compact view last post jumping (due to hover menu)

QA testing cases

Performance with lots of data:

• busy channel with many incoming posts - verify no white space when scrolling or sitting at the bottom of the channel
• Scroll near the top of a channel with 5000+ messages and then try to switch channels. Examine perf
• Post a message when scrolled near the top of a channel with 5000+ messages
• Click "new messages below" indicator at the top of a channel with lots of posts.

Worst case scenarios:

• Editing posts and adding reactions to most recent post and posts up in the channel. Verify no flickering or scroll pop
• Channels with images, message attchements, webhook message attachments, markdown, link previews and youtube previews, long posts. Verify no pop during post, scrolling or refresh

Scrolling smoothness:

• Scroll quickly in one direction then quickly switch scrolling direction.
• Permalinks to posts in channels that aren't loaded yet
• test various browsers
• various network speeds

Misc:

• Permalinks
• Jump to message from search
• channel and team switching. Compare to community

---

Completed:

• Link preview and SVG can throw off scroll correction a little. That will be addressed with MM-13099 Use size_aware_image component for when loading images in posts #2334 and MM-14500 Fix for pop caused by size_aware_image #2469
• youtube previews cause LARGE pop
• removing posts can cause blank space at the top of the channel
• channel header missing on channels with few posts
• In progress: Fix issue of flicker when a a new reaction is added (Does not happen always most likely related to the way style cache is busted).
• scroll channel down to bottom when current user make a new post
• Permalink view should move post to middle of screen and highlight
• Remove padding below channel header
• logic tweak for bottom of the channel so we never see unmounted posts (now shows 10 max)
• Fix jumping to permalink when posts are not loaded yet
• Scroll to bottom when adding reaction or editing most recent post
• Youtube previews causing minor incorrect scroll correction
• Don't scroll center channel to bottom when posting in the RHS
• Loader can get stuck at the top of the screen if we can repro
• minor scroll bar adjustment when entering the channel on subsequent visits
• increase number of posts to 100 (in scrolling direction)- 50 (in opposite direction)
• increase load threshold to 1000px
• consecutive posts are being separated in center channel
• stop loading two pages on first load (only load 30 posts)
• deleting system messages leaves blank space
• fix overlapping issue when making every alternate posts in a channel that has a lot of posts loaded
• Manual loadtest of posts to verify this issue os only related to the /test command: Fix loading indicator stuck and showing blank posts above (see image below)

---

Ticket Link

MM-14196

Checklist

[Place an '[x]' (no spaces) in all applicable fields. Please remove unrelated fields.]

• Ran make check-style to check for style errors (required for all pull requests)
• Ran make test to ensure unit and component tests passed
• Added or updated unit tests (required for all new features)
• Has UI changes
• Touches critical sections of the codebase (auth, posting, etc.)

[esethna]

Thanks Sudheer, this is looking really good. Some things I noticed:

1. White bar at the top:

2. Some channels are infinitely stuck in the loading more posts state (try in "autem" and "doloremque"):
   

Edit: actually all channels seem to be doing this at some point far enough back in the channel

3. The above ^ makes it a bit hard to test but I feel like we are loading much too early. Notice how the scroll bar starts to shrink almost immediately as I scroll up:

As far as I know the rules we put in place last time involved loading more posts at X% from the top. If you test Slack it has a much nicer feel because they seem to only load when you are almost at the top of the loaded posts (however I would say that they are loading a bit later than I would like us to do).

4. I did not notice any unmounted posts (white space). Is the virtualized post list active or is it just done well so I'm not noticing it?

[esethna]

Added new to do list items to PR description ^

[esethna]

Updated PR description with new P1 to dos before QA testing (discussed with ST in daily standup)

[sudheerDev]

@esethna @DHaussermann @ogi-m
P1 (before merging to master - needs new spinmint):

• Fix regression with jumpiness on loading new posts - Done
• Fix permalink view + jumping to post from search - Done

P2 (after merging to master):

• Investigate lag on safari - Partially done but we can improve this
• Small delay on clicking New Messages below bubble (1 second) - Done
• MM-14196 Add virtualised list for posts #2447 (comment) - Done
• MM-14196 Add virtualised list for posts #2447 (comment) - Done
• MM-14196 Add virtualised list for posts #2447 (comment) - Done

[saturninoabril]

This is great 💯

[esethna]

@amyblais removing the docs needed label. In my mind infinite scroll/virtualized post list is expected functionality from a users perspective, rather than something that needs to be called out in docs. Feel free to re-add if you think there's something we should cover specifically.