From bb44cef6762e59f32fcf842842876a5d6941ee40 Mon Sep 17 00:00:00 2001
From: Philippe Serhal <philippe.serhal@gmail.com>
Date: Tue, 3 Mar 2026 20:19:15 -0500
Subject: [PATCH 1/3] 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.
---
 app/components/Package/LikeCard.vue          | 16 +++++++++++-----
 test/nuxt/components/PackageLikeCard.spec.ts | 19 +++++++++++++++++++
 2 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/app/components/Package/LikeCard.vue b/app/components/Package/LikeCard.vue
index 032a77a1b0..4b1dcc7c34 100644
--- a/app/components/Package/LikeCard.vue
+++ b/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>
diff --git a/test/nuxt/components/PackageLikeCard.spec.ts b/test/nuxt/components/PackageLikeCard.spec.ts
index 3933e838ce..75175df39d 100644
--- a/test/nuxt/components/PackageLikeCard.spec.ts
+++ b/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')
+  })
 })

From a6bd24418f2977f9cbf4265330603ab25e5b8dc2 Mon Sep 17 00:00:00 2001
From: Philippe Serhal <philippe.serhal@gmail.com>
Date: Tue, 3 Mar 2026 20:20:21 -0500
Subject: [PATCH 2/3] fix: wait for auth before showing profile invite section

The invite empty state briefly flashed on page load because the auth
session (server: false) hadn't resolved yet, making the "not own profile"
check pass incorrectly.

Closes #1781
---
 app/pages/profile/[identity]/index.vue        |  3 +-
 .../components/ProfileInviteSection.spec.ts   | 84 +++++++++++++++++++
 2 files changed, 86 insertions(+), 1 deletion(-)
 create mode 100644 test/nuxt/components/ProfileInviteSection.spec.ts

diff --git a/app/pages/profile/[identity]/index.vue b/app/pages/profile/[identity]/index.vue
index 45c9c0f577..fbf4b258cd 100644
--- a/app/pages/profile/[identity]/index.vue
+++ b/app/pages/profile/[identity]/index.vue
@@ -23,7 +23,7 @@ if (!profile.value || profileError.value?.statusCode === 404) {
   })
 }
 
-const { user } = useAtproto()
+const { user, pending: userPending } = useAtproto()
 const isEditing = ref(false)
 const displayNameInput = ref()
 const descriptionInput = ref()
@@ -84,6 +84,7 @@ const showInviteSection = computed(() => {
     profile.value.recordExists === false &&
     status.value === 'success' &&
     !likes.value?.records?.length &&
+    !userPending.value &&
     user.value?.handle !== profile.value.handle
   )
 })
diff --git a/test/nuxt/components/ProfileInviteSection.spec.ts b/test/nuxt/components/ProfileInviteSection.spec.ts
new file mode 100644
index 0000000000..6b5a897ce7
--- /dev/null
+++ b/test/nuxt/components/ProfileInviteSection.spec.ts
@@ -0,0 +1,84 @@
+import { mockNuxtImport, mountSuspended, registerEndpoint } from '@nuxt/test-utils/runtime'
+import { describe, expect, it, vi, beforeEach } from 'vitest'
+
+const { mockUseAtproto, mockUseProfileLikes } = vi.hoisted(() => ({
+  mockUseAtproto: vi.fn(),
+  mockUseProfileLikes: vi.fn(),
+}))
+
+mockNuxtImport('useAtproto', () => mockUseAtproto)
+mockNuxtImport('useProfileLikes', () => mockUseProfileLikes)
+
+import ProfilePage from '~/pages/profile/[identity]/index.vue'
+
+registerEndpoint('/api/social/profile/test-handle', () => ({
+  displayName: 'Test User',
+  description: '',
+  website: '',
+  handle: 'test-handle',
+  recordExists: false,
+}))
+
+describe('Profile invite section', () => {
+  beforeEach(() => {
+    mockUseAtproto.mockReset()
+    mockUseProfileLikes.mockReset()
+  })
+
+  it('does not show invite section while auth is still loading', async () => {
+    mockUseAtproto.mockReturnValue({
+      user: ref(null),
+      pending: ref(true),
+      logout: vi.fn(),
+    })
+
+    mockUseProfileLikes.mockReturnValue({
+      data: ref({ records: [] }),
+      status: ref('success'),
+    })
+
+    const wrapper = await mountSuspended(ProfilePage, {
+      route: '/profile/test-handle',
+    })
+
+    expect(wrapper.text()).not.toContain("It doesn't look like they're using npmx yet")
+  })
+
+  it('shows invite section after auth resolves for non-owner', async () => {
+    mockUseAtproto.mockReturnValue({
+      user: ref({ handle: 'other-user' }),
+      pending: ref(false),
+      logout: vi.fn(),
+    })
+
+    mockUseProfileLikes.mockReturnValue({
+      data: ref({ records: [] }),
+      status: ref('success'),
+    })
+
+    const wrapper = await mountSuspended(ProfilePage, {
+      route: '/profile/test-handle',
+    })
+
+    expect(wrapper.text()).toContain("It doesn't look like they're using npmx yet")
+  })
+
+  it('does not show invite section for profile owner', async () => {
+    mockUseAtproto.mockReturnValue({
+      user: ref({ handle: 'test-handle' }),
+      pending: ref(false),
+      logout: vi.fn(),
+    })
+
+    mockUseProfileLikes.mockReturnValue({
+      data: ref({ records: [] }),
+      status: ref('success'),
+    })
+
+    const wrapper = await mountSuspended(ProfilePage, {
+      route: '/profile/test-handle',
+    })
+
+    expect(wrapper.text()).not.toContain("It doesn't look like they're using npmx yet")
+  })
+})

From e27d7caa271abf3704820441de0643b0adedbe35 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Wed, 4 Mar 2026 11:31:22 +0000
Subject: [PATCH 3/3] fix: hide like counts on `LikeCard` when fetching

---
 app/components/Package/LikeCard.vue          | 15 +++++----------
 test/nuxt/components/PackageLikeCard.spec.ts | 16 ++--------------
 2 files changed, 7 insertions(+), 24 deletions(-)

diff --git a/app/components/Package/LikeCard.vue b/app/components/Package/LikeCard.vue
index 4b1dcc7c34..d21036722f 100644
--- a/app/components/Package/LikeCard.vue
+++ b/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>
diff --git a/test/nuxt/components/PackageLikeCard.spec.ts b/test/nuxt/components/PackageLikeCard.spec.ts
index 75175df39d..5d4d143da3 100644
--- a/test/nuxt/components/PackageLikeCard.spec.ts
+++ b/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)
   })
 })