forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: avoid mismatch of selected language on hydration (#305)
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
authored by
Matteo Gabriele
autofix-ci[bot]
and committed by
GitHub
c03d6ca5
c39683ad
+17
-12
+16
-11
app/pages/settings.vue
+16
-11
app/pages/settings.vue
···
203
203
</div>
204
204
</section>
205
205
206
-
<!-- LANGUAGE Section -->
207
206
<section>
208
207
<h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-4">
209
208
{{ $t('settings.sections.language') }}
···
214
213
<label for="language-select" class="block text-sm text-fg font-medium">
215
214
{{ $t('settings.language') }}
216
215
</label>
217
-
<select
218
-
id="language-select"
219
-
:value="locale"
220
-
class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 cursor-pointer"
221
-
@change="setLocale(($event.target as HTMLSelectElement).value as typeof locale)"
222
-
>
223
-
<option v-for="loc in availableLocales" :key="loc.code" :value="loc.code">
224
-
{{ loc.name }}
225
-
</option>
226
-
</select>
216
+
217
+
<ClientOnly>
218
+
<select
219
+
id="language-select"
220
+
:value="locale"
221
+
class="w-full sm:w-auto min-w-48 bg-bg border border-border rounded-md px-3 py-2 text-sm text-fg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 cursor-pointer"
222
+
@change="setLocale(($event.target as HTMLSelectElement).value as typeof locale)"
223
+
>
224
+
<option v-for="loc in availableLocales" :key="loc.code" :value="loc.code">
225
+
{{ loc.name }}
226
+
</option>
227
+
</select>
228
+
<template #fallback>
229
+
<span class="skeleton block w-48 h-8" />
230
+
</template>
231
+
</ClientOnly>
227
232
</div>
228
233
229
234
<!-- Translation helper for non-source locales -->
+1
-1
lunaria/files/en-US.json
+1
-1
lunaria/files/en-US.json
···
573
573
},
574
574
"contributors": {
575
575
"title": "Contributors",
576
-
"description": "npmx is fully open source, built by an amazing community of contributors.",
576
+
"description": "npmx is fully open source, built by an amazing community of contributors. Join us and let's build the npm browsing experience we always wanted, together.",
577
577
"loading": "Loading contributors...",
578
578
"error": "Failed to load contributors",
579
579
"view_profile": "View {name}'s GitHub profile"