pleroma-fe

commit: f8c5cbcd0d5d092c1264032a1be003f828dfc499
parent 20880cdf0bd33d6c189549441ab0ee26b59abf6d
Author: Tusooa Zhu <tusooa@kazv.moe>
Date:   Thu, 16 Sep 2021 09:22:49 -0400

Fix timeline jump when scrolling

Ref: tree-threading

Diffstat:
M
src/components/conversation/conversation.js
19
++++++++++++++++++-
M
src/components/status/status.js
3
---

2 files changed, 18 insertions(+), 4 deletions(-)
diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
@@ -469,7 +469,24 @@ const conversation = {
       } else {
         this.inlineDivePosition = id
       }
-      this.setHighlight(id)
+      // Because the conversation can be unmounted when out of sight
+      // and mounted again when it comes into sight,
+      // the `mounted` or `created` function in `status` should not
+      // contain scrolling calls, as we do not want the page to jump
+      // when we scroll with an expanded conversation.
+      //
+      // Now the method is to rely solely on the `highlight` watcher
+      // in `status` components.
+      // In linear views, all statuses are rendered at all times, but
+      // in tree views, it is possible that a change in active status
+      // removes and adds status components (e.g. an originally child
+      // status becomes an ancestor status, and thus they will be
+      // different).
+      // Here, let the components be rendered first, in order to trigger
+      // the `highlight` watcher.
+      this.$nextTick(() => {
+        this.setHighlight(id)
+      })
     },
     goToCurrent () {
       this.tryScrollTo(this.diveRoot || this.topLevel[0].id)
diff --git a/src/components/status/status.js b/src/components/status/status.js
@@ -439,9 +439,6 @@ const Status = {
       }
     }
   },
-  mounted () {
-    this.scrollIfHighlighted(this.highlight)
-  },
   watch: {
     'highlight': function (id) {
       this.scrollIfHighlighted(id)