[docs] Add feedback when you search (#1633)
This PR adds some immediate feedback when you search on the docs site — so that you know that your query has been submitted. This is most noticeable on slower internet connections. But even on fast connections, search feels a bit untrustworthy because you don't get that immediate feedback. We could make a little loading spinner or something. But for now, I just disabled the search input when you submit it, because it didn't require any design work! ## Before No way of telling that the search results are loading. No immediate feedback:  ## After  ## Admin ### Change Type - [x] `documentation` — Changes to the documentation only[^2] [^1]: publishes a `patch` release, for devDependencies use `internal` [^2]: will not publish a new version ### Test Plan 1. Throttle your network tab! 2. Search for something on the docs site (eg: Editor) 3. The search input should get disabled when you press the Enter key. ### Release Notes - Documentation: Added some immediate feedback when you search.
This commit is contained in:
parent
c5fe399842
commit
004787d5bd
2 changed files with 9 additions and 0 deletions
|
@ -8,6 +8,7 @@ export function Search({ activeId }: { activeId: string | null }) {
|
|||
const [query, setQuery] = useState('')
|
||||
const [results, setResults] = useState<SearchResult[]>([])
|
||||
const rResultsList = useRef<HTMLOListElement>(null)
|
||||
const [isDisabled, setIsDisabled] = useState(false)
|
||||
|
||||
const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setQuery(e.target.value)
|
||||
|
@ -63,6 +64,7 @@ export function Search({ activeId }: { activeId: string | null }) {
|
|||
useEffect(() => {
|
||||
setQuery('')
|
||||
setResults([])
|
||||
setIsDisabled(false)
|
||||
}, [router.asPath])
|
||||
|
||||
const handleFocus = useCallback(() => {
|
||||
|
@ -74,6 +76,7 @@ export function Search({ activeId }: { activeId: string | null }) {
|
|||
const handleKeyDown = useCallback(
|
||||
(e: React.KeyboardEvent) => {
|
||||
if (e.key === 'Enter') {
|
||||
setIsDisabled(true)
|
||||
router.push(`/search-results?q=${rInput.current!.value}`)
|
||||
}
|
||||
},
|
||||
|
@ -96,6 +99,7 @@ export function Search({ activeId }: { activeId: string | null }) {
|
|||
autoCapitalize="off"
|
||||
autoComplete="off"
|
||||
autoCorrect="off"
|
||||
disabled={isDisabled}
|
||||
/>
|
||||
</div>
|
||||
{results.length > 0 && (
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue