feature(database-connection): Render spinner on top of UserList component

frontend/src/pages/MainPage/MainPage.scss

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

frontend/src/pages/MainPage/MainPage.tsx

@@ -105,6 +105,12 @@ const MainPage: FC<IMainPageProps> = (props: IMainPageProps) => {
             .catch(err => setError(err))
     }, [seasonId, setLoadingState])
 
+    const spinnerCss = `
+      margin: 0;
+      z-index: 2;
+      position: absolute;
+    `
+
     return (
         <div className="MainPage">
             <Header />
@@ -121,7 +127,7 @@ const MainPage: FC<IMainPageProps> = (props: IMainPageProps) => {
 
             }
             {/*<div className="UserList-container">*/}
-            {/*    <ClipLoader color={spinnerColor} loading={true} size={150} />*/}
+                <ClipLoader color={spinnerColor} loading={loading} size={150} css={spinnerCss} />
                 <div className={loading ? "blurred" : ""}>
                     <UserList onSeasonIdChange={setSeasonId} userStats={seasonStats} />
                 </div>