feat(ui): fade in client only elements

components/header/AppHeader.vue

@@ -4,7 +4,8 @@
   >
     <h1 class="text-4xl font-bold">Simple QRCode Generator</h1>
 
-    <div class="flex gap-x-1">
+    <ClientOnly>
+      <div class="flex gap-x-1 animate-fadeIn">
         <UButton
           color="gray"
           variant="ghost"
@@ -17,5 +18,21 @@
 
         <ThemeSwitcher />
       </div>
+    </ClientOnly>
   </div>
 </template>
+
+<style scoped>
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.animate-fadeIn {
+  animation: fadeIn 200ms ease-in-out forwards;
+}
+</style>

components/header/ThemeSwitcher.vue

@@ -12,7 +12,6 @@ const isDark = computed({
 </script>
 
 <template>
-  <ClientOnly>
   <UButton
     :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
     color="gray"
@@ -21,8 +20,4 @@ const isDark = computed({
     class="w-8 h-8"
     @click="isDark = !isDark"
   />
-    <template #fallback>
-      <div class="w-8 h-8" />
-    </template>
-  </ClientOnly>
 </template>