chore(website/i18n): different load mechanism for translations

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
-});

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 { useEffect, useLayoutEffect, useState } from 'preact/hooks';
-import { changeLanguage } from 'i18next';
+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>
   );
 }