diff --git a/app/components/ToggleSkeleton.vue b/app/components/ToggleSkeleton.vue
new file mode 100644
index 0000000000..960464afe0
--- /dev/null
+++ b/app/components/ToggleSkeleton.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+defineProps<{
+  label: string
+}>()
+</script>
+
+<template>
+  <div class="w-full flex items-center justify-between gap-4">
+    <span class="text-sm text-fg font-medium text-start">
+      {{ label }}
+    </span>
+    <span class="skeleton block h-6 w-11 shrink-0 rounded-full" />
+  </div>
+</template>
diff --git a/app/pages/settings.vue b/app/pages/settings.vue
index 14b379c886..4a5ac3f688 100644
--- a/app/pages/settings.vue
+++ b/app/pages/settings.vue
@@ -101,27 +101,32 @@ defineOgImageComponent('Default', {
           <div class="bg-bg-subtle border border-border rounded-lg p-4 sm:p-6 space-y-4">
             <!-- Relative dates toggle -->
             <div class="space-y-2">
-              <button
-                type="button"
-                class="w-full flex items-center justify-between gap-4 group"
-                role="switch"
-                :aria-checked="settings.relativeDates"
-                @click="settings.relativeDates = !settings.relativeDates"
-              >
-                <span class="text-sm text-fg font-medium text-start">
-                  {{ $t('settings.relative_dates') }}
-                </span>
-                <span
-                  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"
-                  :class="settings.relativeDates ? 'bg-accent' : 'bg-bg border border-border'"
-                  aria-hidden="true"
+              <ClientOnly>
+                <button
+                  type="button"
+                  class="w-full flex items-center justify-between gap-4 group"
+                  role="switch"
+                  :aria-checked="settings.relativeDates"
+                  @click="settings.relativeDates = !settings.relativeDates"
                 >
+                  <span class="text-sm text-fg font-medium text-start">
+                    {{ $t('settings.relative_dates') }}
+                  </span>
                   <span
-                    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"
-                    :class="settings.relativeDates ? 'bg-bg' : 'bg-fg-muted'"
-                  />
-                </span>
-              </button>
+                    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"
+                    :class="settings.relativeDates ? 'bg-accent' : 'bg-bg border border-border'"
+                    aria-hidden="true"
+                  >
+                    <span
+                      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"
+                      :class="settings.relativeDates ? 'bg-bg' : 'bg-fg-muted'"
+                    />
+                  </span>
+                </button>
+                <template #fallback>
+                  <ToggleSkeleton :label="$t('settings.relative_dates')" />
+                </template>
+              </ClientOnly>
               <p class="text-sm text-fg-muted">
                 {{ $t('settings.relative_dates_description') }}
               </p>
@@ -132,29 +137,34 @@ defineOgImageComponent('Default', {
 
             <!-- Include @types in install toggle -->
             <div class="space-y-2">
-              <button
-                type="button"
-                class="w-full flex items-center justify-between gap-4 group"
-                role="switch"
-                :aria-checked="settings.includeTypesInInstall"
-                @click="settings.includeTypesInInstall = !settings.includeTypesInInstall"
-              >
-                <span class="text-sm text-fg font-medium text-start">
-                  {{ $t('settings.include_types') }}
-                </span>
-                <span
-                  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"
-                  :class="
-                    settings.includeTypesInInstall ? 'bg-accent' : 'bg-bg border border-border'
-                  "
-                  aria-hidden="true"
+              <ClientOnly>
+                <button
+                  type="button"
+                  class="w-full flex items-center justify-between gap-4 group"
+                  role="switch"
+                  :aria-checked="settings.includeTypesInInstall"
+                  @click="settings.includeTypesInInstall = !settings.includeTypesInInstall"
                 >
+                  <span class="text-sm text-fg font-medium text-start">
+                    {{ $t('settings.include_types') }}
+                  </span>
                   <span
-                    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"
-                    :class="settings.includeTypesInInstall ? 'bg-bg' : 'bg-fg-muted'"
-                  />
-                </span>
-              </button>
+                    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"
+                    :class="
+                      settings.includeTypesInInstall ? 'bg-accent' : 'bg-bg border border-border'
+                    "
+                    aria-hidden="true"
+                  >
+                    <span
+                      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"
+                      :class="settings.includeTypesInInstall ? 'bg-bg' : 'bg-fg-muted'"
+                    />
+                  </span>
+                </button>
+                <template #fallback>
+                  <ToggleSkeleton :label="$t('settings.include_types')" />
+                </template>
+              </ClientOnly>
               <p class="text-sm text-fg-muted">
                 {{ $t('settings.include_types_description') }}
               </p>
@@ -165,29 +175,36 @@ defineOgImageComponent('Default', {
 
             <!-- Hide platform-specific packages toggle -->
             <div class="space-y-2">
-              <button
-                type="button"
-                class="w-full flex items-center justify-between gap-4 group"
-                role="switch"
-                :aria-checked="settings.hidePlatformPackages"
-                @click="settings.hidePlatformPackages = !settings.hidePlatformPackages"
-              >
-                <span class="text-sm text-fg font-medium text-start">
-                  {{ $t('settings.hide_platform_packages') }}
-                </span>
-                <span
-                  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"
-                  :class="
-                    settings.hidePlatformPackages ? 'bg-accent' : 'bg-bg border border-border'
-                  "
-                  aria-hidden="true"
+              <ClientOnly>
+                <button
+                  type="button"
+                  class="w-full flex items-center justify-between gap-4 group"
+                  role="switch"
+                  :aria-checked="settings.hidePlatformPackages"
+                  @click="settings.hidePlatformPackages = !settings.hidePlatformPackages"
                 >
+                  <span class="text-sm text-fg font-medium text-start">
+                    {{ $t('settings.hide_platform_packages') }}
+                  </span>
                   <span
-                    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"
-                    :class="settings.hidePlatformPackages ? 'bg-bg' : 'bg-fg-muted'"
-                  />
-                </span>
-              </button>
+                    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"
+                    :class="
+                      settings.hidePlatformPackages ? 'bg-accent' : 'bg-bg border border-border'
+                    "
+                    aria-hidden="true"
+                  >
+                    <span
+                      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"
+                      :class="settings.hidePlatformPackages ? 'bg-bg' : 'bg-fg-muted'"
+                    />
+                  </span>
+                </button>
+                <template #fallback>
+                  <p class="text-sm text-fg-muted">
+                    {{ $t('settings.hide_platform_packages') }}
+                  </p>
+                </template>
+              </ClientOnly>
               <p class="text-sm text-fg-muted">
                 {{ $t('settings.hide_platform_packages_description') }}
               </p>