From da2b32cc7a5b7b39ada029349ce746f1db57a45a Mon Sep 17 00:00:00 2001
From: Gavyn Caldwell <code@gavyncaldwell.com>
Date: Fri, 13 Mar 2026 08:35:29 -0600
Subject: [PATCH] add loading spinner to search button during navigation

---
 src/components/search-bar.tsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/search-bar.tsx b/src/components/search-bar.tsx
index d2bee3f..b9e0ecd 100644
--- a/src/components/search-bar.tsx
+++ b/src/components/search-bar.tsx
@@ -1,6 +1,6 @@
 import { Search01Icon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/react";
-import { useNavigate } from "@tanstack/react-router";
+import { useNavigate, useRouterState } from "@tanstack/react-router";
 import { useEffect, useState } from "react";
 import { cn } from "~/lib/utils";
 
@@ -16,6 +16,9 @@ export function SearchBar({
 	size = "default",
 }: SearchBarProps) {
 	const navigate = useNavigate();
+	const isLoading = useRouterState({
+		select: (s) => s.status === "pending",
+	});
 	const [query, setQuery] = useState(defaultValue);
 
 	useEffect(() => {
@@ -59,12 +62,20 @@ export function SearchBar({
 			</div>
 			<button
 				type="submit"
+				disabled={isLoading}
 				className={cn(
-					"shrink-0 rounded-4xl bg-sun-bg font-medium text-sun-text transition-colors hover:bg-sun-bg/80",
+					"flex shrink-0 items-center justify-center gap-2 rounded-4xl bg-sun-bg font-medium text-sun-text transition-colors hover:bg-sun-bg/80 disabled:opacity-70",
 					isLarge ? "h-12 px-6 text-base" : "h-9 px-4 text-sm",
 				)}
 			>
-				Search
+				{isLoading ? (
+					<>
+						<span className="size-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+						Searching…
+					</>
+				) : (
+					"Search"
+				)}
 			</button>
 		</form>
 	);