add a continue typing indicator
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m6s

This commit is contained in:
Lee 2024-04-21 02:38:16 +01:00
parent cb6814d47b
commit 4b336e4456

@ -11,6 +11,7 @@ export function Search(): ReactElement {
* The pages that were found * The pages that were found
*/ */
const [pages, setPages] = useState<DocsContentMetadata[] | undefined>(undefined); const [pages, setPages] = useState<DocsContentMetadata[] | undefined>(undefined);
const [continueTyping, setContinueTyping] = useState<boolean>(false);
/** /**
* Search the documentation * Search the documentation
@ -21,6 +22,11 @@ export function Search(): ReactElement {
async function searchDocs(query: string): Promise<void> { async function searchDocs(query: string): Promise<void> {
// Don't bother searching if the query is less than 3 characters // Don't bother searching if the query is less than 3 characters
if (query.length < 3) { if (query.length < 3) {
if (query.length > 0) {
setContinueTyping(true);
} else {
setContinueTyping(false);
}
return setPages(undefined); return setPages(undefined);
} }
@ -43,9 +49,11 @@ export function Search(): ReactElement {
type="text" type="text"
placeholder="Query..." placeholder="Query..."
className="w-full p-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:border-ring" 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} /> <DocumentationPages pages={pages} />
</DialogContent> </DialogContent>
</Dialog> </Dialog>