From 4b336e4456da71fbc4eb307dd285bf5e8c9d840d Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Sun, 21 Apr 2024 02:38:16 +0100
Subject: [PATCH] add a continue typing indicator

---
 src/app/components/docs/search.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/app/components/docs/search.tsx b/src/app/components/docs/search.tsx
index ca79ed8..dc4a5c4 100644
--- a/src/app/components/docs/search.tsx
+++ b/src/app/components/docs/search.tsx
@@ -11,6 +11,7 @@ export function Search(): ReactElement {
    * The pages that were found
    */
   const [pages, setPages] = useState<DocsContentMetadata[] | undefined>(undefined);
+  const [continueTyping, setContinueTyping] = useState<boolean>(false);
 
   /**
    * Search the documentation
@@ -21,6 +22,11 @@ export function Search(): ReactElement {
   async function searchDocs(query: string): Promise<void> {
     // Don't bother searching if the query is less than 3 characters
     if (query.length < 3) {
+      if (query.length > 0) {
+        setContinueTyping(true);
+      } else {
+        setContinueTyping(false);
+      }
       return setPages(undefined);
     }
 
@@ -43,9 +49,11 @@ export function Search(): ReactElement {
               type="text"
               placeholder="Query..."
               className="w-full p-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:border-ring"
-              onChange={e => searchDocs(e.target.value)}
+              onChange={event => searchDocs(event.target.value)}
             />
 
+            {!pages && continueTyping && <p>Continue typing...</p>}
+
             <DocumentationPages pages={pages} />
           </DialogContent>
         </Dialog>