Skip to content

Commit e5022a5

Browse files
danielroedanielroe
committed
chore: update i18n key and reduce flakiness on suggestion
1 parent 114abf3 commit e5022a5

File tree

6 files changed

+52
-32
lines changed

6 files changed

+52
-32
lines changed

‎app/components/SearchProviderToggle.client.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ useEventListener('keydown', event => {
1818
<template>
1919
<div ref="toggleRef" class="relative">
2020
<ButtonBase
21-
:aria-label="$t('settings.search_provider')"
21+
:aria-label="$t('settings.data_source.label')"
2222
:aria-expanded="isOpen"
2323
aria-haspopup="true"
2424
size="small"
@@ -37,7 +37,7 @@ useEventListener('keydown', event => {
3737
v-if="isOpen"
3838
class="absolute inset-ie-0 top-full pt-2 w-72 z-50"
3939
role="menu"
40-
:aria-label="$t('settings.search_provider')"
40+
:aria-label="$t('settings.data_source.label')"
4141
>
4242
<div
4343
class="bg-bg-subtle/80 backdrop-blur-sm border border-border-subtle rounded-lg shadow-lg shadow-bg-elevated/50 overflow-hidden p-1"
@@ -62,10 +62,10 @@ useEventListener('keydown', event => {
6262
/>
6363
<div class="min-w-0 flex-1">
6464
<div class="text-sm font-medium" :class="!isAlgolia ? 'text-fg' : 'text-fg-muted'">
65-
{{ $t('settings.search_provider_npm') }}
65+
{{ $t('settings.data_source.npm') }}
6666
</div>
6767
<p class="text-xs text-fg-subtle mt-0.5">
68-
{{ $t('settings.search_provider_npm_description') }}
68+
{{ $t('settings.data_source.npm_description') }}
6969
</p>
7070
</div>
7171
</button>
@@ -90,10 +90,10 @@ useEventListener('keydown', event => {
9090
/>
9191
<div class="min-w-0 flex-1">
9292
<div class="text-sm font-medium" :class="isAlgolia ? 'text-fg' : 'text-fg-muted'">
93-
{{ $t('settings.search_provider_algolia') }}
93+
{{ $t('settings.data_source.algolia') }}
9494
</div>
9595
<p class="text-xs text-fg-subtle mt-0.5">
96-
{{ $t('settings.search_provider_algolia_description') }}
96+
{{ $t('settings.data_source.algolia_description') }}
9797
</p>
9898
</div>
9999
</button>

‎app/pages/search.vue‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -431,10 +431,16 @@ const parsedQuery = computed<ParsedQuery>(() => {
431431
const validatedSuggestions = ref<ValidatedSuggestion[]>([])
432432
const suggestionsLoading = shallowRef(false)
433433
434+
/** Counter to discard stale async results when query changes rapidly */
435+
let suggestionRequestId = 0
436+
434437
/** Validate suggestions (check org/user existence) */
435438
async function validateSuggestionsImpl(parsed: ParsedQuery) {
439+
const requestId = ++suggestionRequestId
440+
436441
if (!parsed.type || !parsed.name) {
437442
validatedSuggestions.value = []
443+
suggestionsLoading.value = false
438444
return
439445
}
440446
@@ -444,11 +450,13 @@ async function validateSuggestionsImpl(parsed: ParsedQuery) {
444450
try {
445451
if (parsed.type === 'user') {
446452
const exists = await checkUserExists(parsed.name)
453+
if (requestId !== suggestionRequestId) return
447454
if (exists) {
448455
suggestions.push({ type: 'user', name: parsed.name, exists: true })
449456
}
450457
} else if (parsed.type === 'org') {
451458
const exists = await checkOrgExists(parsed.name)
459+
if (requestId !== suggestionRequestId) return
452460
if (exists) {
453461
suggestions.push({ type: 'org', name: parsed.name, exists: true })
454462
}
@@ -458,6 +466,7 @@ async function validateSuggestionsImpl(parsed: ParsedQuery) {
458466
checkOrgExists(parsed.name),
459467
checkUserExists(parsed.name),
460468
])
469+
if (requestId !== suggestionRequestId) return
461470
// Org first (more common)
462471
if (orgExists) {
463472
suggestions.push({ type: 'org', name: parsed.name, exists: true })
@@ -467,10 +476,15 @@ async function validateSuggestionsImpl(parsed: ParsedQuery) {
467476
}
468477
}
469478
} finally {
470-
suggestionsLoading.value = false
479+
// Only clear loading if this is still the active request
480+
if (requestId === suggestionRequestId) {
481+
suggestionsLoading.value = false
482+
}
471483
}
472484
473-
validatedSuggestions.value = suggestions
485+
if (requestId === suggestionRequestId) {
486+
validatedSuggestions.value = suggestions
487+
}
474488
}
475489
476490
// Debounce lightly for npm (extra API calls are slower), skip debounce for Algolia (fast)

‎app/pages/settings.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -156,10 +156,10 @@ const setLocale: typeof setNuxti18nLocale = locale => {
156156
<div class="bg-bg-subtle border border-border rounded-lg p-4 sm:p-6">
157157
<div class="space-y-2">
158158
<label for="search-provider-select" class="block text-sm text-fg font-medium">
159-
{{ $t('settings.search_provider') }}
159+
{{ $t('settings.data_source.label') }}
160160
</label>
161161
<p class="text-xs text-fg-muted mb-3">
162-
{{ $t('settings.search_provider_description') }}
162+
{{ $t('settings.data_source.description') }}
163163
</p>
164164

165165
<ClientOnly>
@@ -173,10 +173,10 @@ const setLocale: typeof setNuxti18nLocale = locale => {
173173
"
174174
>
175175
<option value="npm">
176-
{{ $t('settings.search_provider_npm') }}
176+
{{ $t('settings.data_source.npm') }}
177177
</option>
178178
<option value="algolia">
179-
{{ $t('settings.search_provider_algolia') }}
179+
{{ $t('settings.data_source.algolia') }}
180180
</option>
181181
</select>
182182
<template #fallback>
@@ -194,8 +194,8 @@ const setLocale: typeof setNuxti18nLocale = locale => {
194194
<p class="text-xs text-fg-subtle mt-2">
195195
{{
196196
settings.searchProvider === 'algolia'
197-
? $t('settings.search_provider_algolia_description')
198-
: $t('settings.search_provider_npm_description')
197+
? $t('settings.data_source.algolia_description')
198+
: $t('settings.data_source.npm_description')
199199
}}
200200
</p>
201201

‎i18n/locales/en.json‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -67,12 +67,14 @@
6767
"search": "Data source",
6868
"language": "Language"
6969
},
70-
"search_provider": "Data source",
71-
"search_provider_description": "Choose where npmx gets search data. Individual package pages always use the npm registry directly.",
72-
"search_provider_npm": "npm Registry",
73-
"search_provider_npm_description": "Fetches search, org and user listings directly from the official npm registry. Authoritative, but can be slower.",
74-
"search_provider_algolia": "Algolia",
75-
"search_provider_algolia_description": "Uses Algolia for faster search, org and user pages.",
70+
"data_source": {
71+
"label": "Data source",
72+
"description": "Choose where npmx gets search data. Individual package pages always use the npm registry directly.",
73+
"npm": "npm Registry",
74+
"npm_description": "Fetches search, org and user listings directly from the official npm registry. Authoritative, but can be slower.",
75+
"algolia": "Algolia",
76+
"algolia_description": "Uses Algolia for faster search, org and user pages."
77+
},
7678
"relative_dates": "Relative dates",
7779
"include_types": "Include {'@'}types in install",
7880
"include_types_description": "Add {'@'}types package to install commands for untyped packages",

‎lunaria/files/en-GB.json‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -67,12 +67,14 @@
6767
"search": "Data source",
6868
"language": "Language"
6969
},
70-
"search_provider": "Data source",
71-
"search_provider_description": "Choose where npmx gets search data. Individual package pages always use the npm registry directly.",
72-
"search_provider_npm": "npm Registry",
73-
"search_provider_npm_description": "Fetches search, org and user listings directly from the official npm registry. Authoritative, but can be slower.",
74-
"search_provider_algolia": "Algolia",
75-
"search_provider_algolia_description": "Uses Algolia for faster search, org and user pages.",
70+
"data_source": {
71+
"label": "Data source",
72+
"description": "Choose where npmx gets search data. Individual package pages always use the npm registry directly.",
73+
"npm": "npm Registry",
74+
"npm_description": "Fetches search, org and user listings directly from the official npm registry. Authoritative, but can be slower.",
75+
"algolia": "Algolia",
76+
"algolia_description": "Uses Algolia for faster search, org and user pages."
77+
},
7678
"relative_dates": "Relative dates",
7779
"include_types": "Include {'@'}types in install",
7880
"include_types_description": "Add {'@'}types package to install commands for untyped packages",

‎lunaria/files/en-US.json‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -67,12 +67,14 @@
6767
"search": "Data source",
6868
"language": "Language"
6969
},
70-
"search_provider": "Data source",
71-
"search_provider_description": "Choose where npmx gets search data. Individual package pages always use the npm registry directly.",
72-
"search_provider_npm": "npm Registry",
73-
"search_provider_npm_description": "Fetches search, org and user listings directly from the official npm registry. Authoritative, but can be slower.",
74-
"search_provider_algolia": "Algolia",
75-
"search_provider_algolia_description": "Uses Algolia for faster search, org and user pages.",
70+
"data_source": {
71+
"label": "Data source",
72+
"description": "Choose where npmx gets search data. Individual package pages always use the npm registry directly.",
73+
"npm": "npm Registry",
74+
"npm_description": "Fetches search, org and user listings directly from the official npm registry. Authoritative, but can be slower.",
75+
"algolia": "Algolia",
76+
"algolia_description": "Uses Algolia for faster search, org and user pages."
77+
},
7678
"relative_dates": "Relative dates",
7779
"include_types": "Include {'@'}types in install",
7880
"include_types_description": "Add {'@'}types package to install commands for untyped packages",

0 commit comments

Comments
 (0)