fix(ui): don't show state before profile/likes finish loading

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>

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
   )
 })

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')
+  })
 })

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")
+  })
+})