split loading between older and newer, add newer loading indicator

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
       ) {

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()"
         >

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,
   }
 }