feature(database-connection): Fix blur flickering

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>