feat: reduce watchers and timeouts

Author: MatteoGabriele

app/components/AppHeader.vue

@@ -33,27 +33,12 @@ function expandMobileSearch() {
   })
 }
 
-watch(
-  isOnSearchPage,
-  visible => {
-    if (!visible) return
-
-    searchBoxRef.value?.focus()
-    nextTick(() => {
-      searchBoxRef.value?.focus()
-    })
-  },
-  { flush: 'sync' },
-)
-
 function handleSearchBlur() {
   showFullSearch.value = false
-  // Collapse expanded search on mobile after blur (with delay for click handling)
+  // Collapse expanded search on mobile after blur
   // But don't collapse if we're on the search page
   if (isMobile.value && !isOnSearchPage.value) {
-    setTimeout(() => {
-      isSearchExpandedManually.value = false
-    }, 150)
+    isSearchExpandedManually.value = false
   }
 }
 

app/components/Header/SearchBox.vue

@@ -16,14 +16,12 @@ const emit = defineEmits(['blur', 'focus'])
 const router = useRouter()
 const route = useRoute()
 
-const isSearchFocused = shallowRef(false)
-
 const showSearchBar = computed(() => {
   return route.name !== 'index'
 })
 
 // Local input value (updates immediately as user types)
-const searchQuery = shallowRef(normalizeSearchParam(route.query.q))
+const searchQuery = shallowRef('')
 
 // Pages that have their own local filter using ?q
 const pagesWithLocalFilter = new Set(['~username', 'org'])
@@ -50,11 +48,6 @@ const updateUrlQuery = debounce((value: string) => {
   })
 }, 250)
 
-// Watch input and debounce URL updates
-watch(searchQuery, value => {
-  updateUrlQuery(value)
-})
-
 // Sync input with URL when navigating (e.g., back button)
 watch(
   () => route.query.q,
@@ -68,14 +61,18 @@ watch(
       searchQuery.value = value
     }
   },
+  { immediate: true },
 )
 
+// Watch input and debounce URL updates
+watch(searchQuery, value => {
+  updateUrlQuery(value)
+})
+
 function handleSearchBlur() {
-  isSearchFocused.value = false
   emit('blur')
 }
 function handleSearchFocus() {
-  isSearchFocused.value = true
   emit('focus')
 }
 
@@ -106,7 +103,7 @@ defineExpose({ focus })
         {{ $t('search.label') }}
       </label>
 
-      <div class="relative group" :class="{ 'is-focused': isSearchFocused }">
+      <div class="relative group">
         <div class="search-box relative flex items-center">
           <span
             class="absolute inset-is-3 text-fg-subtle font-mono text-sm pointer-events-none transition-colors duration-200 motion-reduce:transition-none [.group:hover:not(:focus-within)_&]:text-fg/80 group-focus-within:text-accent z-1"

app/pages/search.vue

@@ -32,15 +32,6 @@ const updateUrlPage = debounce((page: number) => {
 // The actual search query (from URL, used for API calls)
 const query = computed(() => normalizeSearchParam(route.query.q))
 
-// Track if page just loaded (for hiding "Searching..." during view transition)
-const hasInteracted = shallowRef(false)
-onMounted(() => {
-  // Small delay to let view transition complete
-  setTimeout(() => {
-    hasInteracted.value = true
-  }, 300)
-})
-
 // Infinite scroll / pagination state
 const pageSize = 25
 const currentPage = shallowRef(1)
@@ -168,8 +159,6 @@ function handleClearFilter(chip: FilterChip) {
 
 // Should we show the loading spinner?
 const showSearching = computed(() => {
-  // Don't show during initial page load (view transition)
-  if (!hasInteracted.value) return false
   // Show if pending and no results yet
   return status.value === 'pending' && displayResults.value.length === 0
 })
@@ -190,7 +179,6 @@ function handlePageChange(page: number) {
 // Reset page when query changes
 watch(query, () => {
   currentPage.value = 1
-  hasInteracted.value = true
 })
 
 // Check if current query could be a valid package name