From 39981ff794ead86f43dd080394090dfade890727 Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Wed, 18 Oct 2023 12:10:57 +0200
Subject: [PATCH] Add debounce to user search field

---
 frontend/src/lib/forms/Input.svelte           | 22 ++++++++++++++-----
 frontend/src/lib/util/time.ts                 |  9 ++++++++
 .../routes/(authenticated)/admin/+page.svelte |  2 +-
 3 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/frontend/src/lib/forms/Input.svelte b/frontend/src/lib/forms/Input.svelte
index 7e0ad4ff8..859fa6269 100644
--- a/frontend/src/lib/forms/Input.svelte
+++ b/frontend/src/lib/forms/Input.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { randomFieldId } from './utils';
   import FormField from './FormField.svelte';
+  import { debounce as _debounce } from '$lib/util/time';
 
   export let id = randomFieldId();
   export let label: string;
@@ -14,20 +15,29 @@
   // Despite the compatibility table, 'new-password' seems to work well in Chrome, Edge & Firefox
   // https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#browser_compatibility
   export let autocomplete: 'new-password' | undefined = undefined;
+  export let debounce: number | boolean = false;
+
+  const DEFAULT_DEBOUNCE_TIME = 400;
+  $: debounceTime = typeof debounce === 'number' ? debounce : DEFAULT_DEBOUNCE_TIME;
+  $: valueSetter = debounce
+    ? _debounce((newValue: string) => value = newValue, debounceTime)
+    : (newValue: string) => value = newValue;
+
+  function onInput(event: Event): void {
+    const newValue = (event.target as HTMLInputElement).value;
+    valueSetter(newValue);
+  }
 </script>
 
 <!-- https://daisyui.com/components/input -->
 <FormField {id} {error} {label} {autofocus} {description}>
   <!-- svelte-ignore a11y-autofocus -->
-  <!--
-    {...{type}} prevents a Svelte compile error (https://github.com/sveltejs/svelte/issues/3921)
-    and is perfectly safe, because we limit the type to string values
-  -->
   <input
     {id}
-    {...{ type }}
-    bind:value
+    {type}
+    {value}
     class:input-error={error}
+    on:input={onInput}
     {placeholder}
     class="input input-bordered"
     {readonly}
diff --git a/frontend/src/lib/util/time.ts b/frontend/src/lib/util/time.ts
index acef665b6..ad74a7514 100644
--- a/frontend/src/lib/util/time.ts
+++ b/frontend/src/lib/util/time.ts
@@ -7,3 +7,12 @@ export const enum Duration {
 export async function delay<T>(ms = Duration.Default): Promise<T> {
   return new Promise<T>(resolve => setTimeout(resolve, ms));
 }
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function debounce<P extends any[]>(fn: (...args: P) => void, debounceTime: number): (...args: P) => void {
+  let timeout: ReturnType<typeof setTimeout>;
+  return (...args: P) => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => fn(...args), debounceTime);
+  };
+}
diff --git a/frontend/src/routes/(authenticated)/admin/+page.svelte b/frontend/src/routes/(authenticated)/admin/+page.svelte
index 6640a6c72..933c7ee40 100644
--- a/frontend/src/routes/(authenticated)/admin/+page.svelte
+++ b/frontend/src/routes/(authenticated)/admin/+page.svelte
@@ -90,7 +90,7 @@
           </span>
         </Badge>
       </span>
-      <Input label="" placeholder={$t('admin_dashboard.filter_placeholder')} bind:value={$queryParamValues.userSearch} />
+      <Input label="" placeholder={$t('admin_dashboard.filter_placeholder')} bind:value={$queryParamValues.userSearch} debounce />
 
       <div class="divider" />
       <div class="overflow-x-auto">