From 8babc97877f7bebc8162cd3e108737e41c4bad3d Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Tue, 20 Dec 2022 15:32:31 +0800
Subject: [PATCH] Fix status jumping bug

This part is too complex.
The thread can get very fancy and it's impossible to handle all use-cases without a lot of code.
Solution is just fading all of them out while loading.
---
 src/app.css          |  8 ++++++++
 src/pages/status.jsx | 22 +++++++---------------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/app.css b/src/app.css
index f68386f0..1e04835d 100644
--- a/src/app.css
+++ b/src/app.css
@@ -273,6 +273,14 @@ a.mention span {
 .timeline.contextual > li.thread .replies li:before {
   left: calc(50px + 16px + 16px);
 }
+.timeline.contextual.loading > li:not(.hero) {
+  opacity: 0.2;
+  pointer-events: none;
+  background-image: none !important;
+}
+.timeline.contextual.loading > li:not(.hero):before {
+  content: none !important;
+}
 
 .timeline-deck.compact .status {
   max-height: max(25vh, 160px);
diff --git a/src/pages/status.jsx b/src/pages/status.jsx
index ca4f35be..aa3a2a6c 100644
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@@ -23,19 +23,7 @@ function StatusPage({ id }) {
 
   useEffect(async () => {
     const containsStatus = statuses.find((s) => s.id === id);
-    const statusesWithSameAccountID = statuses.filter(
-      (s) => s.accountID === containsStatus?.accountID,
-    );
-    if (statusesWithSameAccountID.length > 1) {
-      setStatuses(
-        statusesWithSameAccountID.map((s) => ({
-          ...s,
-          thread: true,
-          descendant: undefined,
-          ancestor: undefined,
-        })),
-      );
-    } else {
+    if (!containsStatus) {
       setStatuses([{ id }]);
     }
 
@@ -200,7 +188,11 @@ function StatusPage({ id }) {
             </Link>
           </div>
         </header>
-        <ul class="timeline flat contextual">
+        <ul
+          class={`timeline flat contextual ${
+            uiState === 'loading' ? 'loading' : ''
+          }`}
+        >
           {statuses.slice(0, limit).map((status) => {
             const {
               id: statusID,
@@ -216,7 +208,7 @@ function StatusPage({ id }) {
                 ref={isHero ? heroStatusRef : null}
                 class={`${ancestor ? 'ancestor' : ''} ${
                   descendant ? 'descendant' : ''
-                } ${thread ? 'thread' : ''}`}
+                } ${thread ? 'thread' : ''} ${isHero ? 'hero' : ''}`}
               >
                 {isHero ? (
                   <Status statusID={statusID} withinContext size="l" />