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..6ecddd9 100644
--- a/src/routes/DomainSearch.svelte
+++ b/src/routes/DomainSearch.svelte
@@ -70,9 +70,15 @@
>
-
-
-
+ {#if isLoading}
+
+
+
+ {:else}
+
+
+
+ {/if}
@@ -179,4 +185,12 @@
.submit {
align-self: center;
}
+
+ .loading-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 48px;
+ height: 48px;
+ }
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()
],