fix: hide like counts on LikeCard when fetching

Author: danielroe

app/components/Package/LikeCard.vue

@@ -76,6 +76,7 @@ const likeAction = async () => {
       <div class="flex items-center gap-4 justify-between shrink-0">
         <ClientOnly>
           <TooltipApp
+            v-if="likesStatus !== 'pending'"
             :text="likesData?.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')"
             position="bottom"
           >
@@ -92,20 +93,14 @@ const likeAction = async () => {
             >
               <span
                 :class="
-                  likesStatus === 'pending'
-                    ? 'i-lucide-heart'
-                    : likesData?.userHasLiked
-                      ? 'i-lucide-heart-minus text-red-500'
-                      : 'i-lucide-heart-plus'
+                  likesData?.userHasLiked
+                    ? 'i-lucide-heart-minus text-red-500'
+                    : 'i-lucide-heart-plus'
                 "
                 class="w-4 h-4"
                 aria-hidden="true"
               />
-              <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>
+              <span>{{ compactNumberFormatter.format(likesData?.totalLikes ?? 0) }}</span>
             </button>
           </TooltipApp>
         </ClientOnly>

test/nuxt/components/PackageLikeCard.spec.ts

@@ -45,22 +45,10 @@ 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 () => {
+  it('hides the like button entirely 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')
+    expect(button.exists()).toBe(false)
   })
 })