diff --git a/apps/frontend/src/pages/discover/[type]/index.vue b/apps/frontend/src/pages/discover/[type]/index.vue index c3c4a9d12..67b600c68 100644 --- a/apps/frontend/src/pages/discover/[type]/index.vue +++ b/apps/frontend/src/pages/discover/[type]/index.vue @@ -27,6 +27,7 @@ import { useSearch, } from '@modrinth/ui' import { capitalizeString, cycleValue, type Mod as InstallableMod } from '@modrinth/utils' +import { useThrottleFn } from '@vueuse/core' import { computed, type Reactive } from 'vue' import LogoAnimated from '~/components/brand/LogoAnimated.vue' @@ -274,6 +275,7 @@ const { return `${base}search${requestParams.value}` }, { + watch: false, transform: (hits) => { noLoad.value = false return hits as Labrinth.Search.v2.SearchResults @@ -331,6 +333,8 @@ watch([currentFilters], () => { updateSearchResults(1, false) }) +const throttledSearch = useThrottleFn(() => updateSearchResults(), 500, true) + function cycleSearchDisplayMode() { if (!resultsDisplayLocation.value) { // if no display location, abort @@ -517,9 +521,18 @@ useSeoMeta({ spellcheck="false" type="text" :placeholder="`Search ${projectType.display}s...`" - @input="updateSearchResults()" + @input="throttledSearch()" /> -