forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: debounce navigation to the search page (#293)
+14
-2
+7
-1
app/components/AppHeader.vue
+7
-1
app/components/AppHeader.vue
···
1
1
<script setup lang="ts">
2
+
import { debounce } from 'perfect-debounce'
3
+
2
4
withDefaults(
3
5
defineProps<{
4
6
showLogo?: boolean
···
22
24
return route.name !== 'search' && route.name !== 'index'
23
25
})
24
26
25
-
async function handleSearchInput() {
27
+
const debouncedNavigate = debounce(async () => {
26
28
const query = searchQuery.value.trim()
27
29
await router.push({
28
30
name: 'search',
29
31
query: query ? { q: query } : undefined,
30
32
})
31
33
searchQuery.value = ''
34
+
}, 100)
35
+
36
+
async function handleSearchInput() {
37
+
debouncedNavigate()
32
38
}
33
39
34
40
onKeyStroke(',', e => {
+7
-1
app/pages/index.vue
+7
-1
app/pages/index.vue
···
1
1
<script setup lang="ts">
2
+
import { debounce } from 'perfect-debounce'
3
+
2
4
const router = useRouter()
3
5
const searchQuery = ref('')
4
6
const searchInputRef = useTemplateRef('searchInputRef')
5
7
const { focused: isSearchFocused } = useFocus(searchInputRef)
6
8
7
-
function handleSearch() {
9
+
const debouncedNavigate = debounce(() => {
8
10
router.push({
9
11
path: '/search',
10
12
query: searchQuery.value.trim() ? { q: searchQuery.value.trim() } : undefined,
11
13
})
14
+
}, 250)
15
+
16
+
function handleSearch() {
17
+
debouncedNavigate()
12
18
}
13
19
14
20
useSeoMeta({