Loading component added and tweaks

frontend/src/components/UnivMap.js

 import React, { Component } from 'react';
 import { connect } from "react-redux";
+import Loading from './other/Loading';
 import { Map, TileLayer, Marker, Popup, LayersControl, FeatureGroup, Circle, LayerGroup } from 'react-leaflet';
 // import MarkerClusterGroup from 'react-leaflet-markercluster';
 import { 
@@ -8,6 +9,7 @@ import {
  } from '../actions/universities';
 
 
+
 class UnivMap extends Component {
     componentDidMount() {
         if ( this.props.universities.length==0 || this.props.invalidated){
@@ -24,21 +26,17 @@ class UnivMap extends Component {
         }
     }
 
-
-
     componentWillUnmount() {
         console.log("ça serait bien de save la config de la carte...");
     }
 
-
-
     render() {
         if (this.props.hasError) {
             return <p>Sorry! There was an error loading the items</p>;
         }
 
         if (this.props.isLoading || this.props.invalidated) {
-            return <p>Loading…</p>;
+            return <Loading/>;
         }
 
         return (

frontend/src/components/UnivMapReloadButton.js

@@ -31,7 +31,6 @@ class UnivMapReloadButton extends Component {
     }
 }
 
-
 const mapStateToProps = (state) => {
     return {
         invalidated: state.universitiesInvalidated

frontend/src/components/listItems.js

@@ -8,6 +8,7 @@ import LocationCityIcon from '@material-ui/icons/LocationCity';
 import PeopleIcon from '@material-ui/icons/People';
 import BarChartIcon from '@material-ui/icons/BarChart';
 import HomeIcon from '@material-ui/icons/Home';
+import SearchIcon from '@material-ui/icons/Search';
 import AssignmentIcon from '@material-ui/icons/Assignment';
 import { NavLink } from 'react-router-dom'
 
@@ -22,6 +23,7 @@ export const mainListItems = (
                 <ListItemText primary="Accueil" />
             </ListItem>
         </NavLink>
+
         <NavLink to={'/app/map/'}>
             <ListItem button>
                 <ListItemIcon>
@@ -31,18 +33,27 @@ export const mainListItems = (
             </ListItem>
         </NavLink>
 
+        <ListItem button>
+            <ListItemIcon>
+                <SearchIcon />
+            </ListItemIcon>
+            <ListItemText primary="Recherche" />
+        </ListItem>
+
         <ListItem button>
             <ListItemIcon>
                 <LocationCityIcon />
             </ListItemIcon>
             <ListItemText primary="Université" />
         </ListItem>
+
         <ListItem button>
             <ListItemIcon>
                 <PeopleIcon />
             </ListItemIcon>
             <ListItemText primary="????" />
         </ListItem>
+
         <ListItem button>
             <ListItemIcon>
                 <BarChartIcon />

frontend/src/components/other/Loading.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+const styles = theme => ({
+  progress: {
+    margin: theme.spacing.unit * 2,
+  },
+});
+
+class Loading extends React.Component {
+  timer = null;
+
+  state = {
+    completed: 0,
+  };
+
+  componentDidMount() {
+    this.timer = setInterval(this.progress, 20);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.timer);
+  }
+
+  progress = () => {
+    const { completed } = this.state;
+    this.setState({ completed: completed >= 100 ? 0 : completed + 1 });
+  };
+
+  render() {
+    const { classes } = this.props;
+    return (
+      <div>
+        <CircularProgress
+          className={classes.progress}
+          variant="determinate"
+          size={50}
+          value={this.state.completed}
+        />
+      </div>
+    );
+  }
+}
+
+Loading.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(Loading);
\ No newline at end of file