Added debounce to the filter input field

allenta · Jan 27, 2025 · f0e1511 · f0e1511
1 parent a477719
commit f0e1511
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/assets/webpack/src/js/helpers.js b/assets/webpack/src/js/helpers.js
@@ -1,5 +1,14 @@
 import Toast from 'bootstrap/js/dist/toast';
 
+export function debounce(func, wait) {
+  let timeout;
+  return function(...args) {
+    const context = this;
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func.apply(context, args), wait);
+  };
+}
+
 /******************************************************************************
  * DATES.
  ******************************************************************************/

diff --git a/assets/webpack/src/js/index.js b/assets/webpack/src/js/index.js
@@ -158,7 +158,7 @@ function setUpEventListeners() {
   // On change in the filter, verbosity or columns widgets, update the search
   // results accordingly. This is a lightweight operation, as it only adjusts
   // the visibility and arranging of the charts and clusters already fetched.
-  document.getElementById('filter').addEventListener('input', updateSearchResults);
+  document.getElementById('filter').addEventListener('input', helpers.debounce(updateSearchResults, 500));
   document.getElementById('verbosity').addEventListener('change', updateSearchResults);
   document.getElementById('columns').addEventListener('change', updateSearchResults);