From 3e3a2414743a29b5902c164fb27d1000bb3d5121 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Mon, 26 Dec 2022 08:45:56 +0100
Subject: [PATCH] fix: address some hydration issues

---
 layouts/default.vue                | 10 +++++-----
 pages/[[server]]/explore/index.vue |  2 +-
 pages/[[server]]/explore/links.vue |  2 +-
 pages/[[server]]/explore/tags.vue  |  2 +-
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index fa9fd06a..5d07a011 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,9 +1,9 @@
 <template>
   <div h-full :class="{ zen: isZenMode }">
-    <div v-if="isMastoInitialised && showUserSwitcherSidebar" fixed h-full hidden lg:block bg-code border-r-1 border-base>
+    <div v-if="isHydrated.value && showUserSwitcherSidebar" fixed h-full hidden lg:block bg-code border-r-1 border-base>
       <UserPicker />
     </div>
-    <main flex w-full mxa lg:max-w-80rem :class="isMastoInitialised && showUserSwitcherSidebar ? 'user-switcher-sidebar' : ''">
+    <main flex w-full mxa lg:max-w-80rem :class="isHydrated.value && showUserSwitcherSidebar ? 'user-switcher-sidebar' : ''">
       <aside class="hidden sm:flex w-1/8 md:w-1/6 justify-end lg:w-1/4 zen-hide" relative>
         <div sticky top-0 w-20 lg:w-100 h-screen flex="~ col">
           <slot name="left">
@@ -13,9 +13,9 @@
                 <NavSide />
                 <PublishButton m5 />
               </div>
-              <div flex flex-col>
-                <UserSignInEntry v-if="isMastoInitialised && !currentUser" sm:hidden />
-                <div v-if="isMastoInitialised && currentUser" p6 pb8 w-full flex="~" items-center justify-between>
+              <div v-if="isMastoInitialised" flex flex-col>
+                <UserSignInEntry v-if="!currentUser" sm:hidden />
+                <div v-if="currentUser" p6 pb8 w-full flex="~" items-center justify-between>
                   <NuxtLink
                     hidden lg:block
                     rounded-full text-start w-full
diff --git a/pages/[[server]]/explore/index.vue b/pages/[[server]]/explore/index.vue
index 0f0e6843..32247959 100644
--- a/pages/[[server]]/explore/index.vue
+++ b/pages/[[server]]/explore/index.vue
@@ -13,7 +13,7 @@ useHeadFixed({
 </script>
 
 <template>
-  <CommonAlert v-if="!hideNewsTips" @close="hideNewsTips = true">
+  <CommonAlert v-if="isHydrated.value && !hideNewsTips" @close="hideNewsTips = true">
     <p>{{ $t('tooltip.explore_posts_intro') }}</p>
   </CommonAlert>
   <!-- TODO: Tabs for trending statuses, tags, and links -->
diff --git a/pages/[[server]]/explore/links.vue b/pages/[[server]]/explore/links.vue
index 9f61b7fe..a81f05bc 100644
--- a/pages/[[server]]/explore/links.vue
+++ b/pages/[[server]]/explore/links.vue
@@ -15,7 +15,7 @@ useHeadFixed({
 </script>
 
 <template>
-  <CommonAlert v-if="!hideNewsTips" @close="hideNewsTips = true">
+  <CommonAlert v-if="isHydrated.value && !hideNewsTips" @close="hideNewsTips = true">
     <p>{{ $t('tooltip.explore_links_intro') }}</p>
   </CommonAlert>
 
diff --git a/pages/[[server]]/explore/tags.vue b/pages/[[server]]/explore/tags.vue
index 4ba20949..1f3d406c 100644
--- a/pages/[[server]]/explore/tags.vue
+++ b/pages/[[server]]/explore/tags.vue
@@ -22,7 +22,7 @@ useHeadFixed({
 </script>
 
 <template>
-  <CommonAlert v-if="!hideTagsTips && data && data.length" @close="hideTagsTips = true">
+  <CommonAlert v-if="isHydrated.value && !hideTagsTips && data && data.length" @close="hideTagsTips = true">
     <p>{{ $t('tooltip.explore_tags_intro') }}</p>
   </CommonAlert>