fix: omit value property of isHydrated in template (#681)

elk-zone · Jan 1, 2023 · 645da2f · 645da2f
1 parent 6461108
commit 645da2f
Show file tree

Hide file tree

Showing 8 changed files with 15 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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