fix: avoid user package hydration mismatch

app/composables/npm/useUserPackages.ts

@@ -110,7 +110,7 @@ export function useUserPackages(username: MaybeRefOrGetter<string>) {
 
       return { ...response, isStale }
     },
-    { default: emptySearchResponse },
+    { default: emptySearchResponse, server: false },
   )
   // --- Fetch more (npm path only) ---
   /**

app/composables/useSettings.ts

@@ -1,7 +1,7 @@
 import type { RemovableRef } from '@vueuse/core'
-import { useLocalStorage } from '@vueuse/core'
-import { ACCENT_COLORS, type AccentColorId } from '#shared/utils/constants'
 import type { LocaleObject } from '@nuxtjs/i18n'
+import { useLocalStorage, useMounted } from '@vueuse/core'
+import { ACCENT_COLORS, type AccentColorId } from '#shared/utils/constants'
 import { BACKGROUND_THEMES } from '#shared/utils/constants'
 
 type BackgroundThemeId = keyof typeof BACKGROUND_THEMES
@@ -197,9 +197,10 @@ export function useAccentColor() {
  */
 export function useSearchProvider() {
   const { settings } = useSettings()
+  const isMounted = useMounted()
 
   const searchProvider = computed({
-    get: () => settings.value.searchProvider,
+    get: () => (isMounted.value ? settings.value.searchProvider : DEFAULT_SETTINGS.searchProvider),
     set: (value: SearchProvider) => {
       settings.value.searchProvider = value
     },

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

@@ -180,7 +180,7 @@ defineOgImage(
 
     <!-- Loading state (only on initial load, not when we already have data) -->
     <LoadingSpinner
-      v-if="status === 'pending' && packages.length === 0 && !error"
+      v-if="(status === 'idle' || status === 'pending') && packages.length === 0 && !error"
       :text="$t('common.loading_packages')"
     />
 

test/e2e/hydration.spec.ts

@@ -10,8 +10,11 @@ const PAGES = [
   '/search',
   '/package/nuxt',
   '/search?q=vue',
+  '/~qwerzl',
 ] as const
 
+const SEARCH_PROVIDER_PAGES = ['/search?q=vue', '/~qwerzl'] as const
+
 // ---------------------------------------------------------------------------
 // Test matrix
 //
@@ -113,6 +116,20 @@ test.describe('Hydration', () => {
       })
     }
   })
+
+  // Default: "algolia" in production -> test persisted "npm"
+  test.describe('search provider: npm', () => {
+    for (const page of SEARCH_PROVIDER_PAGES) {
+      test(`${page}`, async ({ page: pw, goto, hydrationErrors }) => {
+        await injectLocalStorage(pw, {
+          'npmx-settings': JSON.stringify({ searchProvider: 'npm' }),
+        })
+        await goto(page, { waitUntil: 'hydration' })
+
+        expect(hydrationErrors).toEqual([])
+      })
+    }
+  })
 })
 
 async function injectLocalStorage(page: Page, entries: Record<string, string>) {