From 53e740578ccb2a4c32e9fee05f6fc8c058386d26 Mon Sep 17 00:00:00 2001
From: Flo2410 <florian@hye.dev>
Date: Sat, 27 Jan 2024 21:25:47 +0000
Subject: [PATCH] Use `AbortController` to abort pending requests when search
 changes.

---
 src/components/quicklaunch.jsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/quicklaunch.jsx b/src/components/quicklaunch.jsx
index c5abf0c2..d38ef233 100644
--- a/src/components/quicklaunch.jsx
+++ b/src/components/quicklaunch.jsx
@@ -92,6 +92,8 @@ export default function QuickLaunch({
   }
 
   useEffect(() => {
+    const abortController = new AbortController();
+
     if (searchString.length === 0) setResults([]);
     else {
       let newResults = servicesAndBookmarks.filter((r) => {
@@ -117,7 +119,10 @@ export default function QuickLaunch({
 
         if (!hideSearchSuggestions && searchProvider.suggestionUrl) {
           if (searchString.trim() !== searchSuggestions[0]) {
-            fetch(`/api/searchSuggestion?query=${encodeURIComponent(searchString)}&providerName=${searchProvider.name}`)
+            fetch(
+              `/api/searchSuggestion?query=${encodeURIComponent(searchString)}&providerName=${searchProvider.name}`,
+              { signal: abortController.signal },
+            )
               .then(async (searchSuggestionResult) => {
                 const newSearchSuggestions = await searchSuggestionResult.json();
 
@@ -164,6 +169,10 @@ export default function QuickLaunch({
         setCurrentItemIndex(0);
       }
     }
+
+    return () => {
+      abortController.abort();
+    };
   }, [
     searchString,
     servicesAndBookmarks,