feat: i18n persistence on logout

frontend/src/components/SettingsComponent/SettingsComponent.jsx

@@ -32,7 +32,7 @@ function SettingsComponent() {
         <Grid item>
           <Select native value={i18n.language} onChange={handleChange()}>
             <option value={"en"}>English</option>
-            <option value={"es-ES"}>Spanish</option>
+            <option value={"es-ES"}>Español</option>
           </Select>
         </Grid>
       </AccordionDetails>

frontend/src/i18n.js

@@ -11,15 +11,19 @@ i18n
   .use(Backend)
   .init({
     compatibilityJSON: "v4",
-    lng: userLanguage || "en",
+    //lng: "en",
     fallbackLng: "en",
-    debug: false,
+    detection: {
+      order: ["path", "cookie", "localStorage", "htmlTag"],
+      caches: ["localStorage", "cookie"], // cache user language on
+    },
+    debug: true,
     //keySeparator: false, // we use content as keys
     interpolation: {
       escapeValue: true,
     },
     react: {
-      useSuspense: false,
+      useSuspense: true,
     },
     supportedLngs: ["en", "es-ES"],
     backend: {

frontend/src/index.jsx

@@ -1,6 +1,6 @@
 import "./index.css";
 
-import React from "react";
+import React, { Suspense } from "react";
 import ReactDOM from "react-dom";
 
 import App from "./App";
@@ -9,7 +9,9 @@ import "./i18n";
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <Suspense fallback={<div>Loading...</div>}>
+      <App />
+    </Suspense>
   </React.StrictMode>,
   document.getElementById("root")
 );