diff --git a/src/composables/useConversation.js b/src/composables/useConversation.js index 24d8bae53..e2aca729f 100644 --- a/src/composables/useConversation.js +++ b/src/composables/useConversation.js @@ -67,6 +67,36 @@ export function useConversation(statusId, expanded) { return [currentStatus.value] } + /* It took me a week or so to figure this out. + * + * Virtual scrolling can compensate for posts being prepended to content, + * and prepended posts changing height. The problem is that it has to happen + * in prepended (i.e. either above visible post and/or above screen boundary) + * + * Here's the problem: showing conversation from store can be broken. UI might + * already know that some posts belong to a conversation, because you were + * mentioned in it, but doesn't know the rest of it. It ends up displaying this + * "partial" conversation, and then the rest loads in. + * + * Problem is, this partial conversation can be very fragmented, with missing + * pieces appearing in-between posts. These pieces don't have proper heights + * assigned to them yet but their neigbours do and neither me nor virtual + * scrolling knows how to compensate for it, it ends up either not compensating + * or compensating wrong. + * + * Using "fullyLoaded" ref helps with this, to ensure that we have stable + * conversation expansion process of focused post -> entire convo + * + * With fullyLoaded: + * **id:3** -> id:1 id:2 id:3 id:4 id:5 id:6 + * + * Without fullyLoaded: + * id:1 **id:3** id:5 -> id:1 id:2 **id:3** id:4 id:5 id:6 + * (focused post is **id:3**) + * + * After initial load, fullyLoaded remains true, allowing newer updates to + * appear in conversation. + */ const fullConversation = useStatusesStore().conversations.get( conversationId.value, )