fix: address code review comments

Author: danielroe

app/components/SearchProviderToggle.client.vue

@@ -74,7 +74,7 @@ useEventListener('keydown', event => {
           <button
             type="button"
             role="menuitem"
-            class="w-full flex items-start gap-3 px-3 py-2.5 rounded-md text-start transition-colors hover:bg-bg-muted"
+            class="w-full flex items-start gap-3 px-3 py-2.5 rounded-md text-start transition-colors hover:bg-bg-muted mt-1"
             :class="[isAlgolia ? 'bg-bg-muted' : '']"
             @click="
               () => {

app/composables/npm/useAlgoliaSearch.ts

@@ -158,7 +158,7 @@ export function useAlgoliaSearch() {
 
     const response = results[0] as SearchResponse<AlgoliaHit> | undefined
     if (!response) {
-      return { isStale: false, objects: [], total: 0, time: new Date().toISOString() }
+      throw new Error('Algolia returned an empty response')
     }
 
     return {
@@ -186,7 +186,10 @@ export function useAlgoliaSearch() {
 
     // Algolia supports up to 1000 results per query with offset/length pagination
     while (offset < max) {
-      const length = Math.min(batchSize, max - offset)
+      // Cap at both the configured max and the server's actual total (once known)
+      const remaining = serverTotal > 0 ? Math.min(max, serverTotal) - offset : max - offset
+      if (remaining <= 0) break
+      const length = Math.min(batchSize, remaining)
 
       const { results } = await client.search([
         {

app/composables/npm/useUserPackages.ts

@@ -200,12 +200,15 @@ export function useUserPackages(username: MaybeRefOrGetter<string>) {
     return asyncData.data.value
   })
 
-  /** Whether there are more results available to load */
+  /** Whether there are more results available to load (npm path only) */
   const hasMore = computed(() => {
-    // Algolia fetches everything in one go
+    // Non-npm providers fetch everything in one request
     if (searchProvider.value !== 'npm') return false
     if (!cache.value) return true
-    return cache.value.objects.length < Math.min(cache.value.total, MAX_RESULTS)
+    // npm path: more available if we haven't hit the server total or our cap
+    const fetched = cache.value.objects.length
+    const available = cache.value.total
+    return fetched < available && fetched < MAX_RESULTS
   })
 
   return {

app/pages/~[username]/index.vue

@@ -175,14 +175,14 @@ defineOgImageComponent('Default', {
       </div>
     </header>
 
-    <!-- Loading state -->
+    <!-- Loading state (only on initial load, not when we already have data) -->
     <LoadingSpinner
-      v-if="status === 'pending' && packages.length === 0"
+      v-if="status === 'pending' && packages.length === 0 && !error"
       :text="$t('common.loading_packages')"
     />
 
     <!-- Error state -->
-    <div v-else-if="status === 'error'" role="alert" class="py-12 text-center">
+    <div v-else-if="error || status === 'error'" role="alert" class="py-12 text-center">
       <p class="text-fg-muted mb-4">
         {{ error?.message ?? $t('user.page.failed_to_load') }}
       </p>