Merge pull request 'Show a sync-in-progress spinner in the header next to the feed filter' (#3) from feature/sync-spinner into master

Reviewed-on: #3

vue/src/components/AppNav.vue

@@ -5,7 +5,7 @@ import { useFeeds, logout as logoutSession } from '@/composables/useFeeds'
 
 const router = useRouter()
 const route = useRoute()
-const { sync, viewMode, toggleViewMode, layout, toggleLayout, markAllRead, feedFilter, feedTitles, setFeedFilter, unreadCount, displayedFeedUnreadCounts, refreshUnreadDisplay, lastProgrammaticScroll } = useFeeds()
+const { sync, viewMode, toggleViewMode, layout, toggleLayout, markAllRead, feedFilter, feedTitles, setFeedFilter, unreadCount, displayedFeedUnreadCounts, refreshUnreadDisplay, lastProgrammaticScroll, isSyncing } = useFeeds()
 
 const headerRef = ref(null)
 
@@ -161,6 +161,11 @@ function handleToggleLayout() {
   <header ref="headerRef" class="app-nav" :class="{ 'app-nav--hidden': hidden }">
     <div class="app-nav__wrapper">
       <span class="app-nav__title">RSS Reader<span v-if="unreadCount" class="app-nav__unread"> ({{ unreadCount }})</span></span>
+      <span
+        class="app-nav__sync-spinner"
+        :class="{ 'app-nav__sync-spinner--active': isSyncing }"
+        aria-hidden="true"
+      ></span>
       <select
         v-if="onFeedsPage && feedTitles.length"
         class="app-nav__filter"
@@ -251,6 +256,34 @@ function handleToggleLayout() {
   opacity: 0.6;
 }
 
+.app-nav__sync-spinner {
+  width: 16px;
+  height: 16px;
+  border: 2px solid var(--color-border);
+  border-top-color: var(--color-text);
+  border-radius: 50%;
+  opacity: 0.6;
+  flex-shrink: 0;
+  visibility: hidden;
+}
+
+.app-nav__sync-spinner--active {
+  visibility: visible;
+  animation: app-nav-spin 0.8s linear infinite;
+}
+
+@keyframes app-nav-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .app-nav__sync-spinner--active {
+    animation: none;
+  }
+}
+
 .app-nav__filter {
   min-height: 44px;
   max-width: clamp(120px, 40vw, 220px);

vue/src/components/__tests__/AppNav.spec.js

@@ -310,6 +310,48 @@ describe('AppNav', () => {
     expect(wrapper.find('.app-nav__title').text()).toContain('(2)')
   })
 
+  describe('sync spinner', () => {
+    it('always renders the spinner, inactive, when idle', async () => {
+      const wrapper = mountNav()
+      await flushPromises()
+
+      const spinner = wrapper.find('.app-nav__sync-spinner')
+      expect(spinner.exists()).toBe(true)
+      expect(spinner.classes()).not.toContain('app-nav__sync-spinner--active')
+    })
+
+    it('activates while a sync triggered through the composable is in flight, and deactivates once it resolves', async () => {
+      const wrapper = mountNav()
+      await flushPromises()
+
+      let resolvePost
+      axios.post.mockReturnValueOnce(new Promise(resolve => { resolvePost = resolve }))
+      const { sync } = useFeeds()
+      const syncPromise = sync(true)
+      await nextTick()
+
+      expect(wrapper.find('.app-nav__sync-spinner').classes()).toContain('app-nav__sync-spinner--active')
+
+      axios.get.mockResolvedValueOnce({ data: { feeds: [] } })
+      resolvePost({ status: 200 })
+      await syncPromise
+      await nextTick()
+
+      expect(wrapper.find('.app-nav__sync-spinner').classes()).not.toContain('app-nav__sync-spinner--active')
+    })
+
+    it('renders even on a page where the feed filter itself does not render', async () => {
+      await router.push('/login')
+      await router.isReady()
+
+      const wrapper = mountNav()
+      await flushPromises()
+
+      expect(wrapper.find('.app-nav__filter').exists()).toBe(false)
+      expect(wrapper.find('.app-nav__sync-spinner').exists()).toBe(true)
+    })
+  })
+
   describe('scroll-driven show/hide', () => {
     // The scroll handler is rAF-throttled; run rAF synchronously so a single
     // dispatched scroll event resolves before we assert. Per the CLAUDE.md

vue/src/composables/__tests__/useFeeds.spec.js

@@ -12,7 +12,7 @@ class FakeIntersectionObserver {
 vi.stubGlobal('IntersectionObserver', FakeIntersectionObserver)
 
 describe('useFeeds', () => {
-  const { feeds, allItems, feedFilter, feedTitles, feedUnreadCounts, unreadCount, displayedFeedUnreadCounts, refreshUnreadDisplay, setFeedFilter, showMessage, message, viewMode, currentIndex, fetchData, sync, getReadable, setInitialLoad, handleIntersection, markAllRead, markRead, markCurrentArticleRead, setupIntersectionObserver } = useFeeds()
+  const { feeds, allItems, feedFilter, feedTitles, feedUnreadCounts, unreadCount, displayedFeedUnreadCounts, refreshUnreadDisplay, setFeedFilter, showMessage, message, viewMode, currentIndex, fetchData, sync, getReadable, setInitialLoad, handleIntersection, markAllRead, markRead, markCurrentArticleRead, setupIntersectionObserver, isSyncing } = useFeeds()
 
   beforeEach(() => {
     localStorage.setItem('user-token', 'test-token')
@@ -289,7 +289,7 @@ describe('useFeeds', () => {
       axios.get.mockReturnValueOnce(new Promise(resolve => { resolveGet = resolve }))
       const fetchPromise = fetchData()
 
-      markCurrentArticleRead() // queued: isSyncing() is true
+      markCurrentArticleRead() // queued: isSyncing is true
       // The user backs out to list view before the reload finishes —
       // leaveArticleView()'s dropReadArticles() runs here, but this article
       // isn't flagged read yet (it's only queued), so it survives that pass.
@@ -366,6 +366,90 @@ describe('useFeeds', () => {
     })
   })
 
+  describe('isSyncing', () => {
+    // Lets a just-resolved deferred promise's `.then` continuations (e.g.
+    // sync()'s `await fetchData()`) actually run before the next assertion,
+    // without pulling in fake timers (see the CLAUDE.md Vitest gotcha).
+    async function flushMicrotasks() {
+      for (let i = 0; i < 5; i++) await Promise.resolve()
+    }
+
+    it('is false initially, true while a fetchData() call is in flight, and false again once it resolves', async () => {
+      expect(isSyncing.value).toBe(false)
+
+      let resolveGet
+      axios.get.mockReturnValueOnce(new Promise(resolve => { resolveGet = resolve }))
+      const fetchPromise = fetchData()
+
+      expect(isSyncing.value).toBe(true)
+
+      resolveGet({ data: { feeds: [] } })
+      await fetchPromise
+
+      expect(isSyncing.value).toBe(false)
+    })
+
+    it('stays true for the whole duration of sync(), including its trailing fetchData(), and only clears once sync() fully settles', async () => {
+      let resolvePost
+      axios.post.mockReturnValueOnce(new Promise(resolve => { resolvePost = resolve }))
+      let resolveGet
+      axios.get.mockReturnValueOnce(new Promise(resolve => { resolveGet = resolve }))
+
+      const syncPromise = sync(true)
+      expect(isSyncing.value).toBe(true)
+
+      // The sync POST settles, handing off into sync()'s own trailing
+      // fetchData() — isSyncing must not flicker false in between.
+      resolvePost({ status: 200 })
+      await flushMicrotasks()
+
+      expect(axios.get).toHaveBeenCalled()
+      expect(isSyncing.value).toBe(true)
+
+      resolveGet({ data: { feeds: [] } })
+      await syncPromise
+
+      expect(isSyncing.value).toBe(false)
+    })
+
+    it('leaves isSyncing true while an independent fetchData() completes during a still in-flight sync(), clearing only once both finish', async () => {
+      let resolvePost
+      axios.post.mockReturnValueOnce(new Promise(resolve => { resolvePost = resolve }))
+      const syncPromise = sync(true)
+      expect(isSyncing.value).toBe(true)
+
+      // An independent fetchData() call runs to completion while sync()'s
+      // POST is still pending.
+      axios.get.mockResolvedValueOnce({ data: { feeds: [] } })
+      await fetchData()
+
+      // sync() itself hasn't finished yet.
+      expect(isSyncing.value).toBe(true)
+
+      axios.get.mockResolvedValueOnce({ data: { feeds: [] } })
+      resolvePost({ status: 200 })
+      await syncPromise
+
+      expect(isSyncing.value).toBe(false)
+    })
+
+    it('clears on a rejected fetchData()', async () => {
+      axios.get.mockRejectedValueOnce(new Error('network'))
+
+      await fetchData() // caught internally — resolves rather than rejecting
+
+      expect(isSyncing.value).toBe(false)
+    })
+
+    it('clears on a rejected sync()', async () => {
+      axios.post.mockRejectedValueOnce(new Error('network'))
+
+      await sync(true) // caught internally — resolves rather than rejecting
+
+      expect(isSyncing.value).toBe(false)
+    })
+  })
+
   describe('markRead resilience', () => {
     // Mirrors useFeeds.js's MARK_READ_RETRY_DELAYS_MS (not exported). Kept in
     // sync via this comment: if that backoff changes, update this too — too

vue/src/composables/useFeeds.js

@@ -86,12 +86,12 @@ let skipNextObservation = false
 // markCurrentArticleRead's display-marking — must not fire while any is in
 // flight. markAllRead is a deliberate, already-confirmed action and is left
 // ungated.
-let activeSyncCount = 0
+const activeSyncCount = ref(0)
 function beginSync() {
-  activeSyncCount += 1
+  activeSyncCount.value += 1
 }
 // Ids handleIntersection()/markCurrentArticleRead() couldn't mark while
-// isSyncing() (see below) — flushed once every in-flight fetchData()/sync()
+// isSyncing (see below) — flushed once every in-flight fetchData()/sync()
 // has finished, rather than left unread forever. Flushing by id (not by
 // re-deriving an index) sidesteps fetchData() having replaced
 // feeds.value/allItems.value wholesale in the meantime — the id is still
@@ -99,14 +99,12 @@ function beginSync() {
 const pendingSuppressedReadIds = new Set()
 
 function endSync() {
-  activeSyncCount -= 1
-  if (activeSyncCount === 0) {
+  activeSyncCount.value -= 1
+  if (activeSyncCount.value === 0) {
     flushPendingSuppressedReads()
   }
 }
-function isSyncing() {
-  return activeSyncCount > 0
-}
+const isSyncing = computed(() => activeSyncCount.value > 0)
 
 function flushPendingSuppressedReads() {
   if (pendingSuppressedReadIds.size === 0) return
@@ -509,7 +507,7 @@ function handleIntersection(entries, topbarHeight = 0) {
 
   if (readFeeds.length === 0) return
 
-  if (isSyncing()) {
+  if (isSyncing.value) {
     // Don't mutate a list that's mid-reload — queue these ids instead of
     // dropping them; flushPendingSuppressedReads() marks (and removes) them
     // once every in-flight fetchData()/sync() has finished. Nothing here
@@ -604,7 +602,7 @@ function markCurrentArticleRead() {
   // Don't mark against a list that's mid-reload — see isSyncing/activeSyncCount.
   // Queue this article's id instead of dropping it: flushPendingSuppressedReads()
   // marks it once every in-flight fetchData()/sync() has finished.
-  if (isSyncing()) {
+  if (isSyncing.value) {
     pendingSuppressedReadIds.add(feed.id)
     return
   }
@@ -711,5 +709,6 @@ export function useFeeds() {
     handleIntersection,
     lastProgrammaticScroll,
     markProgrammaticScroll,
+    isSyncing,
   }
 }