fix: harden and polish /compare package search

- use the existing package search composable
- improve loading states in result grid: facet-level and column-level,
  and don't hide existing data for some columns/rows while new/others
  are loading

Author: serhalp

app/components/AppHeader.vue

@@ -81,7 +81,7 @@ onKeyStroke(',', e => {
           to="/compare"
           class="hidden sm:inline-flex link-subtle font-mono text-sm items-center gap-1.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded"
         >
-          <span class="i-carbon-compare w-4 h-4" aria-hidden="true" />
+          <span class="i-carbon:compare w-4 h-4" aria-hidden="true" />
           {{ $t('nav.compare') }}
         </NuxtLink>
 

app/components/compare/FacetRow.vue

@@ -8,8 +8,10 @@ const props = defineProps<{
   description?: string
   /** Values for each column */
   values: (FacetValue | null | undefined)[]
-  /** Whether this row is loading */
-  loading?: boolean
+  /** Whether this facet is loading (e.g., install size) */
+  facetLoading?: boolean
+  /** Whether each column is loading (array matching values) */
+  columnLoading?: boolean[]
   /** Whether to show the proportional bar (defaults to true for numeric values) */
   bar?: boolean
 }>()
@@ -50,6 +52,11 @@ function getStatusClass(status?: FacetValue['status']): string {
       return 'text-fg'
   }
 }
+
+// Check if a specific cell is loading
+function isCellLoading(index: number): boolean {
+  return props.facetLoading || (props.columnLoading?.[index] ?? false)
+}
 </script>
 
 <template>
@@ -82,7 +89,7 @@ function getStatusClass(status?: FacetValue['status']): string {
       />
 
       <!-- Loading state -->
-      <template v-if="loading">
+      <template v-if="isCellLoading(index)">
         <span
           class="i-carbon:circle-dash w-4 h-4 text-fg-subtle motion-safe:animate-spin"
           aria-hidden="true"

app/components/compare/PackageSelector.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { debounce } from 'perfect-debounce'
-
 const packages = defineModel<string[]>({ required: true })
 
 const props = defineProps<{
@@ -14,42 +12,20 @@ const maxPackages = computed(() => props.max ?? 4)
 const inputValue = ref('')
 const isInputFocused = ref(false)
 
-// Search state
-const searchResults = ref<Array<{ name: string; description?: string }>>([])
-const isSearching = ref(false)
+// Use the shared npm search composable
+const { data: searchData, status } = useNpmSearch(inputValue, { size: 15 })
 
-// Debounced search
-const performSearch = debounce(async (query: string) => {
-  if (!query.trim()) {
-    searchResults.value = []
-    return
-  }
+const isSearching = computed(() => status.value === 'pending')
 
-  isSearching.value = true
-  try {
-    const response = await $fetch<{
-      objects: Array<{ package: { name: string; description?: string } }>
-    }>(`https://registry.npmjs.org/-/v1/search`, {
-      query: { text: query, size: 15 },
-    })
-    searchResults.value = response.objects.map(o => ({
+// Filter out already selected packages
+const filteredResults = computed(() => {
+  if (!searchData.value?.objects) return []
+  return searchData.value.objects
+    .map(o => ({
       name: o.package.name,
       description: o.package.description,
     }))
-  } catch {
-    searchResults.value = []
-  } finally {
-    isSearching.value = false
-  }
-}, 200)
-
-watch(inputValue, value => {
-  performSearch(value)
-})
-
-// Filter out already selected packages
-const filteredResults = computed(() => {
-  return searchResults.value.filter(r => !packages.value.includes(r.name))
+    .filter(r => !packages.value.includes(r.name))
 })
 
 function addPackage(name: string) {
@@ -58,7 +34,6 @@ function addPackage(name: string) {
 
   packages.value = [...packages.value, name]
   inputValue.value = ''
-  searchResults.value = []
 }
 
 function removePackage(name: string) {
@@ -108,13 +83,17 @@ function handleBlur() {
     <!-- Add package input -->
     <div v-if="packages.length < maxPackages" class="relative">
       <div class="relative">
+        <label for="package-search" class="sr-only">
+          {{ $t('compare.selector.search_label') }}
+        </label>
         <span
           class="absolute inset-is-3 top-1/2 -translate-y-1/2 text-fg-subtle"
           aria-hidden="true"
         >
           <span class="i-carbon:search w-4 h-4" />
         </span>
         <input
+          id="package-search"
           v-model="inputValue"
           type="text"
           :placeholder="

app/composables/usePackageComparison.ts

@@ -33,42 +33,46 @@ export interface PackageComparisonData {
 export function usePackageComparison(packageNames: MaybeRefOrGetter<string[]>) {
   const packages = computed(() => toValue(packageNames))
 
-  // Reactive state
-  const packagesData = ref<(PackageComparisonData | null)[]>([])
+  // Cache of fetched data by package name (source of truth)
+  const cache = shallowRef(new Map<string, PackageComparisonData>())
+
+  // Derived array in current package order
+  const packagesData = computed(() => packages.value.map(name => cache.value.get(name) ?? null))
+
   const status = ref<'idle' | 'pending' | 'success' | 'error'>('idle')
   const error = ref<Error | null>(null)
 
+  // Track which packages are currently being fetched
+  const loadingPackages = shallowRef(new Set<string>())
+
   // Track install size loading separately (it's slower)
   const installSizeLoading = ref(false)
 
-  // Track last fetched packages to avoid redundant fetches
-  let lastFetchedPackages: string[] = []
-
-  // Fetch function
+  // Fetch function - only fetches packages not already in cache
   async function fetchPackages(names: string[]) {
     if (names.length === 0) {
-      packagesData.value = []
       status.value = 'idle'
-      lastFetchedPackages = []
       return
     }
 
-    // Skip fetch if packages haven't actually changed
-    if (
-      names.length === lastFetchedPackages.length &&
-      names.every((n, i) => n === lastFetchedPackages[i])
-    ) {
+    // Only fetch packages not already cached
+    const namesToFetch = names.filter(name => !cache.value.has(name))
+
+    if (namesToFetch.length === 0) {
+      status.value = 'success'
       return
     }
 
-    lastFetchedPackages = [...names]
     status.value = 'pending'
     error.value = null
 
+    // Mark packages as loading
+    loadingPackages.value = new Set(namesToFetch)
+
     try {
       // First pass: fetch fast data (package info, downloads, analysis, vulns)
       const results = await Promise.all(
-        names.map(async (name): Promise<PackageComparisonData | null> => {
+        namesToFetch.map(async (name): Promise<PackageComparisonData | null> => {
           try {
             // Fetch basic package info first (required)
             const pkgData = await $fetch<{
@@ -131,26 +135,35 @@ export function usePackageComparison(packageNames: MaybeRefOrGetter<string[]>) {
         }),
       )
 
-      packagesData.value = results
+      // Add results to cache
+      const newCache = new Map(cache.value)
+      for (const [i, name] of namesToFetch.entries()) {
+        const data = results[i]
+        if (data) {
+          newCache.set(name, data)
+        }
+      }
+      cache.value = newCache
+      loadingPackages.value = new Set()
       status.value = 'success'
 
-      // Second pass: fetch slow install size data in background
+      // Second pass: fetch slow install size data in background for new packages
       installSizeLoading.value = true
       Promise.all(
-        names.map(async (name, index) => {
+        namesToFetch.map(async name => {
           try {
             const installSize = await $fetch<{
               selfSize: number
               totalSize: number
               dependencyCount: number
             }>(`/api/registry/install-size/${name}`)
 
-            // Update the specific package's install size
-            if (packagesData.value[index]) {
-              packagesData.value[index] = {
-                ...packagesData.value[index]!,
-                installSize,
-              }
+            // Update cache with install size
+            const existing = cache.value.get(name)
+            if (existing) {
+              const updated = new Map(cache.value)
+              updated.set(name, { ...existing, installSize })
+              cache.value = updated
             }
           } catch {
             // Install size fetch failed, leave as undefined
@@ -160,6 +173,7 @@ export function usePackageComparison(packageNames: MaybeRefOrGetter<string[]>) {
         installSizeLoading.value = false
       })
     } catch (e) {
+      loadingPackages.value = new Set()
       error.value = e as Error
       status.value = 'error'
     }
@@ -193,12 +207,19 @@ export function usePackageComparison(packageNames: MaybeRefOrGetter<string[]>) {
     return facet === 'installSize' || facet === 'dependencies'
   }
 
+  // Check if a specific column (package) is loading
+  function isColumnLoading(index: number): boolean {
+    const name = packages.value[index]
+    return name ? loadingPackages.value.has(name) : false
+  }
+
   return {
     packagesData: readonly(packagesData),
     status: readonly(status),
     error: readonly(error),
     getFacetValues,
     isFacetLoading,
+    isColumnLoading,
   }
 }
 

app/pages/compare.vue

@@ -29,7 +29,11 @@ const { selectedFacets, selectAll, deselectAll, isAllSelected, isNoneSelected }
   useFacetSelection()
 
 // Fetch comparison data
-const { packagesData, status, getFacetValues, isFacetLoading } = usePackageComparison(packages)
+const { packagesData, status, getFacetValues, isFacetLoading, isColumnLoading } =
+  usePackageComparison(packages)
+
+// Get loading state for each column
+const columnLoading = computed(() => packages.value.map((_, i) => isColumnLoading(i)))
 
 // Check if we have enough packages to compare
 const canCompare = computed(() => packages.value.length >= 2)
@@ -110,19 +114,23 @@ useSeoMeta({
         {{ $t('compare.packages.section_comparison') }}
       </h2>
 
-      <div v-if="status === 'pending'" class="flex items-center justify-center py-12">
+      <div
+        v-if="status === 'pending' && (!packagesData || packagesData.every(p => p === null))"
+        class="flex items-center justify-center py-12"
+      >
         <LoadingSpinner :text="$t('compare.packages.loading')" />
       </div>
 
-      <div v-else-if="packagesData && packagesData.length > 0">
+      <div v-else-if="packagesData && packagesData.some(p => p !== null)">
         <CompareComparisonGrid :columns="packages.length" :headers="gridHeaders">
           <CompareFacetRow
             v-for="facet in selectedFacets"
             :key="facet"
             :label="FACET_INFO[facet].label"
             :description="FACET_INFO[facet].description"
             :values="getFacetValues(facet)"
-            :loading="isFacetLoading(facet)"
+            :facet-loading="isFacetLoading(facet)"
+            :column-loading="columnLoading"
             :bar="facet !== 'lastUpdated'"
           />
         </CompareComparisonGrid>

i18n/locales/en.json

@@ -768,6 +768,7 @@
       "empty_description": "Search and add at least 2 packages above to see a side-by-side comparison of their metrics."
     },
     "selector": {
+      "search_label": "Search for packages",
       "search_first": "Search for a package...",
       "search_add": "Add another package...",
       "searching": "Searching...",

i18n/locales/fr-FR.json

@@ -753,6 +753,7 @@
       "empty_description": "Recherchez et ajoutez au moins 2 paquets ci-dessus pour voir une comparaison côte à côte de leurs facettes."
     },
     "selector": {
+      "search_label": "Rechercher des paquets",
       "search_first": "Rechercher un paquet...",
       "search_add": "Ajouter un autre paquet...",
       "searching": "Recherche...",

lunaria/files/en-US.json

@@ -768,6 +768,7 @@
       "empty_description": "Search and add at least 2 packages above to see a side-by-side comparison of their metrics."
     },
     "selector": {
+      "search_label": "Search for packages",
       "search_first": "Search for a package...",
       "search_add": "Add another package...",
       "searching": "Searching...",

lunaria/files/fr-FR.json

@@ -753,6 +753,7 @@
       "empty_description": "Recherchez et ajoutez au moins 2 paquets ci-dessus pour voir une comparaison côte à côte de leurs facettes."
     },
     "selector": {
+      "search_label": "Rechercher des paquets",
       "search_first": "Rechercher un paquet...",
       "search_add": "Ajouter un autre paquet...",
       "searching": "Recherche...",

test/nuxt/components/compare/FacetRow.spec.ts

@@ -71,15 +71,29 @@ describe('FacetRow', () => {
       expect(component.text()).toContain('2K')
     })
 
-    it('renders loading state', async () => {
+    it('renders loading state for facet loading', async () => {
       const component = await mountSuspended(FacetRow, {
         props: {
           ...baseProps,
-          values: [null],
-          loading: true,
+          values: [null, null],
+          facetLoading: true,
+        },
+      })
+      // All cells should show loading spinner
+      expect(component.findAll('.i-carbon\\:circle-dash').length).toBe(2)
+    })
+
+    it('renders loading state for specific column loading', async () => {
+      const component = await mountSuspended(FacetRow, {
+        props: {
+          ...baseProps,
+          values: [{ raw: 1000, display: '1K', status: 'neutral' }, null],
+          columnLoading: [false, true],
         },
       })
-      expect(component.find('.i-carbon\\:circle-dash').exists()).toBe(true)
+      // Only second cell should show loading spinner
+      const spinners = component.findAll('.i-carbon\\:circle-dash')
+      expect(spinners.length).toBe(1)
     })
   })