From 59537f8f1b0c03276b9a9fb774c86ab7b87c8dff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nguy=E1=BB=85n=20Ho=C3=A0ng=20=C4=90=E1=BB=A9c?=
 <lazyc97@protonmail.com>
Date: Fri, 26 Apr 2024 13:00:06 +0700
Subject: [PATCH] fix(web): add debounce to location search (#9074)

---
 .../shared-components/change-location.svelte  | 42 ++++++++++++-------
 web/src/lib/constants.ts                      |  2 +
 2 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/web/src/lib/components/shared-components/change-location.svelte b/web/src/lib/components/shared-components/change-location.svelte
index 8e07409b36..57b2aabb49 100644
--- a/web/src/lib/components/shared-components/change-location.svelte
+++ b/web/src/lib/components/shared-components/change-location.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte';
   import ConfirmDialogue from './confirm-dialogue.svelte';
-  import { timeBeforeShowLoadingSpinner } from '$lib/constants';
+  import { timeDebounceOnSearch } from '$lib/constants';
   import { handleError } from '$lib/utils/handle-error';
 
   import { clickOutside } from '$lib/utils/click-outside';
@@ -22,7 +22,7 @@
   let places: PlacesResponseDto[] = [];
   let suggestedPlaces: PlacesResponseDto[] = [];
   let searchWord: string;
-  let isSearching = false;
+  let latestSearchTimeout: number;
   let showSpinner = false;
   let suggestionContainer: HTMLDivElement;
   let hideSuggestion = false;
@@ -66,24 +66,34 @@
     return `${name}${admin1Name ? ', ' + admin1Name : ''}${admin2Name ? ', ' + admin2Name : ''}`;
   };
 
-  const handleSearchPlaces = async () => {
-    if (searchWord === '' || isSearching) {
+  const handleSearchPlaces = () => {
+    if (searchWord === '') {
       return;
     }
 
-    // TODO: refactor setTimeout/clearTimeout logic - there are no less than 12 places that duplicate this code
-    isSearching = true;
-    const timeout = setTimeout(() => (showSpinner = true), timeBeforeShowLoadingSpinner);
-    try {
-      places = await searchPlaces({ name: searchWord });
-    } catch (error) {
-      places = [];
-      handleError(error, "Can't search places");
-    } finally {
-      clearTimeout(timeout);
-      isSearching = false;
-      showSpinner = false;
+    if (latestSearchTimeout) {
+      clearTimeout(latestSearchTimeout);
     }
+    showSpinner = true;
+    const searchTimeout = window.setTimeout(() => {
+      searchPlaces({ name: searchWord })
+        .then((searchResult) => {
+          // skip result when a newer search is happening
+          if (latestSearchTimeout === searchTimeout) {
+            places = searchResult;
+            showSpinner = false;
+          }
+        })
+        .catch((error) => {
+          // skip error when a newer search is happening
+          if (latestSearchTimeout === searchTimeout) {
+            places = [];
+            handleError(error, "Can't search places");
+            showSpinner = false;
+          }
+        });
+    }, timeDebounceOnSearch);
+    latestSearchTimeout = searchTimeout;
   };
 
   const handleUseSuggested = (latitude: number, longitude: number) => {
diff --git a/web/src/lib/constants.ts b/web/src/lib/constants.ts
index 98d6d742d2..ec393a57b9 100644
--- a/web/src/lib/constants.ts
+++ b/web/src/lib/constants.ts
@@ -91,6 +91,8 @@ export const timeToLoadTheMap: number = 100;
 
 export const timeBeforeShowLoadingSpinner: number = 100;
 
+export const timeDebounceOnSearch: number = 300;
+
 // should be the same values as the ones in the app.html
 export enum Theme {
   LIGHT = 'light',