fix(profile,account): wrap auth-conditional UI in ClientOnly
Vue hydration silently drops class attribute updates when SSR and client render different branches of a v-if chain — per the project's Auth SSR Pattern, useAuth is client-only and server always renders unauthenticated, so PageHeader (v-else branch) was rendering inside a leftover .loading / .loading-state div from the v-else-if branch. On mobile that div was being masked by the visual-test commonMasks (.loading-state), producing a large fuchsia block in the snapshot. Wrapping the v-if/v-else-if/v-else chain in <ClientOnly> ensures the server renders nothing for the auth-gated content and the client performs a clean first render, matching the pattern already used in dashboard.vue. Also update admin-dashboard-desktop for minor anti-aliasing drift.
This commit is contained in:
parent
8365feb970
commit
4a5b129eeb
7 changed files with 4 additions and 0 deletions
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<PageShell>
|
||||
<ClientOnly>
|
||||
<!-- Unauthenticated -->
|
||||
<div v-if="!memberData" class="loading">
|
||||
<p>Please sign in to access your account settings.</p>
|
||||
|
|
@ -191,6 +192,7 @@
|
|||
</ColumnsLayout>
|
||||
</ColumnsLayout>
|
||||
</template>
|
||||
</ClientOnly>
|
||||
</PageShell>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<PageShell as="form" @submit.prevent="handleSubmit">
|
||||
<ClientOnly>
|
||||
<!-- Loading State -->
|
||||
<div v-if="loading" class="loading-state">
|
||||
<p style="color: var(--text-faint)">Loading your profile...</p>
|
||||
|
|
@ -312,6 +313,7 @@
|
|||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
</ClientOnly>
|
||||
|
||||
<!-- Tag Suggest Modal -->
|
||||
<TagSuggestModal v-model:open="showTagSuggestModal" :pool="tagSuggestPool" />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue