Add partial message rendering

[galfert]

Closes #92

This displays only the last 30 messages when opening a channel to improve the rendering speed. More messages are then displayed when scrolling up to the top of the page.

When the user starts scrolling, automatic scrolling to the bottom on new messages is disabled. It's re-enabled when the user scrolls to the bottom again or when switching channels.

[raucao]

Same as for the linked issue: I don't think this is pagination, because there aren't any pages. I think the more apt term is "partial rendering" or something along those lines.

[galfert]

I replaced the onscroll event handler with another intersection observer.

I also added a variable to control the position of the observed message, so additional messages are rendered earlier when scrolling up, improving the jumping.

Lastly I renamed the variables, properties and methods to remove any references to "pagination".

[raucao]

Great! This works much better already. :clap:

One bug that I immediately saw is that when you open a channel with a lot of messages now, the scroll position is not the bottom by default anymore. You can try this by opening e.g. #indieweb on freenode today.

[galfert]

I fixed the problem with the scroll position not being set to the bottom on heavy traffic channels.

I also found a better and much simpler solution for when to trigger rendering of additional messages. Instead of using the observedMessageOffset variable to configure which message to observe, it's now observing the upmost message again. But the IntersectionObserver is now configured with a different rootMargin. This config defines a margin around the observed element, that will trigger the intersecting already before the element itself comes into view.

Right now it's configured to be 25% of the height of the channel container.

[galfert]

@skddc did you have a chance to look at my latest changes yet?

[galfert]

@gregkare @silverbucket care to take a look as well?

[gregkare]

I have tried it, I had an issue with the logs for the #mastodon channel on Freenode. After clicking on "Load previous messages" to get more messages a couple times it stopped loading more halfway through 5/17/2019

TypeError: this.partialRenderingObserver is null

However after reloading the app I can't reproduce the problem again and everything works

[raucao]

Found a new round of bugs/issues (testing with the IndieWeb channel again):

1. The threshold is now so low/small, that the loading happens only when reaching the very end of the messages. And initially it doesn't load very many messages, so it's awkward when it happens immediately upon scrolling up just a little bit.
2. After scrolling up, and then clicking load-more, it jumped back down to the last message.
3. After loading the user list and/or title, the last message jumped slightly out of frame, so that the scoll position wasn't at the very bottom anymore. This one should likely be solved outside of this PR.

[galfert]

Replaced by #167.