add spinner and suspense

package.json

@@ -35,7 +35,11 @@
     "eslint-plugin-react-hooks": "^1.5.0",
     "file-loader": "3.0.1",
     "fs-extra": "7.0.1",
+    "global": "^4.4.0",
     "html-webpack-plugin": "4.0.0-beta.5",
+    "i18next": "^19.4.1",
+    "i18next-browser-languagedetector": "^4.0.2",
+    "i18next-xhr-backend": "^3.2.2",
     "identity-obj-proxy": "3.0.0",
     "is-wsl": "^1.1.0",
     "jest": "24.7.1",
@@ -57,6 +61,8 @@
     "react-app-polyfill": "^1.0.1",
     "react-dev-utils": "^9.0.1",
     "react-dom": "^16.8.6",
+    "react-i18next": "^11.3.4",
+    "react-loader-spinner": "^3.1.14",
     "react-multi-email": "^0.5.3",
     "react-router-dom": "^5.0.0",
     "react-sortable-hoc": "^1.9.1",
@@ -148,6 +154,7 @@
     ]
   },
   "devDependencies": {
+    "i18next-scanner": "^2.11.0",
     "prettier": "1.19.1"
   }
 }

src/App.jsx

@@ -1,13 +1,22 @@
-import React from "react";
-import { BrowserRouter as Router } from "react-router-dom";
-import Routes from "./Routes";
+import React, {Suspense} from 'react';
+import {BrowserRouter as Router} from 'react-router-dom';
 
-import Header from "./components/layouts/Header";
-import Footer from "./components/layouts/Footer";
-import AppContextProvider from "./AppContext";
+import 'react-loader-spinner/dist/loader/css/react-spinner-loader.css';
+import Loader from 'react-loader-spinner';
+
+import Routes from './Routes';
+import Header from './components/layouts/Header';
+import Footer from './components/layouts/Footer';
+import AppContextProvider from './AppContext';
+import {i18n} from './i18n';
+
+const Spinner = (
+  <Loader type="Puff" color="#00BFFF" height={100} width={100} timeout={1000} />
+);
 
 function App() {
   return (
+    <Suspense fallback={Spinner}>
       <AppContextProvider>
         <Router>
           <div>
@@ -17,6 +26,7 @@ function App() {
           </div>
         </Router>
       </AppContextProvider>
+    </Suspense>
   );
 }
 

src/components/layouts/Header.jsx

@@ -1,28 +1,26 @@
 import React, { Component } from "react";
 import { Collapse, Navbar, NavbarToggler, Nav, NavItem } from "reactstrap";
 import { Link } from "react-router-dom";
+import { withTranslation } from 'react-i18next';
+
 
 import logo from "../../logos/logo-color.svg";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faRocket } from "@fortawesome/free-solid-svg-icons";
 
 class Header extends Component {
-  constructor(props) {
-    super(props);
-
-    this.toggle = this.toggle.bind(this);
-    this.state = {
-      isOpen: false
-    };
-  }
+   state = {
+     isOpen: false
+   };
 
-  toggle() {
+  toggle = () => {
     this.setState({
       isOpen: !this.state.isOpen
     });
   }
 
   render() {
+    const { t } = this.props;
     return (
       <header>
         <Navbar color="light" light expand="md">
@@ -34,8 +32,8 @@ class Header extends Component {
               <div className="align-self-center ml-2">
                 <div className="logo-text">
                   <h1>
-                    Plateforme de vote
-                    <small>Jugement Majoritaire</small>
+		    {t("Voting platform")}
+                    <small>{t("Majority Judgment")}</small>
                   </h1>
                 </div>
               </div>
@@ -46,8 +44,8 @@ class Header extends Component {
             <Nav className="ml-auto" navbar>
               <NavItem>
                 <Link className="text-primary nav-link" to="/create-election/">
-                  <FontAwesomeIcon icon={faRocket} className="mr-2" /> Démarrer
-                  un vote
+                  <FontAwesomeIcon icon={faRocket} className="mr-2" /> 
+		   {t("Start an election")}
                 </Link>
               </NavItem>
             </Nav>
@@ -57,4 +55,4 @@ class Header extends Component {
     );
   }
 }
-export default Header;
+export default withTranslation()(Header);

src/i18n.jsx

@@ -0,0 +1,34 @@
+import i18n from 'i18next';
+import XHR from 'i18next-xhr-backend';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import { initReactI18next } from 'react-i18next';
+
+
+i18n
+  .use(XHR)
+  .use(LanguageDetector)
+  .use(initReactI18next) // bind react-i18next to the instance
+  .init({
+    fallbackLng: 'en',
+    debug: true,
+
+    interpolation: {
+      escapeValue: false, // not needed for react!!
+    },
+
+    // react i18next special options (optional)
+    // override if needed - omit if ok with defaults
+    /*
+    react: {
+      bindI18n: 'languageChanged',
+      bindI18nStore: '',
+      transEmptyNodeValue: '',
+      transSupportBasicHtmlNodes: true,
+      transKeepBasicHtmlNodesFor: ['br', 'strong', 'i'],
+      useSuspense: true,
+    }
+    */
+  });
+
+
+export default i18n;