fix: show skeleton instead of 0 in like cards while loading

Like cards showed totalLikes: 0 default before the client-side fetch
resolved, causing a visible 0 -> X jump. Now shows a pulse skeleton
and neutral heart icon during the pending state.

Author: serhalp

app/components/Package/LikeCard.vue

@@ -17,7 +17,7 @@ const { user } = useAtproto()
 
 const authModal = useModal('auth-modal')
 
-const { data: likesData } = useFetch(() => `/api/social/likes/${name.value}`, {
+const { data: likesData, status: likesStatus } = useFetch(() => `/api/social/likes/${name.value}`, {
   default: () => ({ totalLikes: 0, userHasLiked: false }),
   server: false,
 })
@@ -92,14 +92,20 @@ const likeAction = async () => {
             >
               <span
                 :class="
-                  likesData?.userHasLiked
-                    ? 'i-lucide-heart-minus text-red-500'
-                    : 'i-lucide-heart-plus'
+                  likesStatus === 'pending'
+                    ? 'i-lucide-heart'
+                    : likesData?.userHasLiked
+                      ? 'i-lucide-heart-minus text-red-500'
+                      : 'i-lucide-heart-plus'
                 "
                 class="w-4 h-4"
                 aria-hidden="true"
               />
-              <span>{{ compactNumberFormatter.format(likesData?.totalLikes ?? 0) }}</span>
+              <span
+                v-if="likesStatus === 'pending'"
+                class="inline-block w-4 h-4 bg-bg-subtle rounded animate-pulse"
+              />
+              <span v-else>{{ compactNumberFormatter.format(likesData?.totalLikes ?? 0) }}</span>
             </button>
           </TooltipApp>
         </ClientOnly>

test/nuxt/components/PackageLikeCard.spec.ts

@@ -44,4 +44,23 @@ describe('PackageLikeCard', () => {
 
     expect(wrapper.find('span.truncate').text()).toBe('@scope/pkg')
   })
+
+  it('shows a loading skeleton instead of zero while like data is pending', async () => {
+    wrapper = await mountLikeCard('https://npmx.dev/package/vue')
+
+    const button = wrapper.find('button')
+    expect(button.text()).not.toContain('0')
+
+    const skeleton = button.find('.animate-pulse')
+    expect(skeleton.exists()).toBe(true)
+  })
+
+  it('shows a neutral heart icon while like data is pending', async () => {
+    wrapper = await mountLikeCard('https://npmx.dev/package/vue')
+
+    const icon = wrapper.find('button span[aria-hidden]')
+    expect(icon.classes()).toContain('i-lucide-heart')
+    expect(icon.classes()).not.toContain('i-lucide-heart-plus')
+    expect(icon.classes()).not.toContain('i-lucide-heart-minus')
+  })
 })