From 121038dc9664b15ff9a267bf1ef434d5266ac961 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 24 Aug 2026 17:34:59 +0300
Subject: [PATCH] split loading between older and newer, add newer loading
 indicator

---
 src/components/timeline/timeline.js     |  2 +-
 src/components/timeline/timeline.vue    | 12 +++++++++++-
 src/stores/fetchers/timeline_fetcher.js | 18 ++++++++++++++----
 3 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index ee18b0c4d..33ee9a21d 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -238,7 +238,7 @@ const Timeline = {
       const bodyBRect = document.body.getBoundingClientRect()
       const height = Math.max(bodyBRect.height, -bodyBRect.y)
       if (
-        !this.timeline.fetcher.loading.value &&
+        !this.timeline.fetcher.loadingOlder.value &&
         this.$el.offsetHeight > 0 &&
         window.innerHeight + window.pageYOffset >= height - 750
       ) {
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index faf184504..7e3eefce2 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -8,6 +8,16 @@
         v-if="!embedded"
         :timeline-name="timelineRef.name"
       />
+      <div
+        v-if="timeline.fetcher.loadingNewer"
+        class="loadingIndicator"
+      >
+        <FAIcon
+          fixed-width
+          icon="circle-notch"
+          spin
+        />
+      </div>
       <ScrollTopButton />
       <template v-if="mobileLayout">
         <div
@@ -102,7 +112,7 @@
           {{ $t('timeline.no_more_statuses') }}
         </div>
         <button
-          v-else-if="!timeline.fetcher.loading"
+          v-else-if="!timeline.fetcher.loadingOlder"
           class="button-unstyled -link"
           @click.prevent="fetchOlderStatuses()"
         >
diff --git a/src/stores/fetchers/timeline_fetcher.js b/src/stores/fetchers/timeline_fetcher.js
index 83b1c3b9a..ac2611607 100644
--- a/src/stores/fetchers/timeline_fetcher.js
+++ b/src/stores/fetchers/timeline_fetcher.js
@@ -18,12 +18,17 @@ const REPLY_VISIBILITY_TIMELINES = new Set([
 ])
 
 const timelineFetcher = (timeline, argument, credentials) => {
-  const loading = ref(false)
+  const loadingNewer = ref(false)
+  const loadingOlder = ref(false)
   const bottomedOut = ref(false)
   const interval = ref(null)
 
   const fetchAndUpdate = ({ older = false, showImmediately = false } = {}) => {
-    loading.value = true
+    if (older) {
+      loadingOlder.value = true
+    } else {
+      loadingNewer.value = true
+    }
 
     const { hideMutedPosts, replyVisibility } =
       useMergedConfigStore().mergedConfig
@@ -85,7 +90,11 @@ const timelineFetcher = (timeline, argument, credentials) => {
         })
       })
       .finally(() => {
-        loading.value = false
+        if (older) {
+          loadingOlder.value = false
+        } else {
+          loadingNewer.value = false
+        }
       })
   }
 
@@ -108,7 +117,8 @@ const timelineFetcher = (timeline, argument, credentials) => {
     startFetching,
     stopFetching,
     fetchOlder: () => fetchAndUpdate({ showImmediately: true, older: true }),
-    loading,
+    loadingOlder,
+    loadingNewer,
     bottomedOut,
   }
 }