fix: debounce navigation to the search page (#293)

Author: iiio2

app/components/AppHeader.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { debounce } from 'perfect-debounce'
+
 withDefaults(
   defineProps<{
     showLogo?: boolean
@@ -22,13 +24,17 @@ const showSearchBar = computed(() => {
   return route.name !== 'search' && route.name !== 'index'
 })
 
-async function handleSearchInput() {
+const debouncedNavigate = debounce(async () => {
   const query = searchQuery.value.trim()
   await router.push({
     name: 'search',
     query: query ? { q: query } : undefined,
   })
   searchQuery.value = ''
+}, 100)
+
+async function handleSearchInput() {
+  debouncedNavigate()
 }
 
 onKeyStroke(',', e => {

app/pages/index.vue

@@ -1,14 +1,20 @@
 <script setup lang="ts">
+import { debounce } from 'perfect-debounce'
+
 const router = useRouter()
 const searchQuery = ref('')
 const searchInputRef = useTemplateRef('searchInputRef')
 const { focused: isSearchFocused } = useFocus(searchInputRef)
 
-function handleSearch() {
+const debouncedNavigate = debounce(() => {
   router.push({
     path: '/search',
     query: searchQuery.value.trim() ? { q: searchQuery.value.trim() } : undefined,
   })
+}, 250)
+
+function handleSearch() {
+  debouncedNavigate()
 }
 
 useSeoMeta({