From 71cd92e0b5cacedfe890f8d4ca9ec1034a28a733 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 25 Oct 2025 21:13:48 +0300
Subject: [PATCH] fix(website/i18n): header sometimes not correctly translated

---
 apps/website/src/components/Header.tsx | 15 +++++++++------
 apps/website/src/index.tsx             |  7 ++++---
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/apps/website/src/components/Header.tsx b/apps/website/src/components/Header.tsx
index e4cd7cc3f..1d13d6b69 100644
--- a/apps/website/src/components/Header.tsx
+++ b/apps/website/src/components/Header.tsx
@@ -23,11 +23,14 @@ export function Header(props: {repoStargazersCount: number}) {
     const locale = useContext(LocaleContext);
     const [ mobileMenuShown, setMobileMenuShown ] = useState(false);
 
-    const HEADER_LINKS = useMemo<HeaderLink[]>(() => [
-        { url: "/get-started/", text: t("header.get-started") },
-        { url: "https://docs.triliumnotes.org/", text: t("header.documentation"), external: true },
-        { url: "/support-us/", text: t("header.support-us") }
-    ], [ locale ]);
+    const [ headerLinks, setHeaderLinks ] = useState<HeaderLink[]>([]);
+    useEffect(() => {
+        setHeaderLinks([
+            { url: "/get-started/", text: t("header.get-started") },
+            { url: "https://docs.triliumnotes.org/", text: t("header.documentation"), external: true },
+            { url: "/support-us/", text: t("header.support-us") }
+        ]);
+    }, [ locale ]);
 
 	return (
 		<header>
@@ -50,7 +53,7 @@ export function Header(props: {repoStargazersCount: number}) {
                 </div>
 
                 <nav className={`${mobileMenuShown ? "mobile-shown" : ""}`}>
-                    {HEADER_LINKS.map(link => (
+                    {headerLinks.map(link => (
                         <Link
                             href={link.external ? link.url : `/${locale}${link.url}`}
                             className={url === link.url ? "active" : ""}
diff --git a/apps/website/src/index.tsx b/apps/website/src/index.tsx
index 4354d2e51..f6949df40 100644
--- a/apps/website/src/index.tsx
+++ b/apps/website/src/index.tsx
@@ -52,14 +52,15 @@ export function LocaleProvider({ children }) {
         },
         returnEmptyString: false
     }).then(() => setLoaded(true))
-  }, []);
+}, []);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
+    if (!loaded) return;
     changeLanguage(localeId);
     const correspondingLocale = LOCALES.find(l => l.id === localeId);
     document.documentElement.lang = localeId;
     document.documentElement.dir = correspondingLocale?.rtl ? "rtl" : "ltr";
-  }, [ localeId ]);
+  }, [ loaded, localeId ]);
 
   return (
     <LocaleContext.Provider value={localeId}>