ruidy/ticket_manager
1
0
Fork 0
mirror of https://github.com/rjNemo/ticket_manager synced 2026-06-12 11:46:40 +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 MainLayout from "./layouts/MainLayout";
import AppRouter from "./routes/AppRouter"; import AppRouter from "./routes/AppRouter";
import history from "./utils/history"; import history from "./utils/history";
import Preloader from "./components/Preloader";
export default function App() { export default function App() {
const { loading } = useAuth0(); const { loading } = useAuth0();
if (loading) { return loading ? (
return <div>Loading...</div>; <Preloader />
} ) : (
return (
<Router history={history}> <Router history={history}>
<MainLayout> <MainLayout>
<AppRouter /> <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 Preloader: FC = () => {
const classes = useStyles();
return ( return (
<div className="preloader-wrapper big active"> <Backdrop className={classes.backdrop} open={true}>
<div className="spinner-layer spinner-blue"> <CircularProgress color="inherit" />
<div className="circle-clipper left"> </Backdrop>
<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>
); );
}; };