add a continue typing indicator

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>