fix: race condition on web worker

src/pages/apps/SearchPage.tsx

@@ -16,9 +16,8 @@ export const Component: FC = () => {
     setLoading(true);
 
     SearchService.query(search)
-      .then((apps) => {
-        setFilteredApps(apps);
-      })
+      .then((apps) => setFilteredApps(apps))
+      .catch(() => console.log('debounced...'))
       .finally(() => {
         setLoading(false);
       });

src/service/search.ts

@@ -1,12 +1,18 @@
 import type { App } from '@/types';
 import SearchWorker from '@/workers/search.worker?worker';
 
-const worker: Worker = new SearchWorker();
+let previousWorker: Worker;
 
 export class SearchService {
   static async query(value: string): Promise<App[]> {
-    return new Promise((resolve) => {
-      worker.addEventListener(
+    if (previousWorker) {
+      previousWorker.terminate();
+    }
+
+    previousWorker = new SearchWorker();
+
+    return new Promise((resolve, reject) => {
+      previousWorker.addEventListener(
         'message',
         (event) => {
           resolve(event.data);
@@ -16,7 +22,15 @@ export class SearchService {
         }
       );
 
-      worker.postMessage(value);
+      // There's almost certainly a better way of doing this, but I don't have time to figure it out atm.
+      ((terminate) => {
+        previousWorker.terminate = function () {
+          terminate.apply(previousWorker);
+          reject('Interupting due to new call');
+        };
+      })(previousWorker.terminate);
+
+      previousWorker.postMessage(value);
     });
   }
 }