From 1b7046788e82d33afaac03bf40c4c5be2b0947c1 Mon Sep 17 00:00:00 2001
From: Humenius <contact@humenius.me>
Date: Tue, 12 Jan 2021 12:26:29 +0100
Subject: [PATCH] feature(database-connection): Fix blur flickering

---
 frontend/src/pages/MainPage/MainPage.tsx | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/frontend/src/pages/MainPage/MainPage.tsx b/frontend/src/pages/MainPage/MainPage.tsx
index 9af7ed2..565e0bb 100644
--- a/frontend/src/pages/MainPage/MainPage.tsx
+++ b/frontend/src/pages/MainPage/MainPage.tsx
@@ -98,10 +98,12 @@ const MainPage: FC<IMainPageProps> = (props: IMainPageProps) => {
 
     useEffect(() => {
         UserStatsMockService.getStats(seasonId)
-            .then(res => setSeasonStats(res))
+            .then(res => {
+                setSeasonStats(res)
+                setLoadingState(false)
+            })
             .catch(err => setError(err))
-            .finally(() => toggleLoading())
-    }, [seasonId, toggleLoading])
+    }, [seasonId, setLoadingState])
 
     return (
         <div className="MainPage">
@@ -118,12 +120,12 @@ const MainPage: FC<IMainPageProps> = (props: IMainPageProps) => {
                 // : <UserList onSeasonIdChange={setSeasonId} userStats={seasonStats} mocked={!(!error)}    />
 
             }
-            <div className="UserList-container">
-                <ClipLoader color={spinnerColor} loading={true} size={150} />
-                <div className={loading ? "" : ""}>
+            {/*<div className="UserList-container">*/}
+            {/*    <ClipLoader color={spinnerColor} loading={true} size={150} />*/}
+                <div className={loading ? "blurred" : ""}>
                     <UserList onSeasonIdChange={setSeasonId} userStats={seasonStats} />
                 </div>
-            </div>
+            {/*</div>*/}
             {/* { this.state.error != null ? <p className="error-message"> { this.state.error } Please try again later!</p> : null} */}
             <Footer />
         </div>