From 35e05c3676089453b6e677406ec829bca8a04c1d Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 30 Mar 2026 20:01:21 +0000
Subject: [PATCH] fix(kitchen-sink): only show "No results" after search is
 submitted

The "No results found" message was displayed immediately as the user
typed in the search box, before any search was performed. This made
the search appear broken. Gate the message on a hasSearched flag that
is only set when the form is actually submitted.

https://claude.ai/code/session_01Uk5GnRn3EsB5cjHoXW4m5U
---
 examples/kitchen-sink/app/page.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/examples/kitchen-sink/app/page.tsx b/examples/kitchen-sink/app/page.tsx
index 73ef8e0..b45c177 100644
--- a/examples/kitchen-sink/app/page.tsx
+++ b/examples/kitchen-sink/app/page.tsx
@@ -10,6 +10,7 @@ export default function Home() {
   >([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [hasSearched, setHasSearched] = useState(false);
 
   async function handleSearch(e: React.FormEvent) {
     e.preventDefault();
@@ -17,6 +18,7 @@ export default function Home() {
 
     setError(null);
     setLoading(true);
+    setHasSearched(true);
     try {
       const res = await fetch(
         `/api/search?q=${encodeURIComponent(query)}&fuzzy=true`,
@@ -86,7 +88,7 @@ export default function Home() {
           <p style={{ color: "red", marginTop: 12 }}>{error}</p>
         )}
 
-        {results.length === 0 && query.trim() && !loading && !error && (
+        {results.length === 0 && hasSearched && !loading && !error && (
           <p style={{ color: "#888", marginTop: 12 }}>No results found for &apos;{query}&apos;</p>
         )}