From 549a4d852c7615c81b255bacc72cff51168775d0 Mon Sep 17 00:00:00 2001
From: Amr Bashir <amr.bashir2015@gmail.com>
Date: Mon, 14 Oct 2024 14:07:58 +0300
Subject: [PATCH] feat: add `debounceDuration` option (#165)

closes #153
---
 .changes/debounce-duration.md |  5 +++++
 src/DocSearch.tsx             | 13 +++++++++++++
 src/DocSearchModal.tsx        |  6 +++++-
 3 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 .changes/debounce-duration.md

diff --git a/.changes/debounce-duration.md b/.changes/debounce-duration.md
new file mode 100644
index 0000000..5bdfea0
--- /dev/null
+++ b/.changes/debounce-duration.md
@@ -0,0 +1,5 @@
+---
+"meilisearch-docsearch": "minor"
+---
+
+Add `debounceDuration` option to set debouce duration or disable it.
diff --git a/src/DocSearch.tsx b/src/DocSearch.tsx
index 55a4df0..ce9c789 100644
--- a/src/DocSearch.tsx
+++ b/src/DocSearch.tsx
@@ -26,6 +26,19 @@ export interface DocSearchProps {
   translations?: DocSearchTranslations;
   searchParams?: SearchParams;
   environment?: typeof window;
+  /**
+   * Duration to wait between keystores to determine whether a search should happen or not.
+   * Defaults to `200`.
+   *
+   * Set to `false` to disable debouncing.
+   *
+   * This is an optimization that discards unnecessary search operations, for example,
+   * if a user is typing `hello`, we skip search operations for `h`, `he`, `hel` and `hell`
+   * as this usually not what the user wants to search for, and instead wait a few milliseconds until
+   * the user stops typing for a brief moment, and then we do the search operation.
+   * In the previous example, that would be `hello`.
+   */
+  debounceDuration?: number | false;
 }
 
 export type DocSearchTranslations = Partial<{
diff --git a/src/DocSearchModal.tsx b/src/DocSearchModal.tsx
index 9ce2bd0..2db03ae 100644
--- a/src/DocSearchModal.tsx
+++ b/src/DocSearchModal.tsx
@@ -62,6 +62,7 @@ export const DocSearchModal: Component<DocSearchModalProps> = ({
   clientAgents,
   searchParams,
   environment = window,
+  debounceDuration = 200,
   translations = {},
   onClose,
   initialQuery,
@@ -200,7 +201,10 @@ export const DocSearchModal: Component<DocSearchModalProps> = ({
         setHitsCategories(catgeories);
       });
   }
-  const debouncedSearch = utils.debounce(search, 100);
+
+  const debouncedSearch = !debounceDuration
+    ? search
+    : utils.debounce(search, debounceDuration);
 
   if (initialQuery) {
     onMount(() => {