ruidy/ticket_manager
1
0
Fork 0
mirror of https://github.com/rjNemo/ticket_manager synced 2026-06-10 02:36:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update Preloader component

Browse source
This commit is contained in:
Ruidy Nemausat 2020-04-21 07:11:51 +02:00
parent 7f8ded5a36
commit a99c445049
2 changed files with 21 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
client/src/App.tsx
View file

@ -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 />

67
client/src/components/Preloader.tsx
View file

@ -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>
);
};