From 4d96bb2674705f5232e97e5cdff469caf44ac990 Mon Sep 17 00:00:00 2001
From: Humenius <contact@humenius.me>
Date: Tue, 12 Jan 2021 12:32:53 +0100
Subject: [PATCH] feature(database-connection): Render spinner on top of
 UserList component

---
 frontend/src/pages/MainPage/MainPage.scss | 12 +-----------
 frontend/src/pages/MainPage/MainPage.tsx  |  8 +++++++-
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/frontend/src/pages/MainPage/MainPage.scss b/frontend/src/pages/MainPage/MainPage.scss
index 1809b4e..e75bba7 100644
--- a/frontend/src/pages/MainPage/MainPage.scss
+++ b/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;
-    }
-  }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/pages/MainPage/MainPage.tsx b/frontend/src/pages/MainPage/MainPage.tsx
index 565e0bb..e5f3c1e 100644
--- a/frontend/src/pages/MainPage/MainPage.tsx
+++ b/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>