fix: remove flashing text on page reload (#1939)
This commit is contained in:
parent
13581323b0
commit
c71259334c
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -12,7 +12,7 @@ export function setupPageHeader() {
|
||||
return acc
|
||||
}, {} as Record<string, Directions>)
|
||||
|
||||
useHead({
|
||||
useHydratedHead({
|
||||
htmlAttrs: {
|
||||
lang: () => locale.value,
|
||||
dir: () => localeMap[locale.value] ?? 'ltr',
|
||||
|
@ -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)
|
||||
}
|
||||
|
@ -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})`,
|
||||
})
|
||||
}
|
||||
|
@ -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})`,
|
||||
})
|
||||
}
|
||||
|
@ -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})`,
|
||||
})
|
||||
}
|
||||
|
@ -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})`,
|
||||
})
|
||||
}
|
||||
|
@ -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})`,
|
||||
})
|
||||
}
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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')}`,
|
||||
})
|
||||
}
|
||||
|
@ -11,7 +11,7 @@ const client = useMastoClient()
|
||||
|
||||
const paginator = client.v1.lists.list()
|
||||
|
||||
useHead({
|
||||
useHydratedHead({
|
||||
title: () => t('nav.lists'),
|
||||
})
|
||||
|
||||
|
@ -3,7 +3,7 @@
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
useHead({
|
||||
useHydratedHead({
|
||||
title: () => t('title.federated_timeline'),
|
||||
})
|
||||
</script>
|
||||
|
@ -2,7 +2,7 @@
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
useHead({
|
||||
useHydratedHead({
|
||||
title: () => t('title.local_timeline'),
|
||||
})
|
||||
</script>
|
||||
|
@ -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}`,
|
||||
})
|
||||
}
|
||||
|
@ -5,7 +5,7 @@ definePageMeta({
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
useHead({
|
||||
useHydratedHead({
|
||||
title: () => t('nav.blocked_users'),
|
||||
})
|
||||
</script>
|
||||
|
@ -5,7 +5,7 @@ definePageMeta({
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
useHead({
|
||||
useHydratedHead({
|
||||
title: () => t('nav.bookmarks'),
|
||||
})
|
||||
</script>
|
||||
|
@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
const { t } = useI18n()
|
||||
useHead({
|
||||
useHydratedHead({
|
||||
title: () => t('nav.compose'),
|
||||
})
|
||||
</script>
|
||||
|
@ -5,7 +5,7 @@ definePageMeta({
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
useHead({
|
||||
useHydratedHead({
|
||||
title: () => t('nav.conversations'),
|
||||
})
|
||||
</script>
|
||||
|
@ -5,7 +5,7 @@ definePageMeta({
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
useHead({
|
||||
useHydratedHead({
|
||||
title: () => t('nav.blocked_domains'),
|
||||
})
|
||||
</script>
|
||||
|
@ -5,7 +5,7 @@ definePageMeta({
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
useHead({
|
||||
useHydratedHead({
|
||||
title: () => t('nav.favourites'),
|
||||
})
|
||||
</script>
|
||||
|
@ -12,7 +12,7 @@ if (process.client && route.path === '/signin/callback')
|
||||
router.push('/home')
|
||||
|
||||
const { t } = useI18n()
|
||||
useHead({
|
||||
useHydratedHead({
|
||||
title: () => t('nav.home'),
|
||||
})
|
||||
</script>
|
||||
|
@ -5,7 +5,7 @@ definePageMeta({
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
useHead({
|
||||
useHydratedHead({
|
||||
title: () => t('nav.muted_users'),
|
||||
})
|
||||
</script>
|
||||
|
@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
const { t } = useI18n()
|
||||
useHead({
|
||||
useHydratedHead({
|
||||
title: () => `${t('tab.notifications_all')} | ${t('nav.notifications')}`,
|
||||
})
|
||||
</script>
|
||||
|
@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
const { t } = useI18n()
|
||||
useHead({
|
||||
useHydratedHead({
|
||||
title: () => `${t('tab.notifications_mention')} | ${t('nav.notifications')}`,
|
||||
})
|
||||
</script>
|
||||
|
@ -5,7 +5,7 @@ definePageMeta({
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
useHead({
|
||||
useHydratedHead({
|
||||
title: () => t('account.pinned'),
|
||||
})
|
||||
</script>
|
||||
|
@ -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/')"
|
||||
/>
|
||||
|
@ -2,7 +2,7 @@
|
||||
const buildInfo = useBuildInfo()
|
||||
const { t } = useI18n()
|
||||
|
||||
useHead({
|
||||
useHydratedHead({
|
||||
title: () => `${t('settings.about.label')} | ${t('nav.settings')}`,
|
||||
})
|
||||
|
||||
|
@ -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>
|
||||
|
@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
const { t } = useI18n()
|
||||
|
||||
useHead({
|
||||
useHydratedHead({
|
||||
title: () => `${t('settings.interface.label')} | ${t('nav.settings')}`,
|
||||
})
|
||||
</script>
|
||||
|
@ -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(() => {
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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 />
|
||||
|
@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
const { t } = useI18n()
|
||||
|
||||
useHead({
|
||||
useHydratedHead({
|
||||
title: () => `${t('settings.preferences.label')} | ${t('nav.settings')}`,
|
||||
})
|
||||
|
||||
|
@ -9,7 +9,7 @@ definePageMeta({
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
useHead({
|
||||
useHydratedHead({
|
||||
title: () => `${t('settings.profile.appearance.title')} | ${t('nav.settings')}`,
|
||||
})
|
||||
|
||||
|
@ -5,7 +5,7 @@ definePageMeta({
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
useHead({
|
||||
useHydratedHead({
|
||||
title: () => `${t('settings.profile.featured_tags.label')} | ${t('nav.settings')}`,
|
||||
})
|
||||
</script>
|
||||
|
@ -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
|
||||
|
@ -5,7 +5,7 @@ import type { UserLogin } from '~/types'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
useHead({
|
||||
useHydratedHead({
|
||||
title: () => `${t('settings.users.label')} | ${t('nav.settings')}`,
|
||||
})
|
||||
|
||||
|
@ -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)
|
||||
|
Loading…
Reference in New Issue
Block a user