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

Co-authored-by: Daniel Roe <daniel@roe.dev>

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,
 })
@@ -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"
           >

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,11 @@ describe('PackageLikeCard', () => {
 
     expect(wrapper.find('span.truncate').text()).toBe('@scope/pkg')
   })
+
+  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.exists()).toBe(false)
+  })
 })

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