fix(front): retrieve main loading animation (#7587)

* fix(front): retrieve main loading animation

* fix history paramas in legacyRoute

www/front_src/src/App.js

@@ -1,16 +1,14 @@
 import React, { Component } from "react";
 import Header from "./components/header";
-import { Switch, Route } from "react-router-dom";
 import { connect } from 'react-redux';
 import { ConnectedRouter } from "react-router-redux";
 import { history } from "./store";
-import ReactRouter from "./components/reactRouter";
-import LegacyRoute from "./route-components/legacyRoute";
 
 import NavigationComponent from "./components/navigation";
 import Tooltip from "./components/tooltip";
 import Footer from "./components/footer";
 import Fullscreen from 'react-fullscreen-crossbrowser';
+import MainRouter from './components/mainRouter';
 import queryString from 'query-string';
 import axios from './axios';
 
@@ -115,11 +113,7 @@ class App extends Component {
                 onChange={isFullscreenEnabled => this.setState({isFullscreenEnabled})}
               >
                 <div className={styles["main-content"]}>
-                  <Switch>
-                    <Route path="/main.php" exact component={LegacyRoute}/>
-                    <Route path="/" exact render={() => (<Redirect to="/main.php"/>)}/>
-                    <Route path="/" component={ReactRouter}/>
-                  </Switch>
+                  <MainRouter />
                 </div>
               </Fullscreen>
             </div>

www/front_src/src/components/mainRouter/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Switch, Route, withRouter } from 'react-router-dom';
+import ReactRouter from '../reactRouter';
+import LegacyRoute from '../../route-components/legacyRoute';
+
+// main router to handle switch between legacy routes and react pages
+// legacy route has a key to make it fully uncontrolled
+// (https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key)
+// it allows to reconstruct the component to display loading animation
+const MainRouter = ({ history: { location: { key } } }) => (
+  <Switch>
+    <Route key={`path-${key}`} path="/main.php" exact component={LegacyRoute}/>
+    <Route path='/' exact render={() => (<Redirect to='/main.php'/>)}/>
+    <Route path='/' component={ReactRouter}/>
+  </Switch>
+);
+
+export default withRouter(MainRouter);

www/front_src/src/route-components/legacyRoute/index.js

@@ -38,6 +38,7 @@ class LegacyRoute extends Component {
 
   handleHref = event => {
     let href = event.detail.href;
+
     // update route
     window.history.pushState(null, null, href);
   }
@@ -49,10 +50,10 @@ class LegacyRoute extends Component {
   }
 
   componentDidMount() {
-    this.mainContainer = window.parent.document.getElementById('fullscreen-wrapper');
+    this.mainContainer = window.document.getElementById('fullscreen-wrapper');
 
     // add a listener on global page size
-    window.parent.addEventListener(
+    window.addEventListener(
       "resize",
       this.handleResize
     );
@@ -74,32 +75,33 @@ class LegacyRoute extends Component {
 
   componentWillUnmount() {
     clearTimeout(this.resizeTimeout);
-    window.parent.removeEventListener(
+    window.removeEventListener(
       "resize",
       this.handleResize
     );
 
-    window.parent.removeEventListener(
+    window.removeEventListener(
       "react.href.update",
       this.handleHref
     );
 
-    window.parent.removeEventListener(
+    window.removeEventListener(
       "react.href.disconnect",
       this.handleDisconnect
     );
   }
 
   render() {
     const { contentHeight, loading } = this.state;
-    const { history } = this.props,
-          { search, hash } = history.location;
+    const { history: { location: { search, hash } } } = this.props;
+
     let params;
     if (window['fullscreenSearch']) {
       params = window['fullscreenSearch'] + window['fullscreenHash']
     } else {
       params = (search || '') + (hash || '');
     }
+
     return (
       <>
         {loading &&