litmuschaos
/
litmus
mirror of https://github.com/litmuschaos/litmus.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added a global loader that fills in when react has not yet built (#2585) 

* Added a global loader that fills in when react has not yet built

Signed-off-by: Vansh Bhatia <vansh.bhatia@mayadata.io>
This commit is contained in:
Vansh Bhatia 2021-03-24 18:25:37 +05:30 committed by GitHub
parent fd6e97c491
commit fe26f1b31a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 73 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
litmus-portal/frontend/public/index.css
View File

@ -1,3 +1,44 @@
body > #root > div {
height: 100vh;
.root {
background: #f5f6f8;
}
.loaderContainer {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
min-height: 100vh;
justify-content: center;
align-items: center;
}
.loader {
border: 8px solid #d9d9d9;
border-radius: 50%;
border-top: 8px solid #5b44ba;
width: 60px;
height: 60px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;
}
/* Safari */
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

10
litmus-portal/frontend/public/index.html
View File

@ -45,9 +45,11 @@
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<noscript> You need to enable JavaScript to run this app. </noscript>
<div class="root" id="root">
<div class="loaderContainer">
<div class="loader"></div>
</div>
</div>
</body>
</html>

2
litmus-portal/frontend/src/components/SideBar/styles.ts
View File

@ -52,7 +52,7 @@ const useStyles = makeStyles((theme: Theme) => ({
fontSize: '1rem',
},
drawerList: {
marginTop: theme.spacing(8),
marginTop: theme.spacing(8.375),
},
versionlogo: {
width: '1.25rem',

34
litmus-portal/frontend/src/containers/app/App.tsx
View File

@ -60,7 +60,7 @@ const Routes: React.FC = () => {
const [projectRole, setprojectRole] = useState<string>(projectRoleFromURL);
const userID = getUserId();
useQuery<Projects>(LIST_PROJECTS, {
const { loading } = useQuery<Projects>(LIST_PROJECTS, {
skip: projectID !== '' && projectID !== undefined,
onCompleted: (data) => {
if (data.listProjects) {
@ -90,21 +90,33 @@ const Routes: React.FC = () => {
if (getToken() === '') {
return (
<Switch>
<Route exact path="/login" component={LoginPage} />
<Redirect exact path="/api-doc" to="/api-doc/index.html" />
<Redirect to="/login" />
</Switch>
<>
{loading ? (
<Loader />
) : (
<Switch>
<Route exact path="/login" component={LoginPage} />
<Redirect exact path="/api-doc" to="/api-doc/index.html" />
<Redirect to="/login" />
</Switch>
)}
</>
);
}
if (!projectID) {
return (
<Switch>
<Route exact path="/home" component={HomePage} />
<Redirect exact path="/api-doc" to="/api-doc/index.html" />
<Redirect to="/home" />
</Switch>
<>
{loading ? (
<Loader />
) : (
<Switch>
<Route exact path="/home" component={HomePage} />
<Redirect exact path="/api-doc" to="/api-doc/index.html" />
<Redirect to="/home" />
</Switch>
)}
</>
);
}