From a53d71b57fb7f2d43f945305831d42f2d377c6cb Mon Sep 17 00:00:00 2001
From: erinz2020 <erinz2020@gmail.com>
Date: Fri, 6 Dec 2024 20:08:03 +0000
Subject: [PATCH] add debounce to reduce db requests

---
 assets/js/main.js | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/assets/js/main.js b/assets/js/main.js
index 40ab8e3..6018d3e 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -521,10 +521,30 @@ $('button#clearSearchInput').on('click',function(e){
 
  $('#tasksPage .datepicker').datepicker();
 
+ function debounce(fn, delay, immediate = false) {
+  let timer;
 
-// Handle image selection modal
-$("form#imageSelectionForm input").on("input", async (e) => {
+  return function (...args) {
+    const callNow = immediate && !timer;
+
+    clearTimeout(timer);
+
+    timer = setTimeout(() => {
+      timer = null;
+      if (!immediate) fn.apply(this, args);
+    }, delay);
+
+    if (callNow) fn.apply(this, args);
+  };
+}
+
+const debouncedImageSelectionFormChange = debounce(async () => {
   await imageSelectionFormChange();
+}, 1000); 
+
+// Handle image selection modal
+$("form#imageSelectionForm input").on("input", (e) => {
+  debouncedImageSelectionFormChange();
 });
 $("form#imageSelectionForm select").on("input", async (e) => {
   await imageSelectionFormChange();