From 6dac5bf4caf34351f7ce5e83d9342bd7475cf03f Mon Sep 17 00:00:00 2001
From: 7w1 <noreply@sl.sable.moe>
Date: Thu, 21 May 2026 20:41:40 -0500
Subject: [PATCH] fix: prevent loading spinner flicker on timeline

---
 .changeset/fix-loading-spinner-flicker.md |  5 +++++
 src/app/hooks/timeline/useTimelineSync.ts | 18 +++++++++++++++---
 2 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/fix-loading-spinner-flicker.md

diff --git a/.changeset/fix-loading-spinner-flicker.md b/.changeset/fix-loading-spinner-flicker.md
new file mode 100644
index 000000000..95260b0e6
--- /dev/null
+++ b/.changeset/fix-loading-spinner-flicker.md
@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Fixed the message loading spinner flickering instead of continuing during large pagination chunks.
diff --git a/src/app/hooks/timeline/useTimelineSync.ts b/src/app/hooks/timeline/useTimelineSync.ts
index c10b762b8..e6eb89163 100644
--- a/src/app/hooks/timeline/useTimelineSync.ts
+++ b/src/app/hooks/timeline/useTimelineSync.ts
@@ -186,18 +186,24 @@ const useTimelinePagination = (
           // that countAfter/stillHasToken comparisons are meaningful.
           const freshLTimelines = timelineRef.current.linkedTimelines;
           const firstTimeline = freshLTimelines[0];
-          if (!firstTimeline) return;
+          if (!firstTimeline) {
+            (backwards ? setBackwardStatus : setForwardStatus)('idle');
+            return;
+          }
           recalibratePagination(freshLTimelines);
-          (backwards ? setBackwardStatus : setForwardStatus)('idle');
 
           const countAfter = getTimelinesEventsCount(getLinkedTimelines(firstTimeline));
           const fetched = countAfter - countBefore;
 
+          let willContinue = false;
           if (fetched > 0 && fetched < 5) {
             const checkTimeline = backwards
               ? freshLTimelines[0]
               : freshLTimelines[freshLTimelines.length - 1];
-            if (!checkTimeline) return;
+            if (!checkTimeline) {
+              (backwards ? setBackwardStatus : setForwardStatus)('idle');
+              return;
+            }
             const checkDirection = backwards ? Direction.Backward : Direction.Forward;
             const stillHasToken =
               typeof getLinkedTimelines(checkTimeline)[0]?.getPaginationToken(checkDirection) ===
@@ -207,12 +213,18 @@ const useTimelinePagination = (
               // so the finally block below does NOT reset it after inner claims.
               fetchingRef.current[directionKey] = false;
               continuing = true;
+              willContinue = true;
               paginate(backwards);
               // At this point the inner paginate has synchronously set
               // fetchingRef.current[directionKey] = true before hitting its own
               // await.  The finally below will skip the reset.
             }
           }
+
+          // Stay in 'loading' across auto-continuation chunks so the spinner does not flicker.
+          if (!willContinue) {
+            (backwards ? setBackwardStatus : setForwardStatus)('idle');
+          }
         }
       } finally {
         // Only release the lock if we did NOT hand it to a recursive continuation.