fix: fetch likes leaderboard from client only

This defers this very optional fetch to later and avoids caching
degraded/failed responses.

Author: serhalp

app/components/Package/Likes.vue

@@ -115,7 +115,6 @@ const likeAction = async () => {
       ? {
           ...previousLikesState,
           ...result.data,
-          topLikedRank: result.data.topLikedRank ?? previousLikesState.topLikedRank,
         }
       : previousLikesState
   } catch {

app/pages/leaderboard/likes.vue

@@ -12,12 +12,17 @@ useSeoMeta({
 
 const compactNumberFormatter = useCompactNumberFormatter()
 
-const { data: leaderboardEntries } = await useFetch<LikesLeaderboardEntry[]>(
+const { data: leaderboardEntries, status: leaderboardStatus } = useFetch<LikesLeaderboardEntry[]>(
   '/api/leaderboard/likes',
   {
     default: () => [],
+    server: false,
   },
 )
+
+const isLoadingLeaderboard = computed(
+  () => leaderboardStatus.value === 'pending' || leaderboardStatus.value === 'idle',
+)
 </script>
 
 <template>
@@ -36,7 +41,16 @@ const { data: leaderboardEntries } = await useFetch<LikesLeaderboardEntry[]>(
       </header>
 
       <BaseCard
-        v-if="leaderboardEntries.length === 0"
+        v-if="isLoadingLeaderboard"
+        class="cursor-default hover:(border-border bg-bg-subtle)"
+      >
+        <p class="text-fg-muted">
+          {{ $t('common.loading') }}
+        </p>
+      </BaseCard>
+
+      <BaseCard
+        v-else-if="leaderboardEntries.length === 0"
         class="cursor-default hover:(border-border bg-bg-subtle)"
       >
         <h2 class="font-mono text-lg mb-2">

nuxt.config.ts

@@ -143,6 +143,7 @@ export default defineNuxtConfig({
     // never cache
     '/api/auth/**': { isr: false, cache: false },
     '/api/social/**': { isr: false, cache: false },
+    '/api/leaderboard/likes': { isr: false, cache: false },
     '/api/atproto/bluesky-comments': {
       isr: {
         expiration: 60 * 60 /* one hour */,

test/nuxt/a11y.spec.ts

@@ -730,8 +730,11 @@ describe('component accessibility audits', () => {
         route: '/leaderboard/likes',
       })
 
-      expect(component.text()).toContain('Likes Leaderboard')
-      expect(component.text()).toContain('vue')
+      await vi.waitFor(() => {
+        expect(component.text()).toContain('Likes Leaderboard')
+        expect(component.text()).toContain('vue')
+      })
+
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
     })
@@ -744,7 +747,10 @@ describe('component accessibility audits', () => {
         route: '/leaderboard/likes',
       })
 
-      expect(component.text()).toContain('No likes leaderboard yet')
+      await vi.waitFor(() => {
+        expect(component.text()).toContain('No likes leaderboard yet')
+      })
+
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
     })

test/nuxt/pages/LikesLeaderboardPage.spec.ts

@@ -1,4 +1,4 @@
-import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { mountSuspended, registerEndpoint } from '@nuxt/test-utils/runtime'
 import type { VueWrapper } from '@vue/test-utils'
 import LikesLeaderboardPage from '~/pages/leaderboard/likes.vue'
@@ -36,9 +36,12 @@ describe('likes leaderboard page', () => {
       route: '/leaderboard/likes',
     })
 
-    expect(wrapper.text()).toContain('Likes Leaderboard')
-    expect(wrapper.text()).toContain('vue')
-    expect(wrapper.text()).toContain('@nuxt/kit')
+    await vi.waitFor(() => {
+      expect(wrapper?.text()).toContain('Likes Leaderboard')
+      expect(wrapper?.text()).toContain('vue')
+      expect(wrapper?.text()).toContain('@nuxt/kit')
+    })
+
     expect(wrapper.text()).toContain('#1')
     expect(wrapper.find('a[href="/package/vue"]').exists()).toBe(true)
   })
@@ -50,7 +53,10 @@ describe('likes leaderboard page', () => {
       route: '/leaderboard/likes',
     })
 
-    expect(wrapper.text()).toContain('No likes leaderboard yet')
+    await vi.waitFor(() => {
+      expect(wrapper?.text()).toContain('No likes leaderboard yet')
+    })
+
     expect(wrapper.text()).toContain("We don't have a likes leaderboard to show right now.")
   })
 })