fix(layout): stop the page fade firing on every language toggle
Some checks failed
Deploy to Frontend Servers / deploy (push) Failing after 38s
Some checks failed
Deploy to Frontend Servers / deploy (push) Failing after 38s
Switching locale (e.g. cn -> ms or cn -> vi) read as a ~220ms flicker because the <AnimatePresence> wrapping <main> was keyed on the full pathname. Changing the language prefix changed the key, so AnimatePresence treated the swap as a route change and re-ran the page fade transition. Strip the language prefix when computing the key so only real route changes drive AnimatePresence. Same translations render in place, no opacity dip. Measured opacity stays at 1 across a cn -> ms switch in the browser instead of dipping to 0 and back.
This commit is contained in:
@@ -928,7 +928,12 @@ export function PublicLayout() {
|
|||||||
>
|
>
|
||||||
<AnimatePresence mode="wait" initial={false}>
|
<AnimatePresence mode="wait" initial={false}>
|
||||||
<m.div
|
<m.div
|
||||||
key={`${pathname}${search}`}
|
// Key on the language-stripped path so switching locale (e.g.
|
||||||
|
// /cn/browse → /ms/browse) is not seen as a route change. Without
|
||||||
|
// this the AnimatePresence fade-out/fade-in (~220ms) fires on every
|
||||||
|
// language toggle and reads as a flicker, especially for ms / vi
|
||||||
|
// where the nav width also changes and re-runs layout.
|
||||||
|
key={`${stripLangPrefix(pathname)}${search}`}
|
||||||
variants={pageTransition}
|
variants={pageTransition}
|
||||||
initial="initial"
|
initial="initial"
|
||||||
animate="enter"
|
animate="enter"
|
||||||
|
|||||||
Reference in New Issue
Block a user