feature(database-connection): Add prototype for spinner

frontend/src/pages/MainPage/MainPage.scss

@@ -2,4 +2,18 @@
 
 .MainPage {
   @include background();
+
+  .blurred {
+    @include blurred();
+  }
+
+  .UserList-container {
+    .ClipLoader {
+      top: -10px;
+      z-index: 2;
+    }
+    .blurred {
+      z-index: 1;
+    }
+  }
 }

frontend/src/pages/MainPage/MainPage.tsx

@@ -1,4 +1,4 @@
-import React, {FC, FunctionComponent, useCallback, useEffect, useState} from "react";
+import React, {FC, useCallback, useEffect, useState} from "react";
 import UserStatsMockService from "../../mock/UserStatsMockService";
 import Header from "../../components/Header/Header";
 import UserList from "../../components/UserList/UserList";
@@ -9,6 +9,7 @@ import UserStatsResponse from "../../models/UserStatsResponse";
 import {withRouter} from "react-router";
 import RequestError from "../../models/RequestError";
 import './MainPage.scss';
+import {ClipLoader} from "react-spinners";
 
 // class MainPage extends React.Component<IMainPageProps, IMainPageState> {
 //
@@ -91,6 +92,7 @@ const MainPage: FC<IMainPageProps> = (props: IMainPageProps) => {
     const [error, setError] = useState<RequestError | undefined>(undefined)
     const [loading, setLoadingState] = useState(true)
     const [seasonStats, setSeasonStats] = useState<UserStatsResponse>(UserStatsMockService.getStatsWithoutPromise(seasonId))
+    const [spinnerColor, setSpinnerColor] = useState('#61dafb')
 
     const toggleLoading = useCallback(() => setLoadingState(!loading), [setLoadingState, loading])
 
@@ -108,10 +110,20 @@ const MainPage: FC<IMainPageProps> = (props: IMainPageProps) => {
                 error && <ErrorContainer message={error.message} />
             }
             {
-                (loading)
-                ? <UserList onSeasonIdChange={setSeasonId} userStats={seasonStats} mocked={true}         />
-                : <UserList onSeasonIdChange={setSeasonId} userStats={seasonStats} mocked={!(!error)}    />
+
             }
+            {
+                // (loading)
+                // ? <UserList onSeasonIdChange={setSeasonId} userStats={seasonStats} mocked={true}         />
+                // : <UserList onSeasonIdChange={setSeasonId} userStats={seasonStats} mocked={!(!error)}    />
+
+            }
+            <div className="UserList-container">
+                <ClipLoader color={spinnerColor} loading={true} size={150} />
+                <div className={loading ? "" : ""}>
+                    <UserList onSeasonIdChange={setSeasonId} userStats={seasonStats} />
+                </div>
+            </div>
             {/* { this.state.error != null ? <p className="error-message"> { this.state.error } Please try again later!</p> : null} */}
             <Footer />
         </div>