feat: load translations from cdn

frontend/package.json

@@ -18,6 +18,8 @@
     "axios": "^1.7.9",
     "i18next": "^24.2.3",
     "i18next-browser-languagedetector": "^8.0.4",
+    "i18next-chained-backend": "^4.6.2",
+    "i18next-http-backend": "^3.0.2",
     "i18next-resources-to-backend": "^1.2.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

frontend/src/lib/i18n/i18n.ts

@@ -1,19 +1,37 @@
-import i18n from 'i18next';
-import { initReactI18next } from 'react-i18next';
-import LanguageDetector from 'i18next-browser-languagedetector';
-import resourcesToBackend from 'i18next-resources-to-backend';
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import ChainedBackend from "i18next-chained-backend";
+import resourcesToBackend from "i18next-resources-to-backend";
+import HttpBackend from "i18next-http-backend";
 
 i18n
+  .use(ChainedBackend)
   .use(LanguageDetector)
   .use(initReactI18next)
-  .use(resourcesToBackend((language: string) => import(`./locales/${language}.json`)))
   .init({
-    fallbackLng: 'en',
-    debug: import.meta.env.MODE === 'development',
+    fallbackLng: "en",
+    debug: import.meta.env.MODE === "development",
 
     interpolation: {
       escapeValue: false,
-    }
+    },
+
+    load: "currentOnly",
+
+    backend: {
+      backends: [
+        HttpBackend,
+        resourcesToBackend(
+          (language: string) => import(`./locales/${language}.json`),
+        ),
+      ],
+      backendOptions: [
+        {
+          loadPath: "https://cdn.tinyauth.app/i18n/{{lng}}.json",
+        },
+      ],
+    },
   });
 
 export default i18n;