[READ-ONLY] a fast, modern browser for the npm registry
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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
··· 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
··· 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>