From 62424a9a5ac2a5dc94d01e81024bb1976430ce31 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Wed, 11 Feb 2026 21:12:09 +0000 Subject: [PATCH 1/2] feat(ux): improve domain search reliability and accessibility - Replace `on:keyup` with `on:input` for reliable search triggering. - Fix race condition where stale search results could overwrite newer ones. - Add `aria-label` to loading spinner. - Add `aria-live="polite"` region for search results to announce updates to screen readers. - Use `ReturnType` for better TypeScript compatibility. Co-authored-by: Yeboster <23556525+Yeboster@users.noreply.github.com> --- src/routes/DomainSearch.svelte | 72 +++++++++++++++++++--------------- 1 file changed, 41 insertions(+), 31 deletions(-) diff --git a/src/routes/DomainSearch.svelte b/src/routes/DomainSearch.svelte index 2cde1b3..891af36 100644 --- a/src/routes/DomainSearch.svelte +++ b/src/routes/DomainSearch.svelte @@ -15,7 +15,7 @@ let domainName: string = ''; let nameSearched: string = ''; let isLoading: boolean = false; - let debounceTimer: NodeJS.Timeout; + let debounceTimer: ReturnType; $: errors = invalid ? validator.getErrors() : []; $: invalid = domainName !== '' && !validator.validate(domainName, { raiseError: false }); @@ -36,11 +36,15 @@ return goto(url); } - nameSearched = domainName.toLocaleLowerCase(); + const currentName = domainName.toLocaleLowerCase(); + nameSearched = currentName; isLoading = true; - domain = await $metaNamesSdk.domainRepository.find(domainName); + const result = await $metaNamesSdk.domainRepository.find(domainName); + if (currentName !== nameSearched) return; + + domain = result; isLoading = false; } @@ -55,7 +59,7 @@ class="domain-input" variant="outlined" bind:value={domainName} - on:keyup={() => debounce()} + on:input={() => debounce()} bind:invalid label="Domain name" withTrailingIcon @@ -75,39 +79,45 @@ - {#if isLoading} - - -
- {nameSearchedLabel} - - -
- - - {:else if domain} - - - -
- {nameSearchedLabel} - Registered -
- - - - {:else if domain === null} - - +
+ {#if isLoading} +
{nameSearchedLabel} - Available + +
- - {/if} + {:else if domain} + + + +
+ {nameSearchedLabel} + Registered +
+ + + + {:else if domain === null} + + + +
+ {nameSearchedLabel} + Available +
+ + + + {/if} +
diff --git a/src/routes/DomainSearch.svelte b/src/routes/DomainSearch.svelte index 891af36..0d71589 100644 --- a/src/routes/DomainSearch.svelte +++ b/src/routes/DomainSearch.svelte @@ -16,6 +16,7 @@ let nameSearched: string = ''; let isLoading: boolean = false; let debounceTimer: ReturnType; + let requestId = 0; $: errors = invalid ? validator.getErrors() : []; $: invalid = domainName !== '' && !validator.validate(domainName, { raiseError: false }); @@ -36,16 +37,16 @@ return goto(url); } - const currentName = domainName.toLocaleLowerCase(); - nameSearched = currentName; + const currentRequestId = ++requestId; + nameSearched = domainName.toLocaleLowerCase(); isLoading = true; const result = await $metaNamesSdk.domainRepository.find(domainName); - if (currentName !== nameSearched) return; - - domain = result; - isLoading = false; + if (currentRequestId === requestId) { + domain = result; + isLoading = false; + } } async function submit() { @@ -87,9 +88,9 @@ {nameSearchedLabel} diff --git a/src/routes/api/register/[name]/fees/[coin]/+server.ts b/src/routes/api/register/[name]/fees/[coin]/+server.ts index 72763fd..af646a0 100644 --- a/src/routes/api/register/[name]/fees/[coin]/+server.ts +++ b/src/routes/api/register/[name]/fees/[coin]/+server.ts @@ -4,14 +4,17 @@ import { json } from '@sveltejs/kit'; import type { DomainFeesResponse } from 'src/lib/types'; export async function GET({ params: { name, coin } }) { - return handleError(async () => { - const validCoins = metaNamesSdk.config.byoc.map(byoc => byoc.symbol.toString()) - if (!(validCoins.includes(coin))) return apiError('Invalid coin'); + return handleError(async () => { + const validCoins = metaNamesSdk.config.byoc.map((byoc) => byoc.symbol.toString()); + if (!validCoins.includes(coin)) return apiError('Invalid coin'); - const normalizedDomain = metaNamesSdk.domainRepository.domainValidator.normalize(name) - const domainFees = await metaNamesSdk.domainRepository.calculateMintFees(normalizedDomain, coin as BYOCSymbol); - const fees = { ...domainFees, fees: domainFees.fees.toString() } + const normalizedDomain = metaNamesSdk.domainRepository.domainValidator.normalize(name); + const domainFees = await metaNamesSdk.domainRepository.calculateMintFees( + normalizedDomain, + coin as BYOCSymbol + ); + const fees = { ...domainFees, fees: domainFees.fees.toString() }; - return json(fees); - }); + return json(fees); + }); } diff --git a/src/routes/profile/+page.svelte b/src/routes/profile/+page.svelte index 8b9fd1d..7f29073 100644 --- a/src/routes/profile/+page.svelte +++ b/src/routes/profile/+page.svelte @@ -74,7 +74,6 @@