From 79b7d269b03eef013bc1c8b4964331632a4035f7 Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Thu, 11 Dec 2025 13:03:10 -0800
Subject: [PATCH] Throttle search to not spam requests (#4893)

* Throttle search to not spam requests

* lint
---
 .../src/pages/discover/[type]/index.vue         | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/apps/frontend/src/pages/discover/[type]/index.vue b/apps/frontend/src/pages/discover/[type]/index.vue
index c3c4a9d1..67b600c6 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()"
 				/>
-				<Button v-if="query" class="r-btn" @click="() => (query = '')">
+				<Button
+					v-if="query"
+					class="r-btn"
+					@click="
+						() => {
+							query = ''
+							updateSearchResults()
+						}
+					"
+				>
 					<XIcon />
 				</Button>
 			</div>