fix(search): prevent scroll jump during pagination

Author: marlonwq

app/pages/search.vue

@@ -21,13 +21,16 @@ const {
 } = usePackageListPreferences()
 
 // Debounced URL update for page (less aggressive to avoid too many URL changes)
+//Use History API directly to update URL without triggering Router's scroll-to-top
 const updateUrlPage = debounce((page: number) => {
-  router.replace({
-    query: {
-      ...route.query,
-      page: page > 1 ? page : undefined,
-    },
-  })
+  const url = new URL(window.location.href)
+  if (page > 1) {
+    url.searchParams.set('page', page.toString())
+  } else {
+    url.searchParams.delete('page')
+  }
+  // This updates the address bar "silently"
+  window.history.replaceState({}, '', url)
 }, 500)
 
 const { model: searchQuery, provider: searchProvider } = useGlobalSearch()
@@ -276,7 +279,8 @@ function handlePageChange(page: number) {
 }
 
 // Reset page when query changes
-watch(query, () => {
+watch(query, (newQuery, oldQuery) => {
+  if (newQuery.trim() === (oldQuery || '').trim()) return
   currentPage.value = 1
   hasInteracted.value = true
 })
@@ -536,7 +540,7 @@ defineOgImageComponent('Default', {
 </script>
 
 <template>
-  <main class="flex-1 py-8" :class="{ 'overflow-x-hidden': viewMode !== 'table' }">
+  <main class="flex-1 py-8 search-page" :class="{ 'overflow-x-hidden': viewMode !== 'table' }">
     <div class="container-sm">
       <div class="flex items-center justify-between gap-4 mb-4">
         <h1 class="font-mono text-2xl sm:text-3xl font-medium">
@@ -545,12 +549,13 @@ defineOgImageComponent('Default', {
         <SearchProviderToggle />
       </div>
 
-      <section v-if="query">
-        <!-- Initial loading (only after user interaction, not during view transition) -->
-        <LoadingSpinner v-if="showSearching" :text="$t('search.searching')" />
+      <section v-if="query" class="results-layout">
+        <LoadingSpinner
+          v-if="showSearching && displayResults.length === 0"
+          :text="$t('search.searching')"
+        />
 
-        <div v-else-if="visibleResults">
-          <!-- User/Org search suggestions -->
+        <div v-show="results || displayResults.length > 0">
           <div v-if="validatedSuggestions.length > 0" class="mb-6 space-y-3">
             <SearchSuggestionCard
               v-for="(suggestion, idx) in validatedSuggestions"
@@ -565,9 +570,8 @@ defineOgImageComponent('Default', {
             />
           </div>
 
-          <!-- Claim prompt - shown at top when valid name but no exact match -->
           <div
-            v-if="showClaimPrompt && visibleResults.total > 0"
+            v-if="showClaimPrompt && visibleResults && visibleResults.total > 0"
             class="mb-6 p-4 bg-bg-subtle border border-border rounded-lg sm:flex hidden flex-row sm:items-center gap-3 sm:gap-4"
           >
             <div class="flex-1 min-w-0">
@@ -585,15 +589,13 @@ defineOgImageComponent('Default', {
             </button>
           </div>
 
-          <!-- Rate limited by npm - check FIRST before showing any results -->
           <div v-if="isRateLimited" role="status" class="py-12">
             <p class="text-fg-muted font-mono mb-6 text-center">
               {{ $t('search.rate_limited') }}
             </p>
           </div>
 
-          <!-- Enhanced toolbar -->
-          <div v-else-if="visibleResults.total > 0" class="mb-6">
+          <div v-else-if="visibleResults && visibleResults.total > 0" class="mb-6">
             <PackageListToolbar
               :filters="filters"
               v-model:sort-option="sortOption"
@@ -618,7 +620,6 @@ defineOgImageComponent('Default', {
               @update:updated-within="setUpdatedWithin"
               @toggle-keyword="toggleKeyword"
             />
-            <!-- Show count status (infinite scroll mode only) -->
             <p
               v-if="viewMode === 'cards' && paginationMode === 'infinite'"
               role="status"
@@ -642,7 +643,6 @@ defineOgImageComponent('Default', {
                 $t('search.updating')
               }}</span>
             </p>
-            <!-- Show "x of y" (paginated/table mode only) -->
             <p
               v-if="viewMode === 'table' || paginationMode === 'paginated'"
               role="status"
@@ -664,13 +664,11 @@ defineOgImageComponent('Default', {
             </p>
           </div>
 
-          <!-- No results found -->
           <div v-else-if="status === 'success' || status === 'error'" role="status" class="py-12">
             <p class="text-fg-muted font-mono mb-6 text-center">
               {{ $t('search.no_results', { query }) }}
             </p>
 
-            <!-- User/Org suggestions when no packages found -->
             <div v-if="validatedSuggestions.length > 0" class="max-w-md mx-auto mb-6 space-y-3">
               <SearchSuggestionCard
                 v-for="(suggestion, idx) in validatedSuggestions"
@@ -685,7 +683,6 @@ defineOgImageComponent('Default', {
               />
             </div>
 
-            <!-- Offer to claim the package name if it's valid -->
             <div v-if="showClaimPrompt" class="max-w-md mx-auto text-center hidden sm:block">
               <div class="p-4 bg-bg-subtle border border-border rounded-lg">
                 <p class="text-sm text-fg-muted mb-3">{{ $t('search.want_to_claim') }}</p>
@@ -701,7 +698,7 @@ defineOgImageComponent('Default', {
           </div>
 
           <PackageList
-            v-if="displayResults.length > 0 && !isRateLimited"
+            v-show="displayResults.length > 0 && !isRateLimited"
             :results="displayResults"
             :search-query="query"
             :filters="filters"
@@ -722,7 +719,6 @@ defineOgImageComponent('Default', {
             @click-keyword="toggleKeyword"
           />
 
-          <!-- Pagination controls -->
           <PaginationControls
             v-if="displayResults.length > 0 && !isRateLimited"
             v-model:mode="paginationMode"
@@ -739,7 +735,6 @@ defineOgImageComponent('Default', {
       </section>
     </div>
 
-    <!-- Claim package modal -->
     <PackageClaimPackageModal
       ref="claimPackageModalRef"
       :package-name="query"
@@ -748,3 +743,13 @@ defineOgImageComponent('Default', {
     />
   </main>
 </template>
+
+<style scoped>
+.search-page {
+  overflow-anchor: none;
+}
+
+.results-layout {
+  min-height: 100vh;
+}
+</style>