Setup i18n boilerplate

Co-authored-by: Alexander Rudolph <drblaui@users.noreply.github.com>
Co-authored-by: Sebastian Kuzniarz <kuzniarz@users.noreply.github.com>

client/src/i18n/index.ts

+import i18n from "i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import Backend from "i18next-http-backend";
+import { initReactI18next } from "react-i18next";
+
+// don't want to use this?
+// have a look at the Quick start guide
+// for passing in lng and translations on init
+
+i18n
+  // load translation using http -> see /public/locales (i.e. https://github.com/i18next/react-i18next/tree/master/example/react/public/locales)
+  // learn more: https://github.com/i18next/i18next-http-backend
+  // want your translations to be loaded from a professional CDN? => https://github.com/locize/react-tutorial#step-2---use-the-locize-cdn
+  .use(Backend)
+  // detect user language
+  // learn more: https://github.com/i18next/i18next-browser-languageDetector
+  .use(LanguageDetector)
+  // pass the i18n instance to react-i18next.
+  .use(initReactI18next)
+  // init i18next
+  // for all options read: https://www.i18next.com/overview/configuration-options
+  .init({
+    fallbackLng: "en",
+    debug: true,
+
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+    },
+  });
+
+export default i18n;

client/src/index.tsx

-import React from "react";
+import React, { Suspense } from "react";
 import ReactDOM from "react-dom";
+import Loading from "./components/Loading";
+import "./i18n";
 import Router from "./Router";
 import "./styles/app.scss";
 
 ReactDOM.render(
   <React.StrictMode>
-    <Router />
+    <Suspense fallback={<Loading />}>
+      <Router />
+    </Suspense>
   </React.StrictMode>,
   document.getElementById("root")
 );