From c08386450adc39dd2fed675d5347e35cb104dcd9 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 25 Oct 2025 20:27:42 +0300
Subject: [PATCH] chore(website/i18n): different load mechanism for
 translations

---
 apps/website/src/i18n.ts   | 16 ----------------
 apps/website/src/index.tsx | 23 ++++++++++++++++++++---
 2 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/apps/website/src/i18n.ts b/apps/website/src/i18n.ts
index 15c67b353..0473de9f8 100644
--- a/apps/website/src/i18n.ts
+++ b/apps/website/src/i18n.ts
@@ -1,7 +1,3 @@
-import { default as i18next } from "i18next";
-import HttpApi from 'i18next-http-backend';
-import { initReactI18next } from "react-i18next";
-
 interface Locale {
     id: string;
     name: string;
@@ -21,16 +17,4 @@ export const LOCALES: Locale[] = [
     { id: "ar", name: "اَلْعَرَبِيَّةُ", rtl: true },
 ].toSorted((a, b) => a.name.localeCompare(b.name));
 
-i18next
-    .use(HttpApi)
-    .use(initReactI18next);
 
-await i18next.init({
-    debug: true,
-    lng: "en",
-    fallbackLng: "en",
-    backend: {
-        loadPath: "/translations/{{lng}}/{{ns}}.json",
-    },
-    returnEmptyString: false
-});
diff --git a/apps/website/src/index.tsx b/apps/website/src/index.tsx
index fe4169d9e..4354d2e51 100644
--- a/apps/website/src/index.tsx
+++ b/apps/website/src/index.tsx
@@ -8,9 +8,11 @@ import Footer from './components/Footer.js';
 import GetStarted from './pages/GetStarted/get-started.js';
 import SupportUs from './pages/SupportUs/SupportUs.js';
 import { createContext } from 'preact';
-import { useEffect } from 'preact/hooks';
-import { changeLanguage } from 'i18next';
+import { useEffect, useLayoutEffect, useState } from 'preact/hooks';
+import { default as i18next, changeLanguage } from 'i18next';
 import { LOCALES } from './i18n';
+import HttpApi from 'i18next-http-backend';
+import { initReactI18next } from "react-i18next";
 
 export const LocaleContext = createContext('en');
 
@@ -36,6 +38,21 @@ export function App(props: {repoStargazersCount: number}) {
 export function LocaleProvider({ children }) {
   const { path } = useLocation();
   const localeId = path.split('/')[1] || 'en';
+  const [ loaded, setLoaded ] = useState(false);
+
+  useLayoutEffect(() => {
+      i18next
+        .use(HttpApi)
+        .use(initReactI18next);
+      i18next.init({
+        lng: localeId,
+        fallbackLng: "en",
+        backend: {
+            loadPath: "/translations/{{lng}}/{{ns}}.json",
+        },
+        returnEmptyString: false
+    }).then(() => setLoaded(true))
+  }, []);
 
   useEffect(() => {
     changeLanguage(localeId);
@@ -46,7 +63,7 @@ export function LocaleProvider({ children }) {
 
   return (
     <LocaleContext.Provider value={localeId}>
-      {children}
+      {loaded && children}
     </LocaleContext.Provider>
   );
 }