From b5a699c6c77e7e89927df43465f3c192f3b631f0 Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Mon, 8 Jun 2026 01:11:09 +0800
Subject: [PATCH] fix(layout): stop the page fade firing on every language
 toggle

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.
---
 src/layouts/PublicLayout.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/layouts/PublicLayout.tsx b/src/layouts/PublicLayout.tsx
index bdae3b9..c45a510 100644
--- a/src/layouts/PublicLayout.tsx
+++ b/src/layouts/PublicLayout.tsx
@@ -928,7 +928,12 @@ export function PublicLayout() {
       >
         <AnimatePresence mode="wait" initial={false}>
           <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}
             initial="initial"
             animate="enter"