Home | Notifications | New Note | Local | Federated | Search | Logout

Note Detail

World Collider@hj@post.ebin.club (2026-09-28 22:36:35)
Single-Page Applications, i.e. webpages rendered with reactive framework such as Vue or React have one massive pain point in performance - rendering tremendous amount of elements. Unfortunately this exact situation is the spotlight of a social network and/or chat application such as Pleroma - it has to display a lot of posts in timelines and threads. To make matters worse - Mastodon API, which PleromaFE is using, doesn't paginate thread data https://docs.joinmastodon.org/methods/statuses/#context so if you're opening a very long thread, such as group DM thread or a "hellthread", there is a massive lag to the entire page, and in worst case - browser itself, because UI gets burdened with a task of rendering and displaying hundreds of posts at the same time. As an added bonus - doing anything reactive that touches these posts also induced extra lag.

Thankfully, solution exists - Virtual Scrolling, which boils down to a simple concept - "just render what's on screen (and stuff immideately outside of it)", and there's an existing solution for us - "vue-virtual-scrolling" npm module, we're even using it already for emoji picker. But uh-oh! Using it has several serious drawbacks, all because it does a lot of DOM reuse and doesn't care about items' state, this breaks a few things. 
- If you had media playing in an attachment and scrolled away from it - media suddenly stops playing.
- If you opened a reply form and scrolled away - it gets closed unceremoniously and doesn't even give a chance to save a draft.
- If you expanded conversation it gets forcibly collapsed, all of the mentioned cases now also apply to any posts in this expanded conversation.
That being said, the whole "expanded conversation" is another thing that "vue-virtual-scrolling" doesn't do - nested virtualizing. Yeah. In PleromaFE you can instantly expand a post to see its context right then and there - inside a timeline, no need to navigate to another page. This complicates things further because now we ne