PATCH: Enable webpack code splitting and load translations on demand

i18n.js.patch

+export default function SuspendableLanguageSetter() {
+  return (
+    <React.Suspense fallback={""}>
+      <LanguageSetter />
+    </React.Suspense>
+  );
+}
 
-const translations = () => ({
-  "en-GB": require("./en-GB/translations.json"),
-  "en-US": require("./en-US/translations.json"),
-  "sv-SE": require("./sv-SE/translations.json"),
-});
+const lazyTranslations = {
+  "en-US": () => import("./en-US/translations.json"),
+  "sv-SE": () => import("./sv-SE/translations.json"),
+};
 
+const en_GB = require("./en-GB/translations.json");
 
+class WebpackyBackend {
+  read(language, namespace, callback) {
+    const loader = lazyTranslations[language];
+    if (!loader) return callback(null, true); // language missing
+    loader()
+      .then((res) => callback(null, res.default.translations))
+      .catch((err) => callback(err, false));
+  }
+}
+WebpackyBackend.type = "backend";
+
+const resources = {
+  "en-GB": en_GB,
+};
+
+i18n
+  .use(initReactI18next)
+  .use(WebpackyBackend)
+  .init({
+    resources,
+    lng: "en-GB",
+    fallbackLng: "en-GB",
+    load: "currentOnly", // avoids loading "en" right after loading "en-GB"
+    ns: ["translations"],
+    defaultNS: "translations",
+
+    partialBundledLanguages: true, // this allows loading translations on demand via WebpackyBackend
+    // NOTE: supposedly react.wait = true should be used here. But I see no difference in app useage / reload behavior, so not adding that for now.
+
+    keySeparator: false, // we use content as keys
+    interpolation: { escapeValue: false },
+  });