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 > -
- - - -
+ {#if isLoading} +
+ +
+ {:else} +
+ + + +
+ {/if}
{#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; + } 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() ],