From 004787d5bdea9696df63886f2f3ca61ebc6708fe Mon Sep 17 00:00:00 2001
From: Lu Wilson <l2wilson94@gmail.com>
Date: Fri, 23 Jun 2023 10:57:57 +0100
Subject: [PATCH] [docs] Add feedback when you search (#1633)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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:

![2023-06-22 at 12 17 34 - Fuchsia
Fowl](https://github.com/tldraw/tldraw/assets/15892272/da3b3d7f-fc6a-49f9-9352-58949ca917d5)

## After
![2023-06-22 at 13 09 26 - Turquoise
Cat](https://github.com/tldraw/tldraw/assets/15892272/9e44061a-c4b9-43d2-8b8f-e1c4dce60c48)


## 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.
---
 apps/docs/components/Search.tsx | 4 ++++
 apps/docs/styles/globals.css    | 5 +++++
 2 files changed, 9 insertions(+)

diff --git a/apps/docs/components/Search.tsx b/apps/docs/components/Search.tsx
index ea34b4686..bc1697b04 100644
--- a/apps/docs/components/Search.tsx
+++ b/apps/docs/components/Search.tsx
@@ -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 && (
diff --git a/apps/docs/styles/globals.css b/apps/docs/styles/globals.css
index 1557393df..0f1fdace5 100644
--- a/apps/docs/styles/globals.css
+++ b/apps/docs/styles/globals.css
@@ -653,6 +653,11 @@ body {
 	background: none;
 }
 
+.search__input:disabled {
+	background-color: var(--color-tint-1);
+	color: var(--color-tint-5);
+}
+
 .search__input::placeholder {
 	color: var(--color-tint-4);
 }