add a continue typing indicator
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m6s
All checks were successful
Deploy App / docker (ubuntu-latest) (push) Successful in 1m6s
This commit is contained in:
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>
|
||||||
|
Loading…
Reference in New Issue
Block a user