admin: Fix server-side conditional rendering for icons

ThrRip · Jan 4, 2024 · 03d20d1 · 03d20d1
1 parent 9e9b64b
commit 03d20d1
Showing 1 changed file with 15 additions and 13 deletions.
diff --git a/packages/admin/app.vue b/packages/admin/app.vue
@@ -61,19 +61,21 @@
           transition duration-300 active:scale-95"
           @click="backendLogout"
         >
-          <transition-group
-            tag="span"
-            class="aspect-square grid grid-areas-stack place-items-center pl-0.5 h-14 max-lg:landscape:*:!h-5 *:!h-6"
-            enter-from-class="opacity-0"
-            enter-active-class="transition-opacity duration-200"
-            leave-active-class="transition-opacity duration-200"
-            leave-to-class="opacity-0"
-          >
-            <font-awesome-icon v-if="backendAuthState === ''" key="idle" :icon="['fas', 'right-from-bracket']" />
-            <font-awesome-icon v-if="backendAuthState === 'processing'" key="processing" :icon="['fas', 'circle-notch']" spin />
-            <font-awesome-icon v-if="backendAuthState === 'succeeded'" key="succeeded" :icon="['fas', 'check']" />
-            <font-awesome-icon v-if="backendAuthState === 'failed'" key="failed" :icon="['fas', 'circle-exclamation']" />
-          </transition-group>
+          <ClientOnly>
+            <transition-group
+              tag="span"
+              class="aspect-square grid grid-areas-stack place-items-center pl-0.5 h-14 max-lg:landscape:*:!h-5 *:!h-6"
+              enter-from-class="opacity-0"
+              enter-active-class="transition-opacity duration-200"
+              leave-active-class="transition-opacity duration-200"
+              leave-to-class="opacity-0"
+            >
+              <font-awesome-icon v-if="backendAuthState === ''" key="idle" :icon="['fas', 'right-from-bracket']" />
+              <font-awesome-icon v-if="backendAuthState === 'processing'" key="processing" :icon="['fas', 'circle-notch']" spin />
+              <font-awesome-icon v-if="backendAuthState === 'succeeded'" key="succeeded" :icon="['fas', 'check']" />
+              <font-awesome-icon v-if="backendAuthState === 'failed'" key="failed" :icon="['fas', 'circle-exclamation']" />
+            </transition-group>
+          </ClientOnly>
           <transition-group
             tag="span"
             class="grid grid-areas-stack justify-items-start"