From 1ce8510850ffeb35587de85e388fed0d91b52534 Mon Sep 17 00:00:00 2001
From: Atriiy <ShroXdF@gmail.com>
Date: Tue, 17 Mar 2026 10:59:37 +0800
Subject: [PATCH 1/8] feat: wrap committedSearchQuery update in a debounce

---
 app/composables/useGlobalSearch.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/composables/useGlobalSearch.ts b/app/composables/useGlobalSearch.ts
index 77367a049a..b6f38e2422 100644
--- a/app/composables/useGlobalSearch.ts
+++ b/app/composables/useGlobalSearch.ts
@@ -4,6 +4,8 @@ import { debounce } from 'perfect-debounce'
 // Pages that have their own local filter using ?q
 const pagesWithLocalFilter = new Set(['~username', 'org'])
 
+const SEARCH_DEBOUNCE_MS = 250
+
 export function useGlobalSearch(place: 'header' | 'content' = 'content') {
   const { settings } = useSettings()
   const { searchProvider } = useSearchProvider()
@@ -27,10 +29,14 @@ export function useGlobalSearch(place: 'header' | 'content' = 'content') {
   // Syncs instantly when instantSearch is on, but only on Enter press when off
   const committedSearchQuery = useState<string>('committed-search-query', () => searchQuery.value)
 
+  const commitSearchQuery = debounce((val: string) => {
+    committedSearchQuery.value = val
+  }, SEARCH_DEBOUNCE_MS)
+
   // This is basically doing instant search as user types
   watch(searchQuery, val => {
     if (settings.value.instantSearch) {
-      committedSearchQuery.value = val
+      commitSearchQuery(val)
     }
   })
 
@@ -71,10 +77,11 @@ export function useGlobalSearch(place: 'header' | 'content' = 'content') {
     })
   }
 
-  const updateUrlQuery = debounce(updateUrlQueryImpl, 250)
+  const updateUrlQuery = debounce(updateUrlQueryImpl, SEARCH_DEBOUNCE_MS)
 
   function flushUpdateUrlQuery() {
     // Commit the current query when explicitly submitted (Enter pressed)
+    commitSearchQuery.cancel()
     committedSearchQuery.value = searchQuery.value
     // When instant search is off the debounce queue is empty, so call directly
     if (!settings.value.instantSearch) {

From 25b8ea2ff685b166380034077c60f8cf105f6dc6 Mon Sep 17 00:00:00 2001
From: Atriiy <ShroXdF@gmail.com>
Date: Tue, 17 Mar 2026 12:51:02 +0800
Subject: [PATCH 2/8] fix: fix undebounced query

---
 app/pages/search.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/pages/search.vue b/app/pages/search.vue
index eb424d7ddc..99530ff8e3 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -357,7 +357,7 @@ const showClaimPrompt = computed(() => {
   return (
     isValidPackageName.value &&
     packageAvailability.value?.available === true &&
-    packageAvailability.value.name === query.value.trim() &&
+    packageAvailability.value.name === committedQuery.value.trim() &&
     (!isConnected.value || (isConnected.value && canPublishToScope.value)) &&
     status.value !== 'pending'
   )

From b9992e8fcc223b2335d4f9aca855cf8124957803 Mon Sep 17 00:00:00 2001
From: Atriiy <ShroXdF@gmail.com>
Date: Tue, 17 Mar 2026 13:17:53 +0800
Subject: [PATCH 3/8] fix: tweaks showClaimPrompt to prevent it disappear
 during fetching

---
 app/pages/search.vue | 88 ++++++++++++++++++++++++++------------------
 1 file changed, 53 insertions(+), 35 deletions(-)

diff --git a/app/pages/search.vue b/app/pages/search.vue
index 99530ff8e3..5d7ed2a1ed 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -354,13 +354,19 @@ const canPublishToScope = computed(() => {
 
 // Show claim prompt when valid name, available, either not connected or connected and has permission
 const showClaimPrompt = computed(() => {
-  return (
-    isValidPackageName.value &&
-    packageAvailability.value?.available === true &&
-    packageAvailability.value.name === committedQuery.value.trim() &&
-    (!isConnected.value || (isConnected.value && canPublishToScope.value)) &&
-    status.value !== 'pending'
-  )
+  if (!isValidPackageName.value) return false
+  if (isConnected.value && !canPublishToScope.value) return false
+
+  const avail = packageAvailability.value
+
+  // Confirmed: availability result matches current committed query
+  if (avail?.available === true && avail.name === committedQuery.value.trim()) return true
+
+  // Pending: a new fetch is in flight — keep the claim visible if the last known
+  // result was "available" so it doesn't flicker until new data arrives
+  if (status.value === 'pending' && avail?.available === true) return true
+
+  return false
 })
 
 const claimPackageModalRef = useTemplateRef('claimPackageModalRef')
@@ -711,22 +717,28 @@ onBeforeUnmount(() => {
             status === 'success'
           "
         >
-          <div
-            v-if="validatedSuggestions.length > 0 && displayResults.length > 0"
-            class="mb-6 space-y-3"
+          <Transition
+            enter-active-class="motion-safe:animate-slide-up motion-safe:animate-fill-both"
+            leave-active-class="motion-safe:transition-[opacity,transform] motion-safe:duration-200 motion-safe:ease-out"
+            leave-to-class="opacity-0 motion-safe:-translate-y-1.5"
           >
-            <SearchSuggestionCard
-              v-for="(suggestion, idx) in validatedSuggestions"
-              :key="`${suggestion.type}-${suggestion.name}`"
-              :type="suggestion.type"
-              :name="suggestion.name"
-              :index="idx"
-              :is-exact-match="
-                (exactMatchType === 'org' && suggestion.type === 'org') ||
-                (exactMatchType === 'user' && suggestion.type === 'user')
-              "
-            />
-          </div>
+            <div
+              v-if="validatedSuggestions.length > 0 && displayResults.length > 0"
+              class="mb-6 space-y-3"
+            >
+              <SearchSuggestionCard
+                v-for="(suggestion, idx) in validatedSuggestions"
+                :key="`${suggestion.type}-${suggestion.name}`"
+                :type="suggestion.type"
+                :name="suggestion.name"
+                :index="idx"
+                :is-exact-match="
+                  (exactMatchType === 'org' && suggestion.type === 'org') ||
+                  (exactMatchType === 'user' && suggestion.type === 'user')
+                "
+              />
+            </div>
+          </Transition>
 
           <div
             v-if="showClaimPrompt && visibleResults && displayResults.length > 0"
@@ -823,19 +835,25 @@ onBeforeUnmount(() => {
               {{ $t('search.no_results', { query }) }}
             </p>
 
-            <div v-if="validatedSuggestions.length > 0" class="max-w-md mx-auto mb-6 space-y-3">
-              <SearchSuggestionCard
-                v-for="(suggestion, idx) in validatedSuggestions"
-                :key="`${suggestion.type}-${suggestion.name}`"
-                :type="suggestion.type"
-                :name="suggestion.name"
-                :index="idx"
-                :is-exact-match="
-                  (exactMatchType === 'org' && suggestion.type === 'org') ||
-                  (exactMatchType === 'user' && suggestion.type === 'user')
-                "
-              />
-            </div>
+            <Transition
+              enter-active-class="motion-safe:animate-slide-up motion-safe:animate-fill-both"
+              leave-active-class="motion-safe:transition-[opacity,transform] motion-safe:duration-200 motion-safe:ease-out"
+              leave-to-class="opacity-0 motion-safe:-translate-y-1.5"
+            >
+              <div v-if="validatedSuggestions.length > 0" class="max-w-md mx-auto mb-6 space-y-3">
+                <SearchSuggestionCard
+                  v-for="(suggestion, idx) in validatedSuggestions"
+                  :key="`${suggestion.type}-${suggestion.name}`"
+                  :type="suggestion.type"
+                  :name="suggestion.name"
+                  :index="idx"
+                  :is-exact-match="
+                    (exactMatchType === 'org' && suggestion.type === 'org') ||
+                    (exactMatchType === 'user' && suggestion.type === 'user')
+                  "
+                />
+              </div>
+            </Transition>
 
             <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">

From caff723ce58a6017f32a4fa7b83bf14eeaafd9cd Mon Sep 17 00:00:00 2001
From: Atriiy <ShroXdF@gmail.com>
Date: Tue, 17 Mar 2026 13:23:39 +0800
Subject: [PATCH 4/8] fix: remove unnecessary debounce

---
 app/composables/useGlobalSearch.ts | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/app/composables/useGlobalSearch.ts b/app/composables/useGlobalSearch.ts
index b6f38e2422..77367a049a 100644
--- a/app/composables/useGlobalSearch.ts
+++ b/app/composables/useGlobalSearch.ts
@@ -4,8 +4,6 @@ import { debounce } from 'perfect-debounce'
 // Pages that have their own local filter using ?q
 const pagesWithLocalFilter = new Set(['~username', 'org'])
 
-const SEARCH_DEBOUNCE_MS = 250
-
 export function useGlobalSearch(place: 'header' | 'content' = 'content') {
   const { settings } = useSettings()
   const { searchProvider } = useSearchProvider()
@@ -29,14 +27,10 @@ export function useGlobalSearch(place: 'header' | 'content' = 'content') {
   // Syncs instantly when instantSearch is on, but only on Enter press when off
   const committedSearchQuery = useState<string>('committed-search-query', () => searchQuery.value)
 
-  const commitSearchQuery = debounce((val: string) => {
-    committedSearchQuery.value = val
-  }, SEARCH_DEBOUNCE_MS)
-
   // This is basically doing instant search as user types
   watch(searchQuery, val => {
     if (settings.value.instantSearch) {
-      commitSearchQuery(val)
+      committedSearchQuery.value = val
     }
   })
 
@@ -77,11 +71,10 @@ export function useGlobalSearch(place: 'header' | 'content' = 'content') {
     })
   }
 
-  const updateUrlQuery = debounce(updateUrlQueryImpl, SEARCH_DEBOUNCE_MS)
+  const updateUrlQuery = debounce(updateUrlQueryImpl, 250)
 
   function flushUpdateUrlQuery() {
     // Commit the current query when explicitly submitted (Enter pressed)
-    commitSearchQuery.cancel()
     committedSearchQuery.value = searchQuery.value
     // When instant search is off the debounce queue is empty, so call directly
     if (!settings.value.instantSearch) {

From 81dadc1af04b3ad161f67c86721a88617863390a Mon Sep 17 00:00:00 2001
From: Atriiy <ShroXdF@gmail.com>
Date: Tue, 17 Mar 2026 14:10:45 +0800
Subject: [PATCH 5/8] fix: tweaks transition aniamtion details

---
 app/components/Package/List.vue    | 22 ++++++++++++++++++----
 app/composables/useGlobalSearch.ts | 11 +++++++++--
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/app/components/Package/List.vue b/app/components/Package/List.vue
index bf9e1c2ee5..94ece662a2 100644
--- a/app/components/Package/List.vue
+++ b/app/components/Package/List.vue
@@ -112,6 +112,10 @@ watch(
   { immediate: true },
 )
 
+// Suppress per-card enter animation when the entire result set is replaced (new search).
+// Cards loaded incrementally via scroll should still animate in with the stagger effect.
+const suppressAnimation = shallowRef(false)
+
 // Reset scroll state when results change significantly (new search)
 watch(
   () => props.results,
@@ -123,6 +127,10 @@ watch(
       (oldResults.length > 0 && newResults[0]?.package.name !== oldResults[0]?.package.name)
     ) {
       hasScrolledToInitial.value = false
+      suppressAnimation.value = true
+      nextTick(() => {
+        suppressAnimation.value = false
+      })
     }
   },
 )
@@ -172,9 +180,13 @@ defineExpose({
                 :show-publisher="showPublisher"
                 :index="index"
                 :search-query="searchQuery"
-                class="motion-safe:animate-fade-in motion-safe:animate-fill-both"
+                :class="
+                  !suppressAnimation && 'motion-safe:animate-fade-in motion-safe:animate-fill-both'
+                "
+                :style="
+                  !suppressAnimation ? { animationDelay: `${Math.min(index * 0.02, 0.3)}s` } : {}
+                "
                 :filters="filters"
-                :style="{ animationDelay: `${Math.min(index * 0.02, 0.3)}s` }"
                 @click-keyword="emit('clickKeyword', $event)"
               />
             </div>
@@ -224,8 +236,10 @@ defineExpose({
             :show-publisher="showPublisher"
             :index="index"
             :search-query="searchQuery"
-            class="motion-safe:animate-fade-in motion-safe:animate-fill-both"
-            :style="{ animationDelay: `${Math.min(index * 0.02, 0.3)}s` }"
+            :class="
+              !suppressAnimation && 'motion-safe:animate-fade-in motion-safe:animate-fill-both'
+            "
+            :style="!suppressAnimation ? { animationDelay: `${Math.min(index * 0.02, 0.3)}s` } : {}"
             :filters="filters"
             @click-keyword="emit('clickKeyword', $event)"
           />
diff --git a/app/composables/useGlobalSearch.ts b/app/composables/useGlobalSearch.ts
index 77367a049a..b6f38e2422 100644
--- a/app/composables/useGlobalSearch.ts
+++ b/app/composables/useGlobalSearch.ts
@@ -4,6 +4,8 @@ import { debounce } from 'perfect-debounce'
 // Pages that have their own local filter using ?q
 const pagesWithLocalFilter = new Set(['~username', 'org'])
 
+const SEARCH_DEBOUNCE_MS = 250
+
 export function useGlobalSearch(place: 'header' | 'content' = 'content') {
   const { settings } = useSettings()
   const { searchProvider } = useSearchProvider()
@@ -27,10 +29,14 @@ export function useGlobalSearch(place: 'header' | 'content' = 'content') {
   // Syncs instantly when instantSearch is on, but only on Enter press when off
   const committedSearchQuery = useState<string>('committed-search-query', () => searchQuery.value)
 
+  const commitSearchQuery = debounce((val: string) => {
+    committedSearchQuery.value = val
+  }, SEARCH_DEBOUNCE_MS)
+
   // This is basically doing instant search as user types
   watch(searchQuery, val => {
     if (settings.value.instantSearch) {
-      committedSearchQuery.value = val
+      commitSearchQuery(val)
     }
   })
 
@@ -71,10 +77,11 @@ export function useGlobalSearch(place: 'header' | 'content' = 'content') {
     })
   }
 
-  const updateUrlQuery = debounce(updateUrlQueryImpl, 250)
+  const updateUrlQuery = debounce(updateUrlQueryImpl, SEARCH_DEBOUNCE_MS)
 
   function flushUpdateUrlQuery() {
     // Commit the current query when explicitly submitted (Enter pressed)
+    commitSearchQuery.cancel()
     committedSearchQuery.value = searchQuery.value
     // When instant search is off the debounce queue is empty, so call directly
     if (!settings.value.instantSearch) {

From 075a592035ef5c9470a78eeca3927298e847b272 Mon Sep 17 00:00:00 2001
From: Atriiy <ShroXdF@gmail.com>
Date: Tue, 17 Mar 2026 14:20:47 +0800
Subject: [PATCH 6/8] fix: suppress animation based on index

---
 app/components/Package/List.vue | 29 ++++++++++++++++++-----------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/app/components/Package/List.vue b/app/components/Package/List.vue
index 94ece662a2..4e8f75536c 100644
--- a/app/components/Package/List.vue
+++ b/app/components/Package/List.vue
@@ -112,9 +112,11 @@ watch(
   { immediate: true },
 )
 
-// Suppress per-card enter animation when the entire result set is replaced (new search).
-// Cards loaded incrementally via scroll should still animate in with the stagger effect.
-const suppressAnimation = shallowRef(false)
+// Tracks how many items came from the last new-search batch.
+// Items at index < newSearchBatchSize are from the new search → no animation.
+// Items at index >= newSearchBatchSize were loaded via scroll → animate with stagger.
+// Using an index threshold avoids any timing dependency on nextTick / virtual list paint.
+const newSearchBatchSize = shallowRef(Infinity)
 
 // Reset scroll state when results change significantly (new search)
 watch(
@@ -127,10 +129,7 @@ watch(
       (oldResults.length > 0 && newResults[0]?.package.name !== oldResults[0]?.package.name)
     ) {
       hasScrolledToInitial.value = false
-      suppressAnimation.value = true
-      nextTick(() => {
-        suppressAnimation.value = false
-      })
+      newSearchBatchSize.value = newResults.length
     }
   },
 )
@@ -181,10 +180,13 @@ defineExpose({
                 :index="index"
                 :search-query="searchQuery"
                 :class="
-                  !suppressAnimation && 'motion-safe:animate-fade-in motion-safe:animate-fill-both'
+                  index >= newSearchBatchSize &&
+                  'motion-safe:animate-fade-in motion-safe:animate-fill-both'
                 "
                 :style="
-                  !suppressAnimation ? { animationDelay: `${Math.min(index * 0.02, 0.3)}s` } : {}
+                  index >= newSearchBatchSize
+                    ? { animationDelay: `${Math.min((index - newSearchBatchSize) * 0.02, 0.3)}s` }
+                    : {}
                 "
                 :filters="filters"
                 @click-keyword="emit('clickKeyword', $event)"
@@ -237,9 +239,14 @@ defineExpose({
             :index="index"
             :search-query="searchQuery"
             :class="
-              !suppressAnimation && 'motion-safe:animate-fade-in motion-safe:animate-fill-both'
+              index >= newSearchBatchSize &&
+              'motion-safe:animate-fade-in motion-safe:animate-fill-both'
+            "
+            :style="
+              index >= newSearchBatchSize
+                ? { animationDelay: `${Math.min((index - newSearchBatchSize) * 0.02, 0.3)}s` }
+                : {}
             "
-            :style="!suppressAnimation ? { animationDelay: `${Math.min(index * 0.02, 0.3)}s` } : {}"
             :filters="filters"
             @click-keyword="emit('clickKeyword', $event)"
           />

From 65885cb1c5813b8e95d89fb08295e51ddf19110b Mon Sep 17 00:00:00 2001
From: Atriiy <ShroXdF@gmail.com>
Date: Tue, 17 Mar 2026 14:51:38 +0800
Subject: [PATCH 7/8] fix: disable claim button during fetching

---
 app/pages/search.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/pages/search.vue b/app/pages/search.vue
index 5d7ed2a1ed..89b2165bab 100644
--- a/app/pages/search.vue
+++ b/app/pages/search.vue
@@ -752,7 +752,8 @@ onBeforeUnmount(() => {
             </div>
             <button
               type="button"
-              class="shrink-0 px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md motion-safe:transition-colors motion-safe:duration-200 hover:bg-fg/90 focus-visible:outline-accent/70"
+              class="shrink-0 px-4 py-2 font-mono text-sm text-bg bg-fg rounded-md motion-safe:transition-[color,background-color,opacity] motion-safe:duration-200 hover:bg-fg/90 focus-visible:outline-accent/70 disabled:opacity-85 disabled:cursor-not-allowed"
+              :disabled="status === 'pending'"
               @click="claimPackageModalRef?.open()"
             >
               {{ $t('search.claim_button', { name: query }) }}

From 5e8082424804b8ae38c009cdd906dd726de0c359 Mon Sep 17 00:00:00 2001
From: Atriiy <ShroXdF@gmail.com>
Date: Thu, 19 Mar 2026 17:09:48 +0800
Subject: [PATCH 8/8] chore: change search debounce to 100ms

---
 app/composables/useGlobalSearch.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/composables/useGlobalSearch.ts b/app/composables/useGlobalSearch.ts
index b6f38e2422..45bb478487 100644
--- a/app/composables/useGlobalSearch.ts
+++ b/app/composables/useGlobalSearch.ts
@@ -4,7 +4,7 @@ import { debounce } from 'perfect-debounce'
 // Pages that have their own local filter using ?q
 const pagesWithLocalFilter = new Set(['~username', 'org'])
 
-const SEARCH_DEBOUNCE_MS = 250
+const SEARCH_DEBOUNCE_MS = 100
 
 export function useGlobalSearch(place: 'header' | 'content' = 'content') {
   const { settings } = useSettings()