From 0edae901af149efc616c3adce5d953a3f3082f23 Mon Sep 17 00:00:00 2001
From: Pihkaal <pihkaal@proton.me>
Date: Wed, 16 Oct 2024 02:28:56 +0200
Subject: [PATCH] feat(ui): fade in client only elements

---
 components/header/AppHeader.vue     | 41 ++++++++++++++++++++---------
 components/header/ThemeSwitcher.vue | 21 ++++++---------
 2 files changed, 37 insertions(+), 25 deletions(-)

diff --git a/components/header/AppHeader.vue b/components/header/AppHeader.vue
index b0cbdf5..e7ff323 100644
--- a/components/header/AppHeader.vue
+++ b/components/header/AppHeader.vue
@@ -4,18 +4,35 @@
   >
     <h1 class="text-4xl font-bold">Simple QRCode Generator</h1>
 
-    <div class="flex gap-x-1">
-      <UButton
-        color="gray"
-        variant="ghost"
-        icon="i-uil-github"
-        aria-label="Github repo"
-        class="w-8 h-8"
-        target="_blank"
-        to="https://github.com/pihkaal/simple-qr"
-      />
+    <ClientOnly>
+      <div class="flex gap-x-1 animate-fadeIn">
+        <UButton
+          color="gray"
+          variant="ghost"
+          icon="i-uil-github"
+          aria-label="Github repo"
+          class="w-8 h-8"
+          target="_blank"
+          to="https://github.com/pihkaal/simple-qr"
+        />
 
-      <ThemeSwitcher />
-    </div>
+        <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>
diff --git a/components/header/ThemeSwitcher.vue b/components/header/ThemeSwitcher.vue
index ae50270..8e80c75 100644
--- 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>