feat(ui): fade in client only elements

2024-10-16 02:28:56 +02:00
parent 6e5480c923
commit 0edae901af
2 changed files with 37 additions and 25 deletions
--- a/components/header/ThemeSwitcher.vue
+++ b/components/header/ThemeSwitcher.vue
@@ -12,17 +12,12 @@ const isDark = computed({
 </script>

 <template>
-  <ClientOnly>
-    <UButton
-      :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
-      color="gray"
-      variant="ghost"
-      aria-label="Theme"
-      class="w-8 h-8"
-      @click="isDark = !isDark"
-    />
-    <template #fallback>
-      <div class="w-8 h-8" />
-    </template>
-  </ClientOnly>
+  <UButton
+    :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
+    color="gray"
+    variant="ghost"
+    aria-label="Theme"
+    class="w-8 h-8"
+    @click="isDark = !isDark"
+  />
 </template>