Throttle search to not spam requests (#4893)

* Throttle search to not spam requests

* lint

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()"
 				/>
-				<Button v-if="query" class="r-btn" @click="() => (query = '')">
+				<Button
+					v-if="query"
+					class="r-btn"
+					@click="
+						() => {
+							query = ''
+							updateSearchResults()
+						}
+					"
+				>
 					<XIcon />
 				</Button>
 			</div>