forked from
npmx.dev/npmx.dev
[READ-ONLY]
a fast, modern browser for the npm registry
fix: add skeleton for pre-hydration toggles (#541)
authored by
Matteo Gabriele
and committed by
GitHub
8825b0aa
d9172a92
+92
-61
+14
app/components/ToggleSkeleton.vue
+14
app/components/ToggleSkeleton.vue
···
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>
+78
-61
app/pages/settings.vue
+78
-61
app/pages/settings.vue
···
101
101
<div class="bg-bg-subtle border border-border rounded-lg p-4 sm:p-6 space-y-4">
102
102
<!-- Relative dates toggle -->
103
103
<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"
118
111
>
112
+
<span class="text-sm text-fg font-medium text-start">
113
+
{{ $t('settings.relative_dates') }}
114
+
</span>
119
115
<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>
125
130
<p class="text-sm text-fg-muted">
126
131
{{ $t('settings.relative_dates_description') }}
127
132
</p>
···
132
137
133
138
<!-- Include @types in install toggle -->
134
139
<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"
151
147
>
148
+
<span class="text-sm text-fg font-medium text-start">
149
+
{{ $t('settings.include_types') }}
150
+
</span>
152
151
<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>
158
168
<p class="text-sm text-fg-muted">
159
169
{{ $t('settings.include_types_description') }}
160
170
</p>
···
165
175
166
176
<!-- Hide platform-specific packages toggle -->
167
177
<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"
184
185
>
186
+
<span class="text-sm text-fg font-medium text-start">
187
+
{{ $t('settings.hide_platform_packages') }}
188
+
</span>
185
189
<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>
191
208
<p class="text-sm text-fg-muted">
192
209
{{ $t('settings.hide_platform_packages_description') }}
193
210
</p>