feat: throttle input keydown events

Author: velut

bun.lock

@@ -20,6 +20,7 @@
         "fuse.js": "^7.1.0",
         "hosted-git-info": "^8.1.0",
         "jsdom": "^26.1.0",
+        "lodash-es": "^4.17.21",
         "marked": "^15.0.12",
         "new-github-issue-url": "^1.1.0",
         "pathe": "^2.0.3",
@@ -45,6 +46,7 @@
         "@types/dompurify": "^3.2.0",
         "@types/hosted-git-info": "^3.0.5",
         "@types/jsdom": "^21.1.7",
+        "@types/lodash-es": "^4.17.12",
         "@types/node": "^22.15.21",
         "@types/validate-npm-package-name": "^4.0.2",
         "@vitest/coverage-v8": "^3.1.4",
@@ -574,6 +576,10 @@
 
     "@types/jsdom": ["@types/jsdom@21.1.7", "", { "dependencies": { "@types/node": "*", "@types/tough-cookie": "*", "parse5": "^7.0.0" } }, "sha512-yOriVnggzrnQ3a9OKOCxaVuSug3w3/SbOj5i7VwXWZEyUNl3bLF9V3MfxGbZKuwqJOQyRfqXyROBB1CoZLFWzA=="],
 
+    "@types/lodash": ["@types/lodash@4.17.17", "", {}, "sha512-RRVJ+J3J+WmyOTqnz3PiBLA501eKwXl2noseKOrNo/6+XEHjTAxO4xHvxQB6QuNm+s4WRbn6rSiap8+EA+ykFQ=="],
+
+    "@types/lodash-es": ["@types/lodash-es@4.17.12", "", { "dependencies": { "@types/lodash": "*" } }, "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ=="],
+
     "@types/mdast": ["@types/mdast@4.0.4", "", { "dependencies": { "@types/unist": "*" } }, "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA=="],
 
     "@types/ms": ["@types/ms@2.1.0", "", {}, "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA=="],
@@ -1052,6 +1058,8 @@
 
     "lodash": ["lodash@4.17.21", "", {}, "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="],
 
+    "lodash-es": ["lodash-es@4.17.21", "", {}, "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw=="],
+
     "lodash.castarray": ["lodash.castarray@4.4.0", "", {}, "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q=="],
 
     "lodash.get": ["lodash.get@4.4.2", "", {}, "sha512-z+Uw/vLuy6gQe8cfaFWD7p0wVv8fJl3mbzXh33RS+0oW2wvUqiRXiQ69gLWSLpgB5/6sU+r6BlQR0MBILadqTQ=="],

package.json

@@ -33,6 +33,7 @@
 		"fuse.js": "^7.1.0",
 		"hosted-git-info": "^8.1.0",
 		"jsdom": "^26.1.0",
+		"lodash-es": "^4.17.21",
 		"marked": "^15.0.12",
 		"new-github-issue-url": "^1.1.0",
 		"pathe": "^2.0.3",
@@ -58,6 +59,7 @@
 		"@types/dompurify": "^3.2.0",
 		"@types/hosted-git-info": "^3.0.5",
 		"@types/jsdom": "^21.1.7",
+		"@types/lodash-es": "^4.17.12",
 		"@types/node": "^22.15.21",
 		"@types/validate-npm-package-name": "^4.0.2",
 		"@vitest/coverage-v8": "^3.1.4",

src/components/NpmPackageSearch.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { throttle } from "lodash-es";
 	import { resource, useMutationObserver, watch } from "runed";
 	import LucideLoaderCircle from "~icons/lucide/loader-circle";
 	import LucideSearch from "~icons/lucide/search";
@@ -78,7 +79,7 @@
 		}
 	}
 
-	function handleInputKeydown(event: KeyboardEvent) {
+	let handleInputKeydown = throttle((event: KeyboardEvent) => {
 		switch (event.key) {
 			case "ArrowUp":
 				event.preventDefault();
@@ -93,7 +94,7 @@
 				useResult();
 				return;
 		}
-	}
+	}, 25);
 
 	function prevResult() {
 		resultsCursor = mod(resultsCursor - 1, results.current.length);