saving some updates

RaceTimer/racetimer_react/src/Leaderboard/Leaderboard.js

@@ -1,6 +1,23 @@
 import React from 'react';
 import Facade from '../Datafacade/datafacade';
 import { NavLink } from 'react-router-dom';
+import Loader from 'react-loader-spinner';
+import { usePromiseTracker } from "react-promise-tracker";
+const LoadingIndicator = props => {
+    const { promiseInProgress } = usePromiseTracker();
+    return promiseInProgress &&
+        <div
+            style={{
+                width: "100%",
+                height: "100",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center"
+            }}
+        >
+            <Loader type="TailSpin" color="#2BAD60" height="100" width="100" />
+        </div>
+};
 
 class Leaderboard extends React.Component {
     constructor(props) {
@@ -8,13 +25,17 @@ class Leaderboard extends React.Component {
         this.state = {
             players: [],
             breakload: true,
+            scrollListener: {},
         };
+        this.scrollListener = this.handleScroll.bind(this);
     }
 
     componentWillMount() {
-        this.scrollListener = window.addEventListener("scroll", e => {
-            this.handleScroll(e);
-        });
+        window.addEventListener('scroll', this.scrollListener);
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener("scroll", this.scrollListener);
     }
 
     componentDidMount = async () => {
@@ -45,18 +66,23 @@ class Leaderboard extends React.Component {
         this.setState({ breakload: true })
     }
 
-
     render() {
         return (
             <React.Fragment>
+                <div className="alert alert-primary" >
+                    <div id='containerMaps'>
+                        <div>
+                            <NavLink to={'/mapboard/'}>
+                                <h3> <strong className="col-lg-1 col-centered" /> MapBoard<br /> </h3>
+                            </NavLink>
+                        </div>
+                    </div>
+                </div>
                 <ul>
                     <div className="container mm" style={{ marginTop: "85px" }}>
                         <div style={{
                             position: 'absolute', left: '50%', top: '30%'
                         }}>
-                            <NavLink to={'/mapboard/'}>
-                                <h3> <strong className="col-lg-1 col-centered" /> MapBoard<br /> </h3>
-                            </NavLink>
                             <br />
                             <br />
                             {this.state.players.map(e => (
@@ -73,9 +99,9 @@ class Leaderboard extends React.Component {
                                     </NavLink>
                                 </li>
                             ))}
-                            {!this.state.breakload ? <h1> <br /> <br /><p className="loading"> 
-                            Loading More Players...
-                            </p> </h1> : ""}
+                            {!this.state.breakload ? <h1>
+                                Loading Players <br /> <br /> <br /> <LoadingIndicator />
+                            </h1> : ""}
                         </div>
                     </div>
                 </ul>
@@ -84,4 +110,5 @@ class Leaderboard extends React.Component {
     }
 }
 
+
 export default Leaderboard;