From a99c4450491327ef8a24bcdd3764110863562507 Mon Sep 17 00:00:00 2001
From: Ruidy Nemausat <ruidy.nemausat@gmail.com>
Date: Tue, 21 Apr 2020 07:11:51 +0200
Subject: [PATCH] Update Preloader component

---
 client/src/App.tsx                  |  9 ++--
 client/src/components/Preloader.tsx | 67 ++++++++---------------------
 2 files changed, 21 insertions(+), 55 deletions(-)

diff --git a/client/src/App.tsx b/client/src/App.tsx
index ab5f092..cf09fcf 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -4,15 +4,14 @@ import { useAuth0 } from "./authentication/auth0";
 import MainLayout from "./layouts/MainLayout";
 import AppRouter from "./routes/AppRouter";
 import history from "./utils/history";
+import Preloader from "./components/Preloader";
 
 export default function App() {
   const { loading } = useAuth0();
 
-  if (loading) {
-    return <div>Loading...</div>;
-  }
-
-  return (
+  return loading ? (
+    <Preloader />
+  ) : (
     <Router history={history}>
       <MainLayout>
         <AppRouter />
diff --git a/client/src/components/Preloader.tsx b/client/src/components/Preloader.tsx
index 3a1a5c2..187648b 100644
--- a/client/src/components/Preloader.tsx
+++ b/client/src/components/Preloader.tsx
@@ -1,56 +1,23 @@
-import React, { FC } from "react";
+import React, { FC, useState } from "react";
+import { Backdrop, CircularProgress, Button } from "@material-ui/core";
+import { makeStyles, createStyles, Theme } from "@material-ui/core/styles";
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    backdrop: {
+      zIndex: theme.zIndex.drawer + 1,
+      color: "#fff",
+    },
+  })
+);
 
 const Preloader: FC = () => {
+  const classes = useStyles();
+
   return (
-    <div className="preloader-wrapper big active">
-      <div className="spinner-layer spinner-blue">
-        <div className="circle-clipper left">
-          <div className="circle"></div>
-        </div>
-        <div className="gap-patch">
-          <div className="circle"></div>
-        </div>
-        <div className="circle-clipper right">
-          <div className="circle"></div>
-        </div>
-      </div>
-
-      <div className="spinner-layer spinner-red">
-        <div className="circle-clipper left">
-          <div className="circle"></div>
-        </div>
-        <div className="gap-patch">
-          <div className="circle"></div>
-        </div>
-        <div className="circle-clipper right">
-          <div className="circle"></div>
-        </div>
-      </div>
-
-      <div className="spinner-layer spinner-yellow">
-        <div className="circle-clipper left">
-          <div className="circle"></div>
-        </div>
-        <div className="gap-patch">
-          <div className="circle"></div>
-        </div>
-        <div className="circle-clipper right">
-          <div className="circle"></div>
-        </div>
-      </div>
-
-      <div className="spinner-layer spinner-green">
-        <div className="circle-clipper left">
-          <div className="circle"></div>
-        </div>
-        <div className="gap-patch">
-          <div className="circle"></div>
-        </div>
-        <div className="circle-clipper right">
-          <div className="circle"></div>
-        </div>
-      </div>
-    </div>
+    <Backdrop className={classes.backdrop} open={true}>
+      <CircularProgress color="inherit" />
+    </Backdrop>
   );
 };