From 2a2a52d46ea8463a22583b33555317879879b824 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Wed, 18 Feb 2026 21:10:09 +0000
Subject: [PATCH] feat: add loading spinner to domain search input

- Replace search icon with CircularProgress when isLoading is true in DomainSearch.svelte
- Add aria-label and role="status" for accessibility
- Fix runtime error by adding 'util' to nodePolyfills in vite.config.ts

Co-authored-by: yeboster <23556525+yeboster@users.noreply.github.com>
---
 .jules/palette.md              |  1 +
 src/routes/DomainSearch.svelte | 25 ++++++++++++++++++++-----
 vite.config.ts                 |  2 +-
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/.jules/palette.md b/.jules/palette.md
index 00f41cd..9cc85e1 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -1,3 +1,4 @@
 ## 2024-10-24 - Accessible Icon Props and Loading Button State
+
 **Learning:** Svelte wrapper components (like `Icon.svelte`) must spread `$$restProps` to allow passing accessibility attributes (e.g., `aria-label`) from parent components. Without this, icons remain inaccessible to screen readers. Also, persistent "Success" states on buttons can be confusing; auto-resetting them after a timeout improves clarity.
 **Action:** Always include `{...$$restProps}` in wrapper components and implement auto-reset logic for temporary success states in interactive elements.
diff --git a/src/routes/DomainSearch.svelte b/src/routes/DomainSearch.svelte
index 53d006f..c0ff75d 100644
--- a/src/routes/DomainSearch.svelte
+++ b/src/routes/DomainSearch.svelte
@@ -69,11 +69,17 @@
 			autofocus
 		>
 			<svelte:fragment slot="trailingIcon">
-				<div class="submit">
-					<IconButton aria-label="search">
-						<Icon icon="search" />
-					</IconButton>
-				</div>
+				{#if isLoading}
+					<div class="loading-spinner" role="status" aria-label="Searching...">
+						<CircularProgress style="height: 24px; width: 24px;" indeterminate />
+					</div>
+				{:else}
+					<div class="submit">
+						<IconButton aria-label="search">
+							<Icon icon="search" />
+						</IconButton>
+					</div>
+				{/if}
 			</svelte:fragment>
 			<svelte:fragment slot="helper">
 				{#if errors.length > 0}
@@ -179,4 +185,13 @@
 	.submit {
 		align-self: center;
 	}
+
+	.loading-spinner {
+		width: 48px;
+		height: 48px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		align-self: center;
+	}
 </style>
diff --git a/vite.config.ts b/vite.config.ts
index a9322d6..6094564 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -14,7 +14,7 @@ export default defineConfig({
 		}),
 		sveltekit(),
 		nodePolyfills({
-			include: ['buffer', 'crypto', 'stream']
+			include: ['buffer', 'crypto', 'stream', 'util']
 		}),
 		tsconfigPaths()
 	],