From fe0e7bd63c9d5a0f0092f95f54ca02b5f44e2a86 Mon Sep 17 00:00:00 2001
From: Tusooa Zhu <tusooa@kazv.moe>
Date: Thu, 16 Sep 2021 09:22:49 -0400
Subject: [PATCH] Fix timeline jump when scrolling

Ref: tree-threading
---
 src/components/conversation/conversation.js | 19 ++++++++++++++++++-
 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
index 9aa7b183..b9ebe7eb 100644
--- 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
index 2408beaa..ad6b3bd7 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -421,9 +421,6 @@ const Status = {
       }
     }
   },
-  mounted () {
-    this.scrollIfHighlighted(this.highlight)
-  },
   watch: {
     'highlight': function (id) {
       this.scrollIfHighlighted(id)