From 645da2f94561eeb5f4d6db41d44c38e909e45fe0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Mon, 2 Jan 2023 04:43:09 +0800
Subject: [PATCH] fix: omit value property of isHydrated in template (#681)

---
 components/publish/PublishAttachment.vue |  4 ++--
 composables/hydration.ts                 | 14 ++++----------
 layouts/default.vue                      |  4 ++--
 pages/[[server]]/explore/index.vue       |  2 +-
 pages/[[server]]/explore/links.vue       |  2 +-
 pages/[[server]]/explore/tags.vue        |  2 +-
 pages/settings.vue                       |  4 ++--
 pages/settings/profile/appearance.vue    |  2 ++
 8 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/components/publish/PublishAttachment.vue b/components/publish/PublishAttachment.vue
index c09dc72a..35adc068 100644
--- a/components/publish/PublishAttachment.vue
+++ b/components/publish/PublishAttachment.vue
@@ -31,11 +31,11 @@ const toggleApply = () => {
         v-if="removable"
         :aria-label="$t('attachment.remove_label')"
         hover:bg="gray/40" transition-100 p-1 rounded-5 cursor-pointer
-        :class="[isHydrated.value && isSmallScreen ? '' : 'op-0 group-hover:op-100hover:']"
+        :class="[isHydrated && isSmallScreen ? '' : 'op-0 group-hover:op-100hover:']"
         mix-blend-difference
         @click="$emit('remove')"
       >
-        <div i-ri:close-line text-3 :class="[isHydrated.value && isSmallScreen ? 'text-6' : 'text-3']" />
+        <div i-ri:close-line text-3 :class="[isHydrated && isSmallScreen ? 'text-6' : 'text-3']" />
       </div>
     </div>
     <div absolute right-2 bottom-2>
diff --git a/composables/hydration.ts b/composables/hydration.ts
index 84ead784..98fad034 100644
--- a/composables/hydration.ts
+++ b/composables/hydration.ts
@@ -1,14 +1,8 @@
-export const isHydrated = computed(() => {
-  if (process.server)
-    return { value: false }
+export const isHydrated = ref(false)
 
+if (!process.server) {
   const nuxtApp = useNuxtApp()
-  if (!nuxtApp.isHydrating)
-    return { value: false }
-
-  const hydrated = ref(false)
   nuxtApp.hooks.hookOnce('app:suspense:resolve', () => {
-    hydrated.value = true
+    isHydrated.value = true
   })
-  return hydrated
-})
+}
diff --git a/layouts/default.vue b/layouts/default.vue
index 390b767b..e3b19dbe 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -45,8 +45,8 @@ const wideLayout = computed(() => route.meta.wideLayout ?? false)
           <slot />
         </div>
         <div sm:hidden sticky left-0 right-0 bottom-0 z-10 bg-base pb="[env(safe-area-inset-bottom)]" transition="padding 20">
-          <CommonOfflineChecker :small-screen="isHydrated.value" />
-          <NavBottom v-if="isHydrated.value" />
+          <CommonOfflineChecker :small-screen="isHydrated" />
+          <NavBottom v-if="isHydrated" />
         </div>
       </div>
       <aside v-if="!wideLayout" class="hidden sm:none lg:block w-1/4 zen-hide">
diff --git a/pages/[[server]]/explore/index.vue b/pages/[[server]]/explore/index.vue
index 826ae4ca..289d93be 100644
--- a/pages/[[server]]/explore/index.vue
+++ b/pages/[[server]]/explore/index.vue
@@ -13,7 +13,7 @@ useHeadFixed({
 </script>
 
 <template>
-  <CommonAlert v-if="isHydrated.value && !hideNewsTips" @close="hideNewsTips = true">
+  <CommonAlert v-if="isHydrated && !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 05a88dd3..a3208ec7 100644
--- a/pages/[[server]]/explore/links.vue
+++ b/pages/[[server]]/explore/links.vue
@@ -13,7 +13,7 @@ useHeadFixed({
 </script>
 
 <template>
-  <CommonAlert v-if="isHydrated.value && !hideNewsTips" @close="hideNewsTips = true">
+  <CommonAlert v-if="isHydrated && !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 b76614dd..757aed2f 100644
--- a/pages/[[server]]/explore/tags.vue
+++ b/pages/[[server]]/explore/tags.vue
@@ -22,7 +22,7 @@ useHeadFixed({
 </script>
 
 <template>
-  <CommonAlert v-if="isHydrated.value && !hideTagsTips && data && data.length" @close="hideTagsTips = true">
+  <CommonAlert v-if="isHydrated && !hideTagsTips && data && data.length" @close="hideTagsTips = true">
     <p>{{ $t('tooltip.explore_tags_intro') }}</p>
   </CommonAlert>
 
diff --git a/pages/settings.vue b/pages/settings.vue
index eba71bce..e3d5162f 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -21,8 +21,8 @@ const isRootPath = computedEager(() => route.name === 'settings')
           </template>
           <div xl:w-97 lg:w-78 w-full>
             <SettingsNavItem
-              v-show="currentUser"
-              :command="!!currentUser"
+              v-if="isHydrated && currentUser "
+              command
               icon="i-ri:user-line"
               :text="$t('settings.profile.label')"
               to="/settings/profile"
diff --git a/pages/settings/profile/appearance.vue b/pages/settings/profile/appearance.vue
index 1b5875e2..bb1e28c8 100644
--- a/pages/settings/profile/appearance.vue
+++ b/pages/settings/profile/appearance.vue
@@ -69,6 +69,7 @@ const { submit, submitting } = submitter(async ({ dirtyFields }) => {
         <!-- banner -->
         <div of-hidden bg="gray-500/20" aspect="3">
           <CommonInputImage
+            v-if="isHydrated"
             ref="elInputImage"
             v-model="form.header"
             :original="onlineSrc.header"
@@ -80,6 +81,7 @@ const { submit, submitting } = submitter(async ({ dirtyFields }) => {
         <!-- avatar -->
         <div px-4>
           <CommonInputImage
+            v-if="isHydrated"
             v-model="form.avatar"
             :original="onlineSrc.avatar"
             mt--10