Update demo with debouncing

ellenhp · Feb 11, 2024 · 82aa152 · 82aa152
1 parent a28472c
commit 82aa152
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 9 deletions.
diff --git a/airmail_site/package.json b/airmail_site/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@types/maplibre-gl": "^1.14.0",
     "maplibre-gl": "^4.0.0",
+    "p-debounce": "^4.0.0",
     "vue": "^3.3.4",
     "vue-material-design-icons": "^5.3.0",
     "vuetify": "^3.5.3"

diff --git a/airmail_site/src/components/Demo.vue b/airmail_site/src/components/Demo.vue
@@ -1,14 +1,18 @@
 <script setup>
 import Map from "./Map.vue";
 import { ref } from 'vue'
+import pDebounce from 'p-debounce';
 
 const heading = "Demo";
-const totalMembers = "50";
-const totalTeam = "20";
 
 const pins = ref([])
+const latestSearchSeq = ref(0)
+const latestResultSeq = ref(0)
+
+const debouncedSearch = pDebounce(fetchSearchResults, 500);
 
 async function fetchSearchResults(query) {
+  const seq = ++latestSearchSeq.value;
   if (query.length < 3) {
     pins.value = [];
     return;
@@ -25,7 +29,12 @@ async function fetchSearchResults(query) {
       },
     };
   });
-  pins.value = newPins;
+  if (seq > latestResultSeq.value) {
+    latestResultSeq.value = seq;
+    pins.value = newPins;
+  } else {
+    return;
+  }
 }
 
 </script>
@@ -46,12 +55,7 @@ async function fetchSearchResults(query) {
           </p>
         </div>
         <v-text-field class="searchbar" label="Search" @input="async (event) => {
-          console.log(event);
-          const value = event.target.value;
-          if (value.length < 3) {
-            return;
-          }
-          const results = await fetchSearchResults(value);
+          await debouncedSearch(event.target.value);
         }"></v-text-field>
         <Map :pins=pins />
 

diff --git a/airmail_site/yarn.lock b/airmail_site/yarn.lock
@@ -735,6 +735,11 @@ csstype@^3.1.3:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
+debounce@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/debounce/-/debounce-2.0.0.tgz#b2f914518a1481466f4edaee0b063e4d473ad549"
+  integrity sha512-xRetU6gL1VJbs85Mc4FoEGSjQxzpdxRyFhe3lmWFyy2EzydIcD4xzUvRJMD+NPDfMwKNhxa3PvsIOU32luIWeA==
+
 debug@^4.1.0, debug@^4.3.1, debug@^4.3.3:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
@@ -1009,6 +1014,11 @@ node-releases@^2.0.14:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.14.tgz#2ffb053bceb8b2be8495ece1ab6ce600c4461b0b"
   integrity sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==
 
+p-debounce@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/p-debounce/-/p-debounce-4.0.0.tgz#348e3f44489baa9435cc7d807f17b3bb2fb16b24"
+  integrity sha512-4Ispi9I9qYGO4lueiLDhe4q4iK5ERK8reLsuzH6BPaXn53EGaua8H66PXIFGrW897hwjXp+pVLrm/DLxN0RF0A==
+
 pbf@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/pbf/-/pbf-3.2.1.tgz#b4c1b9e72af966cd82c6531691115cc0409ffe2a"