Skip to content

Commit 8825b0a

Browse files
MatteoGabrieleMatteoGabriele
authored
fix: add skeleton for pre-hydration toggles (#541)
1 parent d9172a9 commit 8825b0a

File tree

2 files changed

+92
-61
lines changed

2 files changed

+92
-61
lines changed

‎app/components/ToggleSkeleton.vue‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<script setup lang="ts">
2+
defineProps<{
3+
label: string
4+
}>()
5+
</script>
6+
7+
<template>
8+
<div class="w-full flex items-center justify-between gap-4">
9+
<span class="text-sm text-fg font-medium text-start">
10+
{{ label }}
11+
</span>
12+
<span class="skeleton block h-6 w-11 shrink-0 rounded-full" />
13+
</div>
14+
</template>

‎app/pages/settings.vue‎

Lines changed: 78 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -101,27 +101,32 @@ defineOgImageComponent('Default', {
101101
<div class="bg-bg-subtle border border-border rounded-lg p-4 sm:p-6 space-y-4">
102102
<!-- Relative dates toggle -->
103103
<div class="space-y-2">
104-
<button
105-
type="button"
106-
class="w-full flex items-center justify-between gap-4 group"
107-
role="switch"
108-
:aria-checked="settings.relativeDates"
109-
@click="settings.relativeDates = !settings.relativeDates"
110-
>
111-
<span class="text-sm text-fg font-medium text-start">
112-
{{ $t('settings.relative_dates') }}
113-
</span>
114-
<span
115-
class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out motion-reduce:transition-none shadow-sm cursor-pointer"
116-
:class="settings.relativeDates ? 'bg-accent' : 'bg-bg border border-border'"
117-
aria-hidden="true"
104+
<ClientOnly>
105+
<button
106+
type="button"
107+
class="w-full flex items-center justify-between gap-4 group"
108+
role="switch"
109+
:aria-checked="settings.relativeDates"
110+
@click="settings.relativeDates = !settings.relativeDates"
118111
>
112+
<span class="text-sm text-fg font-medium text-start">
113+
{{ $t('settings.relative_dates') }}
114+
</span>
119115
<span
120-
class="pointer-events-none inline-block h-5 w-5 rounded-full shadow-sm ring-0 transition-transform duration-200 ease-in-out motion-reduce:transition-none"
121-
:class="settings.relativeDates ? 'bg-bg' : 'bg-fg-muted'"
122-
/>
123-
</span>
124-
</button>
116+
class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out motion-reduce:transition-none shadow-sm cursor-pointer"
117+
:class="settings.relativeDates ? 'bg-accent' : 'bg-bg border border-border'"
118+
aria-hidden="true"
119+
>
120+
<span
121+
class="pointer-events-none inline-block h-5 w-5 rounded-full shadow-sm ring-0 transition-transform duration-200 ease-in-out motion-reduce:transition-none"
122+
:class="settings.relativeDates ? 'bg-bg' : 'bg-fg-muted'"
123+
/>
124+
</span>
125+
</button>
126+
<template #fallback>
127+
<ToggleSkeleton :label="$t('settings.relative_dates')" />
128+
</template>
129+
</ClientOnly>
125130
<p class="text-sm text-fg-muted">
126131
{{ $t('settings.relative_dates_description') }}
127132
</p>
@@ -132,29 +137,34 @@ defineOgImageComponent('Default', {
132137

133138
<!-- Include @types in install toggle -->
134139
<div class="space-y-2">
135-
<button
136-
type="button"
137-
class="w-full flex items-center justify-between gap-4 group"
138-
role="switch"
139-
:aria-checked="settings.includeTypesInInstall"
140-
@click="settings.includeTypesInInstall = !settings.includeTypesInInstall"
141-
>
142-
<span class="text-sm text-fg font-medium text-start">
143-
{{ $t('settings.include_types') }}
144-
</span>
145-
<span
146-
class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out motion-reduce:transition-none shadow-sm cursor-pointer"
147-
:class="
148-
settings.includeTypesInInstall ? 'bg-accent' : 'bg-bg border border-border'
149-
"
150-
aria-hidden="true"
140+
<ClientOnly>
141+
<button
142+
type="button"
143+
class="w-full flex items-center justify-between gap-4 group"
144+
role="switch"
145+
:aria-checked="settings.includeTypesInInstall"
146+
@click="settings.includeTypesInInstall = !settings.includeTypesInInstall"
151147
>
148+
<span class="text-sm text-fg font-medium text-start">
149+
{{ $t('settings.include_types') }}
150+
</span>
152151
<span
153-
class="pointer-events-none inline-block h-5 w-5 rounded-full shadow-sm ring-0 transition-transform duration-200 ease-in-out motion-reduce:transition-none"
154-
:class="settings.includeTypesInInstall ? 'bg-bg' : 'bg-fg-muted'"
155-
/>
156-
</span>
157-
</button>
152+
class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out motion-reduce:transition-none shadow-sm cursor-pointer"
153+
:class="
154+
settings.includeTypesInInstall ? 'bg-accent' : 'bg-bg border border-border'
155+
"
156+
aria-hidden="true"
157+
>
158+
<span
159+
class="pointer-events-none inline-block h-5 w-5 rounded-full shadow-sm ring-0 transition-transform duration-200 ease-in-out motion-reduce:transition-none"
160+
:class="settings.includeTypesInInstall ? 'bg-bg' : 'bg-fg-muted'"
161+
/>
162+
</span>
163+
</button>
164+
<template #fallback>
165+
<ToggleSkeleton :label="$t('settings.include_types')" />
166+
</template>
167+
</ClientOnly>
158168
<p class="text-sm text-fg-muted">
159169
{{ $t('settings.include_types_description') }}
160170
</p>
@@ -165,29 +175,36 @@ defineOgImageComponent('Default', {
165175

166176
<!-- Hide platform-specific packages toggle -->
167177
<div class="space-y-2">
168-
<button
169-
type="button"
170-
class="w-full flex items-center justify-between gap-4 group"
171-
role="switch"
172-
:aria-checked="settings.hidePlatformPackages"
173-
@click="settings.hidePlatformPackages = !settings.hidePlatformPackages"
174-
>
175-
<span class="text-sm text-fg font-medium text-start">
176-
{{ $t('settings.hide_platform_packages') }}
177-
</span>
178-
<span
179-
class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out motion-reduce:transition-none shadow-sm cursor-pointer"
180-
:class="
181-
settings.hidePlatformPackages ? 'bg-accent' : 'bg-bg border border-border'
182-
"
183-
aria-hidden="true"
178+
<ClientOnly>
179+
<button
180+
type="button"
181+
class="w-full flex items-center justify-between gap-4 group"
182+
role="switch"
183+
:aria-checked="settings.hidePlatformPackages"
184+
@click="settings.hidePlatformPackages = !settings.hidePlatformPackages"
184185
>
186+
<span class="text-sm text-fg font-medium text-start">
187+
{{ $t('settings.hide_platform_packages') }}
188+
</span>
185189
<span
186-
class="pointer-events-none inline-block h-5 w-5 rounded-full shadow-sm ring-0 transition-transform duration-200 ease-in-out motion-reduce:transition-none"
187-
:class="settings.hidePlatformPackages ? 'bg-bg' : 'bg-fg-muted'"
188-
/>
189-
</span>
190-
</button>
190+
class="relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out motion-reduce:transition-none shadow-sm cursor-pointer"
191+
:class="
192+
settings.hidePlatformPackages ? 'bg-accent' : 'bg-bg border border-border'
193+
"
194+
aria-hidden="true"
195+
>
196+
<span
197+
class="pointer-events-none inline-block h-5 w-5 rounded-full shadow-sm ring-0 transition-transform duration-200 ease-in-out motion-reduce:transition-none"
198+
:class="settings.hidePlatformPackages ? 'bg-bg' : 'bg-fg-muted'"
199+
/>
200+
</span>
201+
</button>
202+
<template #fallback>
203+
<p class="text-sm text-fg-muted">
204+
{{ $t('settings.hide_platform_packages') }}
205+
</p>
206+
</template>
207+
</ClientOnly>
191208
<p class="text-sm text-fg-muted">
192209
{{ $t('settings.hide_platform_packages_description') }}
193210
</p>

0 commit comments

Comments
 (0)