From e9fa50dfb5ea7e465fc2ca6d640401ba4fe7fa05 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Samy=20Pess=C3=A9?= <samypesse@gmail.com>
Date: Wed, 26 Mar 2025 11:18:18 +0100
Subject: [PATCH] Trim search query before doing search (#3042)

---
 .changeset/wise-dryers-nail.md                         | 5 +++++
 packages/gitbook/src/components/Search/SearchModal.tsx | 9 +++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/wise-dryers-nail.md

diff --git a/.changeset/wise-dryers-nail.md b/.changeset/wise-dryers-nail.md
new file mode 100644
index 000000000..489e32acd
--- /dev/null
+++ b/.changeset/wise-dryers-nail.md
@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Trim the search query to avoid showing a loading state when typing
diff --git a/packages/gitbook/src/components/Search/SearchModal.tsx b/packages/gitbook/src/components/Search/SearchModal.tsx
index d181393b6..bdc747241 100644
--- a/packages/gitbook/src/components/Search/SearchModal.tsx
+++ b/packages/gitbook/src/components/Search/SearchModal.tsx
@@ -189,6 +189,9 @@ function SearchModalBody(
         setSearchState((state) => (state ? { ...state, ask: true } : null));
     };
 
+    // We trim the query to avoid invalidating the search when the user is typing between words.
+    const normalizedQuery = state.query.trim();
+
     return (
         <motion.div
             transition={{
@@ -288,12 +291,14 @@ function SearchModalBody(
                 <SearchResults
                     ref={resultsRef}
                     global={isMultiVariants && state.global}
-                    query={state.query}
+                    query={normalizedQuery}
                     withAsk={withAsk}
                     onSwitchToAsk={onSwitchToAsk}
                 />
             ) : null}
-            {state.query && state.ask && withAsk ? <SearchAskAnswer query={state.query} /> : null}
+            {normalizedQuery && state.ask && withAsk ? (
+                <SearchAskAnswer query={normalizedQuery} />
+            ) : null}
         </motion.div>
     );
 }