Added Debouncing to search in Forms, Users, and APIs tables

Author: RyanBirtch-aot

app/frontend/src/components/admin/AdminAPIsTable.vue

@@ -176,12 +176,17 @@ async function updateOptions(options) {
   firstDataLoad.value = false;
 }
 
-async function handleSearch(value) {
+const debouncedSearch = _.debounce(async (value) => {
   search.value = value;
+  await getApis();
+}, debounceTime.value);
+
+async function handleSearch(value) {
   if (value === '') {
+    search.value = value;
     await getApis();
   } else {
-    debounceInput.value();
+    debouncedSearch(value);
   }
 }
 </script>

app/frontend/src/components/admin/AdminFormsTable.vue

@@ -11,11 +11,12 @@ const { t, locale } = useI18n({ useScope: 'global' });
 
 const showDeleted = ref(false);
 const loading = ref(false);
+const inputValue = ref('');
 const search = ref('');
 const firstDataLoad = ref(true);
 const forceTableRefresh = ref(0);
 const debounceInput = ref(null);
-const debounceTime = ref(300);
+const debounceTime = ref(500);
 const currentPage = ref(1);
 const itemsPP = ref(10);
 
@@ -90,12 +91,18 @@ async function updateOptions(options) {
   }
   firstDataLoad.value = false;
 }
-async function handleSearch(value) {
+
+const debouncedSearch = _.debounce(async (value) => {
   search.value = value;
+  await refreshForms();
+}, debounceTime.value);
+
+async function handleSearch(value) {
   if (value === '') {
+    search.value = value;
     await refreshForms();
   } else {
-    debounceInput.value();
+    debouncedSearch(value);
   }
 }
 </script>
@@ -126,7 +133,7 @@ async function handleSearch(value) {
           :class="isRTL ? 'float-left' : 'float-right'"
         >
           <v-text-field
-            v-model="search"
+            v-model="inputValue"
             density="compact"
             variant="underlined"
             :lang="locale"

app/frontend/src/components/admin/AdminUsersTable.vue

@@ -75,12 +75,17 @@ async function updateOptions(options) {
   firstDataLoad.value = false;
 }
 
-async function handleSearch(value) {
+const debouncedSearch = _.debounce(async (value) => {
   search.value = value;
+  await refreshUsers();
+}, debounceTime.value);
+
+async function handleSearch(value) {
   if (value === '') {
+    search.value = value;
     await refreshUsers();
   } else {
-    debounceInput.value();
+    debouncedSearch(value);
   }
 }