From c71259334c313c1fef968c914a64d29d9335f4dd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= <userquin@gmail.com>
Date: Sun, 16 Apr 2023 21:33:51 +0200
Subject: [PATCH] fix: remove flashing text on page reload (#1939)

---
 components/nav/NavTitle.vue                   |  2 +-
 components/status/StatusDetails.vue           |  2 +-
 composables/setups.ts                         |  2 +-
 composables/vue.ts                            | 24 +++++++++++++++++++
 .../[[server]]/@[account]/index/followers.vue |  2 +-
 .../[[server]]/@[account]/index/following.vue |  2 +-
 pages/[[server]]/@[account]/index/index.vue   |  2 +-
 pages/[[server]]/@[account]/index/media.vue   |  2 +-
 .../@[account]/index/with_replies.vue         |  2 +-
 pages/[[server]]/explore/index.vue            |  2 +-
 pages/[[server]]/explore/links.vue            |  2 +-
 pages/[[server]]/explore/tags.vue             |  2 +-
 pages/[[server]]/explore/users.vue            |  2 +-
 pages/[[server]]/list/[list]/index.vue        |  2 +-
 pages/[[server]]/lists.vue                    |  2 +-
 pages/[[server]]/public/index.vue             |  2 +-
 pages/[[server]]/public/local.vue             |  2 +-
 pages/[[server]]/tags/[tag].vue               |  2 +-
 pages/blocks.vue                              |  2 +-
 pages/bookmarks.vue                           |  2 +-
 pages/compose.vue                             |  2 +-
 pages/conversations.vue                       |  2 +-
 pages/domain_blocks.vue                       |  2 +-
 pages/favourites.vue                          |  2 +-
 pages/home.vue                                |  2 +-
 pages/mutes.vue                               |  2 +-
 pages/notifications/index.vue                 |  2 +-
 pages/notifications/mention.vue               |  2 +-
 pages/pinned.vue                              |  2 +-
 pages/settings.vue                            | 16 ++++++-------
 pages/settings/about/index.vue                |  2 +-
 pages/settings/index.vue                      |  2 +-
 pages/settings/interface/index.vue            |  2 +-
 pages/settings/language/index.vue             |  2 +-
 pages/settings/notifications/index.vue        | 10 ++++----
 .../settings/notifications/notifications.vue  |  8 +++----
 .../notifications/push-notifications.vue      |  4 ++--
 pages/settings/preferences/index.vue          |  2 +-
 pages/settings/profile/appearance.vue         |  2 +-
 pages/settings/profile/featured-tags.vue      |  2 +-
 pages/settings/profile/index.vue              | 12 +++++-----
 pages/settings/users/index.vue                |  2 +-
 plugins/setup-i18n.client.ts                  |  3 +++
 43 files changed, 88 insertions(+), 61 deletions(-)

diff --git a/components/nav/NavTitle.vue b/components/nav/NavTitle.vue
index 50aea7115b..3e4423165a 100644
--- a/components/nav/NavTitle.vue
+++ b/components/nav/NavTitle.vue
@@ -29,7 +29,7 @@ router.afterEach(() => {
       @click.prevent="onClickLogo"
     >
       <NavLogo shrink-0 aspect="1/1" sm:h-8 xl:h-10 class="rtl-flip" />
-      <div hidden xl:block text-secondary>
+      <div v-show="isHydrated" hidden xl:block text-secondary>
         {{ $t('app_name') }} <sup text-sm italic mt-1>{{ env === 'release' ? 'alpha' : env }}</sup>
       </div>
     </NuxtLink>
diff --git a/components/status/StatusDetails.vue b/components/status/StatusDetails.vue
index 3a0bd14883..6a8226749a 100644
--- a/components/status/StatusDetails.vue
+++ b/components/status/StatusDetails.vue
@@ -20,7 +20,7 @@ const createdAt = useFormattedDateTime(status.createdAt)
 
 const { t } = useI18n()
 
-useHead({
+useHydratedHead({
   title: () => `${getDisplayName(status.account)} ${t('common.in')} ${t('app_name')}: "${removeHTMLTags(status.content) || ''}"`,
 })
 </script>
diff --git a/composables/setups.ts b/composables/setups.ts
index 739f45adf0..28b08c0a38 100644
--- a/composables/setups.ts
+++ b/composables/setups.ts
@@ -12,7 +12,7 @@ export function setupPageHeader() {
     return acc
   }, {} as Record<string, Directions>)
 
-  useHead({
+  useHydratedHead({
     htmlAttrs: {
       lang: () => locale.value,
       dir: () => localeMap[locale.value] ?? 'ltr',
diff --git a/composables/vue.ts b/composables/vue.ts
index 9c6cb38d55..7f98f6b044 100644
--- a/composables/vue.ts
+++ b/composables/vue.ts
@@ -1,5 +1,7 @@
 import type { ComponentInternalInstance } from 'vue'
 import { onActivated, onDeactivated, ref } from 'vue'
+import type { ActiveHeadEntry, HeadEntryOptions, UseHeadInput } from '@vueuse/head'
+import type { SchemaAugmentations } from '@unhead/schema'
 
 export const isHydrated = ref(false)
 
@@ -34,3 +36,25 @@ export function onReactivated(hook: Function, target?: ComponentInternalInstance
   }, target)
   onDeactivated(() => initial.value = false)
 }
+
+export function useHydratedHead<T extends SchemaAugmentations>(input: UseHeadInput<T>, options?: HeadEntryOptions): ActiveHeadEntry<UseHeadInput<T>> | void {
+  if (input && typeof input === 'object' && !('value' in input)) {
+    const title = 'title' in input ? input.title : undefined
+    if (process.server && title) {
+      input.meta = input.meta || []
+      if (Array.isArray(input.meta)) {
+        input.meta.push(
+          { property: 'og:title', content: (typeof input.title === 'function' ? input.title() : input.title) as string },
+        )
+      }
+    }
+    else if (title) {
+      (input as any).title = () => isHydrated.value ? typeof title === 'function' ? title() : title : ''
+    }
+  }
+  return useHead(() => {
+    if (!isHydrated.value)
+      return {}
+    return resolveUnref(input)
+  }, options)
+}
diff --git a/pages/[[server]]/@[account]/index/followers.vue b/pages/[[server]]/@[account]/index/followers.vue
index dcb4ebe4d0..691ae2fa3c 100644
--- a/pages/[[server]]/@[account]/index/followers.vue
+++ b/pages/[[server]]/@[account]/index/followers.vue
@@ -11,7 +11,7 @@ const paginator = account ? useMastoClient().v1.accounts.listFollowers(account.i
 const isSelf = useSelfAccount(account)
 
 if (account) {
-  useHead({
+  useHydratedHead({
     title: () => `${t('account.followers')} | ${getDisplayName(account)} (@${account.acct})`,
   })
 }
diff --git a/pages/[[server]]/@[account]/index/following.vue b/pages/[[server]]/@[account]/index/following.vue
index b65f749d00..173502b975 100644
--- a/pages/[[server]]/@[account]/index/following.vue
+++ b/pages/[[server]]/@[account]/index/following.vue
@@ -11,7 +11,7 @@ const paginator = account ? useMastoClient().v1.accounts.listFollowing(account.i
 const isSelf = useSelfAccount(account)
 
 if (account) {
-  useHead({
+  useHydratedHead({
     title: () => `${t('account.following')} | ${getDisplayName(account)} (@${account.acct})`,
   })
 }
diff --git a/pages/[[server]]/@[account]/index/index.vue b/pages/[[server]]/@[account]/index/index.vue
index e05b07e85a..b909ca2de8 100644
--- a/pages/[[server]]/@[account]/index/index.vue
+++ b/pages/[[server]]/@[account]/index/index.vue
@@ -17,7 +17,7 @@ function reorderAndFilter(items: mastodon.v1.Status[]) {
 const paginator = useMastoClient().v1.accounts.listStatuses(account.id, { limit: 30, excludeReplies: true })
 
 if (account) {
-  useHead({
+  useHydratedHead({
     title: () => `${t('account.posts')} | ${getDisplayName(account)} (@${account.acct})`,
   })
 }
diff --git a/pages/[[server]]/@[account]/index/media.vue b/pages/[[server]]/@[account]/index/media.vue
index 6db9760a81..1ff955acb2 100644
--- a/pages/[[server]]/@[account]/index/media.vue
+++ b/pages/[[server]]/@[account]/index/media.vue
@@ -10,7 +10,7 @@ const account = await fetchAccountByHandle(handle)
 const paginator = useMastoClient().v1.accounts.listStatuses(account.id, { onlyMedia: true, excludeReplies: false })
 
 if (account) {
-  useHead({
+  useHydratedHead({
     title: () => `${t('tab.media')} | ${getDisplayName(account)} (@${account.acct})`,
   })
 }
diff --git a/pages/[[server]]/@[account]/index/with_replies.vue b/pages/[[server]]/@[account]/index/with_replies.vue
index b5501c9196..189a8d5f7b 100644
--- a/pages/[[server]]/@[account]/index/with_replies.vue
+++ b/pages/[[server]]/@[account]/index/with_replies.vue
@@ -10,7 +10,7 @@ const account = await fetchAccountByHandle(handle)
 const paginator = useMastoClient().v1.accounts.listStatuses(account.id, { excludeReplies: false })
 
 if (account) {
-  useHead({
+  useHydratedHead({
     title: () => `${t('tab.posts_with_replies')} | ${getDisplayName(account)} (@${account.acct})`,
   })
 }
diff --git a/pages/[[server]]/explore/index.vue b/pages/[[server]]/explore/index.vue
index df53e0becf..56d825d033 100644
--- a/pages/[[server]]/explore/index.vue
+++ b/pages/[[server]]/explore/index.vue
@@ -7,7 +7,7 @@ const paginator = useMastoClient().v1.trends.listStatuses()
 
 const hideNewsTips = useLocalStorage(STORAGE_KEY_HIDE_EXPLORE_POSTS_TIPS, false)
 
-useHead({
+useHydratedHead({
   title: () => `${t('tab.posts')} | ${t('nav.explore')}`,
 })
 </script>
diff --git a/pages/[[server]]/explore/links.vue b/pages/[[server]]/explore/links.vue
index 92b103099b..bafcfbc2dc 100644
--- a/pages/[[server]]/explore/links.vue
+++ b/pages/[[server]]/explore/links.vue
@@ -7,7 +7,7 @@ const paginator = useMastoClient().v1.trends.listLinks()
 
 const hideNewsTips = useLocalStorage(STORAGE_KEY_HIDE_EXPLORE_NEWS_TIPS, false)
 
-useHead({
+useHydratedHead({
   title: () => `${t('tab.news')} | ${t('nav.explore')}`,
 })
 </script>
diff --git a/pages/[[server]]/explore/tags.vue b/pages/[[server]]/explore/tags.vue
index dadbc5ed32..d21aeb2ac9 100644
--- a/pages/[[server]]/explore/tags.vue
+++ b/pages/[[server]]/explore/tags.vue
@@ -10,7 +10,7 @@ const paginator = client.v1.trends.listTags({
 
 const hideTagsTips = useLocalStorage(STORAGE_KEY_HIDE_EXPLORE_TAGS_TIPS, false)
 
-useHead({
+useHydratedHead({
   title: () => `${t('tab.hashtags')} | ${t('nav.explore')}`,
 })
 </script>
diff --git a/pages/[[server]]/explore/users.vue b/pages/[[server]]/explore/users.vue
index b30800941f..b711423d1f 100644
--- a/pages/[[server]]/explore/users.vue
+++ b/pages/[[server]]/explore/users.vue
@@ -4,7 +4,7 @@ const { t } = useI18n()
 // limit: 20 is the default configuration of the official client
 const paginator = useMastoClient().v2.suggestions.list({ limit: 20 })
 
-useHead({
+useHydratedHead({
   title: () => `${t('tab.for_you')} | ${t('nav.explore')}`,
 })
 </script>
diff --git a/pages/[[server]]/list/[list]/index.vue b/pages/[[server]]/list/[list]/index.vue
index 1780ebcfe5..05407553ed 100644
--- a/pages/[[server]]/list/[list]/index.vue
+++ b/pages/[[server]]/list/[list]/index.vue
@@ -35,7 +35,7 @@ const { client } = $(useMasto())
 const { data: listInfo, refresh } = $(await useAsyncData(() => client.v1.lists.fetch(list), { default: () => shallowRef() }))
 
 if (listInfo) {
-  useHead({
+  useHydratedHead({
     title: () => `${listInfo.title} | ${route.fullPath.endsWith('/accounts') ? t('tab.accounts') : t('tab.posts')} | ${t('nav.lists')}`,
   })
 }
diff --git a/pages/[[server]]/lists.vue b/pages/[[server]]/lists.vue
index e7bf915380..605d8dc6dd 100644
--- a/pages/[[server]]/lists.vue
+++ b/pages/[[server]]/lists.vue
@@ -11,7 +11,7 @@ const client = useMastoClient()
 
 const paginator = client.v1.lists.list()
 
-useHead({
+useHydratedHead({
   title: () => t('nav.lists'),
 })
 
diff --git a/pages/[[server]]/public/index.vue b/pages/[[server]]/public/index.vue
index e1fb4a2100..99b9db208d 100644
--- a/pages/[[server]]/public/index.vue
+++ b/pages/[[server]]/public/index.vue
@@ -3,7 +3,7 @@
 
 const { t } = useI18n()
 
-useHead({
+useHydratedHead({
   title: () => t('title.federated_timeline'),
 })
 </script>
diff --git a/pages/[[server]]/public/local.vue b/pages/[[server]]/public/local.vue
index 18e80bec7b..93ed9d171f 100644
--- a/pages/[[server]]/public/local.vue
+++ b/pages/[[server]]/public/local.vue
@@ -2,7 +2,7 @@
 
 const { t } = useI18n()
 
-useHead({
+useHydratedHead({
   title: () => t('title.local_timeline'),
 })
 </script>
diff --git a/pages/[[server]]/tags/[tag].vue b/pages/[[server]]/tags/[tag].vue
index 847ae7f5f0..dfbc0cfee7 100644
--- a/pages/[[server]]/tags/[tag].vue
+++ b/pages/[[server]]/tags/[tag].vue
@@ -13,7 +13,7 @@ const paginator = client.v1.timelines.listHashtag(tagName)
 const stream = useStreaming(client => client.v1.stream.streamTagTimeline(tagName))
 
 if (tag) {
-  useHead({
+  useHydratedHead({
     title: () => `#${tag.name}`,
   })
 }
diff --git a/pages/blocks.vue b/pages/blocks.vue
index 4e3b6015dd..df78355d4b 100644
--- a/pages/blocks.vue
+++ b/pages/blocks.vue
@@ -5,7 +5,7 @@ definePageMeta({
 
 const { t } = useI18n()
 
-useHead({
+useHydratedHead({
   title: () => t('nav.blocked_users'),
 })
 </script>
diff --git a/pages/bookmarks.vue b/pages/bookmarks.vue
index 1d0ed8860c..efebad8c9a 100644
--- a/pages/bookmarks.vue
+++ b/pages/bookmarks.vue
@@ -5,7 +5,7 @@ definePageMeta({
 
 const { t } = useI18n()
 
-useHead({
+useHydratedHead({
   title: () => t('nav.bookmarks'),
 })
 </script>
diff --git a/pages/compose.vue b/pages/compose.vue
index 656ca1fc4d..a21ad45261 100644
--- a/pages/compose.vue
+++ b/pages/compose.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const { t } = useI18n()
-useHead({
+useHydratedHead({
   title: () => t('nav.compose'),
 })
 </script>
diff --git a/pages/conversations.vue b/pages/conversations.vue
index 5c17537bac..f0ab6d4099 100644
--- a/pages/conversations.vue
+++ b/pages/conversations.vue
@@ -5,7 +5,7 @@ definePageMeta({
 
 const { t } = useI18n()
 
-useHead({
+useHydratedHead({
   title: () => t('nav.conversations'),
 })
 </script>
diff --git a/pages/domain_blocks.vue b/pages/domain_blocks.vue
index 663292b6e1..5f981c3e67 100644
--- a/pages/domain_blocks.vue
+++ b/pages/domain_blocks.vue
@@ -5,7 +5,7 @@ definePageMeta({
 
 const { t } = useI18n()
 
-useHead({
+useHydratedHead({
   title: () => t('nav.blocked_domains'),
 })
 </script>
diff --git a/pages/favourites.vue b/pages/favourites.vue
index 7f840e4b1b..e4458fbda7 100644
--- a/pages/favourites.vue
+++ b/pages/favourites.vue
@@ -5,7 +5,7 @@ definePageMeta({
 
 const { t } = useI18n()
 
-useHead({
+useHydratedHead({
   title: () => t('nav.favourites'),
 })
 </script>
diff --git a/pages/home.vue b/pages/home.vue
index 3bbf29fbfe..ef85d19723 100644
--- a/pages/home.vue
+++ b/pages/home.vue
@@ -12,7 +12,7 @@ if (process.client && route.path === '/signin/callback')
   router.push('/home')
 
 const { t } = useI18n()
-useHead({
+useHydratedHead({
   title: () => t('nav.home'),
 })
 </script>
diff --git a/pages/mutes.vue b/pages/mutes.vue
index c1e0bda90b..a9b5d24249 100644
--- a/pages/mutes.vue
+++ b/pages/mutes.vue
@@ -5,7 +5,7 @@ definePageMeta({
 
 const { t } = useI18n()
 
-useHead({
+useHydratedHead({
   title: () => t('nav.muted_users'),
 })
 </script>
diff --git a/pages/notifications/index.vue b/pages/notifications/index.vue
index e9873b95fd..99d18ebdf5 100644
--- a/pages/notifications/index.vue
+++ b/pages/notifications/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const { t } = useI18n()
-useHead({
+useHydratedHead({
   title: () => `${t('tab.notifications_all')} | ${t('nav.notifications')}`,
 })
 </script>
diff --git a/pages/notifications/mention.vue b/pages/notifications/mention.vue
index 8a58491460..e65a752271 100644
--- a/pages/notifications/mention.vue
+++ b/pages/notifications/mention.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 const { t } = useI18n()
-useHead({
+useHydratedHead({
   title: () => `${t('tab.notifications_mention')} | ${t('nav.notifications')}`,
 })
 </script>
diff --git a/pages/pinned.vue b/pages/pinned.vue
index f573c10ff9..5ea9c7c4db 100644
--- a/pages/pinned.vue
+++ b/pages/pinned.vue
@@ -5,7 +5,7 @@ definePageMeta({
 
 const { t } = useI18n()
 
-useHead({
+useHydratedHead({
   title: () => t('account.pinned'),
 })
 </script>
diff --git a/pages/settings.vue b/pages/settings.vue
index 38c81872c3..9f38259446 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -5,7 +5,7 @@ definePageMeta({
 
 const { t } = useI18n()
 
-useHead({
+useHydratedHead({
   title: () => t('nav.settings'),
 })
 
@@ -22,12 +22,12 @@ const isRootPath = computedEager(() => route.name === 'settings')
           <template #title>
             <div timeline-title-style flex items-center gap-2 @click="$scrollToTop">
               <div i-ri:settings-3-line />
-              <span>{{ $t('nav.settings') }}</span>
+              <span>{{ isHydrated ? $t('nav.settings') : '' }}</span>
             </div>
           </template>
           <div xl:w-97 lg:w-78 w-full>
             <SettingsItem
-              v-if="isHydrated && currentUser "
+              v-if="isHydrated && currentUser"
               command
               icon="i-ri:user-line"
               :text="$t('settings.profile.label')"
@@ -37,7 +37,7 @@ const isRootPath = computedEager(() => route.name === 'settings')
             <SettingsItem
               command
               icon="i-ri-compasses-2-line"
-              :text="$t('settings.interface.label')"
+              :text="isHydrated ? $t('settings.interface.label') : ''"
               to="/settings/interface"
               :match="$route.path.startsWith('/settings/interface/')"
             />
@@ -52,28 +52,28 @@ const isRootPath = computedEager(() => route.name === 'settings')
             <SettingsItem
               command
               icon="i-ri-globe-line"
-              :text="$t('settings.language.label')"
+              :text="isHydrated ? $t('settings.language.label') : ''"
               to="/settings/language"
               :match="$route.path.startsWith('/settings/language/')"
             />
             <SettingsItem
               command
               icon="i-ri-equalizer-line"
-              :text="$t('settings.preferences.label')"
+              :text="isHydrated ? $t('settings.preferences.label') : ''"
               to="/settings/preferences"
               :match="$route.path.startsWith('/settings/preferences/')"
             />
             <SettingsItem
               command
               icon="i-ri-group-line"
-              :text="$t('settings.users.label')"
+              :text="isHydrated ? $t('settings.users.label') : ''"
               to="/settings/users"
               :match="$route.path.startsWith('/settings/users/')"
             />
             <SettingsItem
               command
               icon="i-ri:information-line"
-              :text="$t('settings.about.label')"
+              :text="isHydrated ? $t('settings.about.label') : ''"
               to="/settings/about"
               :match="$route.path.startsWith('/settings/about/')"
             />
diff --git a/pages/settings/about/index.vue b/pages/settings/about/index.vue
index 03b19e1066..c7bae8da9f 100644
--- a/pages/settings/about/index.vue
+++ b/pages/settings/about/index.vue
@@ -2,7 +2,7 @@
 const buildInfo = useBuildInfo()
 const { t } = useI18n()
 
-useHead({
+useHydratedHead({
   title: () => `${t('settings.about.label')} | ${t('nav.settings')}`,
 })
 
diff --git a/pages/settings/index.vue b/pages/settings/index.vue
index c0ee620708..e3c4d7595d 100644
--- a/pages/settings/index.vue
+++ b/pages/settings/index.vue
@@ -2,7 +2,7 @@
   <div min-h-screen flex justify-center items-center>
     <div text-center flex="~ col gap-2" items-center>
       <div i-ri:settings-3-line text-5xl />
-      <span text-xl>{{ $t('settings.select_a_settings') }}</span>
+      <span text-xl>{{ isHydrated ? $t('settings.select_a_settings') : '' }}</span>
     </div>
   </div>
 </template>
diff --git a/pages/settings/interface/index.vue b/pages/settings/interface/index.vue
index 2ac209704c..94ef7e97a9 100644
--- a/pages/settings/interface/index.vue
+++ b/pages/settings/interface/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const { t } = useI18n()
 
-useHead({
+useHydratedHead({
   title: () => `${t('settings.interface.label')} | ${t('nav.settings')}`,
 })
 </script>
diff --git a/pages/settings/language/index.vue b/pages/settings/language/index.vue
index 5f16bb111e..2ff488cacd 100644
--- a/pages/settings/language/index.vue
+++ b/pages/settings/language/index.vue
@@ -5,7 +5,7 @@ const { t, locale } = useI18n()
 
 const translationStatus: ElkTranslationStatus = await import('~/elk-translation-status.json').then(m => m.default)
 
-useHead({
+useHydratedHead({
   title: () => `${t('settings.language.label')} | ${t('nav.settings')}`,
 })
 const status = computed(() => {
diff --git a/pages/settings/notifications/index.vue b/pages/settings/notifications/index.vue
index 80704319a6..af14ddf39e 100644
--- a/pages/settings/notifications/index.vue
+++ b/pages/settings/notifications/index.vue
@@ -6,7 +6,7 @@ definePageMeta({
 const { t } = useI18n()
 const pwaEnabled = useAppConfig().pwaEnabled
 
-useHead({
+useHydratedHead({
   title: () => `${t('settings.notifications.label')} | ${t('nav.settings')}`,
 })
 </script>
@@ -15,20 +15,20 @@ useHead({
   <MainContent back-on-small-screen>
     <template #title>
       <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
-        <span>{{ $t('settings.notifications.label') }}</span>
+        <span>{{ isHydrated ? $t('settings.notifications.label') : '' }}</span>
       </div>
     </template>
 
     <SettingsItem
       command
-      :text="$t('settings.notifications.notifications.label')"
+      :text="isHydrated ? $t('settings.notifications.notifications.label') : ''"
       to="/settings/notifications/notifications"
     />
     <SettingsItem
       command
       :disabled="!pwaEnabled"
-      :text="$t('settings.notifications.push_notifications.label')"
-      :description="$t('settings.notifications.push_notifications.description')"
+      :text="isHydrated ? $t('settings.notifications.push_notifications.label') : ''"
+      :description="isHydrated ? $t('settings.notifications.push_notifications.description') : ''"
       to="/settings/notifications/push-notifications"
     />
   </MainContent>
diff --git a/pages/settings/notifications/notifications.vue b/pages/settings/notifications/notifications.vue
index e58ee4486b..22d3022051 100644
--- a/pages/settings/notifications/notifications.vue
+++ b/pages/settings/notifications/notifications.vue
@@ -5,7 +5,7 @@ definePageMeta({
 
 const { t } = useI18n()
 
-useHead({
+useHydratedHead({
   title: () => `${t('settings.notifications.notifications.label')} | ${t('settings.notifications.label')} | ${t('nav.settings')}`,
 })
 </script>
@@ -14,14 +14,14 @@ useHead({
   <MainContent back>
     <template #title>
       <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
-        <span>{{ $t('settings.notifications.notifications.label') }}</span>
+        <span>{{ isHydrated ? $t('settings.notifications.notifications.label') : '' }}</span>
       </div>
     </template>
     <h3 px6 py4 mt2 font-bold text-xl flex="~ gap-1" items-center>
-      {{ $t('settings.notifications.notifications.label') }}
+      {{ isHydrated ? $t('settings.notifications.notifications.label') : '' }}
     </h3>
     <p text-4xl text-center>
-      <span sr-only>{{ $t('settings.notifications.under_construction') }}</span> 🚧
+      <span sr-only>{{ isHydrated ? $t('settings.notifications.under_construction') : '' }}</span> 🚧
     </p>
   </MainContent>
 </template>
diff --git a/pages/settings/notifications/push-notifications.vue b/pages/settings/notifications/push-notifications.vue
index 5bf238cb8d..cae515c1ee 100644
--- a/pages/settings/notifications/push-notifications.vue
+++ b/pages/settings/notifications/push-notifications.vue
@@ -8,7 +8,7 @@ definePageMeta({
 
 const { t } = useI18n()
 
-useHead({
+useHydratedHead({
   title: () => `${t('settings.notifications.push_notifications.label')} | ${t('settings.notifications.label')} | ${t('nav.settings')}`,
 })
 </script>
@@ -17,7 +17,7 @@ useHead({
   <MainContent back>
     <template #title>
       <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
-        <span>{{ $t('settings.notifications.push_notifications.label') }}</span>
+        <span>{{ isHydrated ? $t('settings.notifications.push_notifications.label') : '' }}</span>
       </div>
     </template>
     <NotificationPreferences show />
diff --git a/pages/settings/preferences/index.vue b/pages/settings/preferences/index.vue
index c3344105ac..3fef0a2cdd 100644
--- a/pages/settings/preferences/index.vue
+++ b/pages/settings/preferences/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const { t } = useI18n()
 
-useHead({
+useHydratedHead({
   title: () => `${t('settings.preferences.label')} | ${t('nav.settings')}`,
 })
 
diff --git a/pages/settings/profile/appearance.vue b/pages/settings/profile/appearance.vue
index 21d2044273..19ed6b634f 100644
--- a/pages/settings/profile/appearance.vue
+++ b/pages/settings/profile/appearance.vue
@@ -9,7 +9,7 @@ definePageMeta({
 
 const { t } = useI18n()
 
-useHead({
+useHydratedHead({
   title: () => `${t('settings.profile.appearance.title')} | ${t('nav.settings')}`,
 })
 
diff --git a/pages/settings/profile/featured-tags.vue b/pages/settings/profile/featured-tags.vue
index 7159d8559b..8cbdc6c7b1 100644
--- a/pages/settings/profile/featured-tags.vue
+++ b/pages/settings/profile/featured-tags.vue
@@ -5,7 +5,7 @@ definePageMeta({
 
 const { t } = useI18n()
 
-useHead({
+useHydratedHead({
   title: () => `${t('settings.profile.featured_tags.label')} | ${t('nav.settings')}`,
 })
 </script>
diff --git a/pages/settings/profile/index.vue b/pages/settings/profile/index.vue
index c480767ae9..38b7894b2c 100644
--- a/pages/settings/profile/index.vue
+++ b/pages/settings/profile/index.vue
@@ -5,7 +5,7 @@ definePageMeta({
 
 const { t } = useI18n()
 
-useHead({
+useHydratedHead({
   title: () => `${t('settings.profile.label')} | ${t('nav.settings')}`,
 })
 </script>
@@ -14,22 +14,22 @@ useHead({
   <MainContent back-on-small-screen>
     <template #title>
       <div text-lg font-bold flex items-center gap-2 @click="$scrollToTop">
-        <span>{{ $t('settings.profile.label') }}</span>
+        <span>{{ isHydrated ? $t('settings.profile.label') : '' }}</span>
       </div>
     </template>
 
     <SettingsItem
       command large
       icon="i-ri:user-settings-line"
-      :text="$t('settings.profile.appearance.label')"
-      :description="$t('settings.profile.appearance.description')"
+      :text="isHydrated ? $t('settings.profile.appearance.label') : ''"
+      :description="isHydrated ? $t('settings.profile.appearance.description') : ''"
       to="/settings/profile/appearance"
     />
     <SettingsItem
       command large
       icon="i-ri:hashtag"
-      :text="$t('settings.profile.featured_tags.label')"
-      :description="$t('settings.profile.featured_tags.description')"
+      :text="isHydrated ? $t('settings.profile.featured_tags.label') : ''"
+      :description="isHydrated ? $t('settings.profile.featured_tags.description') : ''"
       to="/settings/profile/featured-tags"
     />
     <SettingsItem
diff --git a/pages/settings/users/index.vue b/pages/settings/users/index.vue
index 82734a09c2..7c3306eb5c 100644
--- a/pages/settings/users/index.vue
+++ b/pages/settings/users/index.vue
@@ -5,7 +5,7 @@ import type { UserLogin } from '~/types'
 
 const { t } = useI18n()
 
-useHead({
+useHydratedHead({
   title: () => `${t('settings.users.label')} | ${t('nav.settings')}`,
 })
 
diff --git a/plugins/setup-i18n.client.ts b/plugins/setup-i18n.client.ts
index c9f1c9dd2a..8cf007c0ae 100644
--- a/plugins/setup-i18n.client.ts
+++ b/plugins/setup-i18n.client.ts
@@ -11,6 +11,9 @@ export default defineNuxtPlugin(async (nuxt) => {
   if (!supportLanguages.includes(lang))
     userSettings.value.language = getDefaultLanguage(supportLanguages)
 
+  if (lang !== i18n.locale)
+    await setLocale(userSettings.value.language)
+
   watch([$$(lang), isHydrated], () => {
     if (isHydrated.value && lang !== i18n.locale)
       setLocale(lang)