diff --git a/litmus-portal/frontend/public/index.css b/litmus-portal/frontend/public/index.css index 0d5054910..b27df4047 100644 --- a/litmus-portal/frontend/public/index.css +++ b/litmus-portal/frontend/public/index.css @@ -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); + } } diff --git a/litmus-portal/frontend/public/index.html b/litmus-portal/frontend/public/index.html index 0103e2857..4897caf28 100644 --- a/litmus-portal/frontend/public/index.html +++ b/litmus-portal/frontend/public/index.html @@ -45,9 +45,11 @@ - -
+ +
+
+
+
+
diff --git a/litmus-portal/frontend/src/components/SideBar/styles.ts b/litmus-portal/frontend/src/components/SideBar/styles.ts index 1d7f823a3..19816360b 100644 --- a/litmus-portal/frontend/src/components/SideBar/styles.ts +++ b/litmus-portal/frontend/src/components/SideBar/styles.ts @@ -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', diff --git a/litmus-portal/frontend/src/containers/app/App.tsx b/litmus-portal/frontend/src/containers/app/App.tsx index 865b9bad8..a8de29da5 100644 --- a/litmus-portal/frontend/src/containers/app/App.tsx +++ b/litmus-portal/frontend/src/containers/app/App.tsx @@ -60,7 +60,7 @@ const Routes: React.FC = () => { const [projectRole, setprojectRole] = useState(projectRoleFromURL); const userID = getUserId(); - useQuery(LIST_PROJECTS, { + const { loading } = useQuery(LIST_PROJECTS, { skip: projectID !== '' && projectID !== undefined, onCompleted: (data) => { if (data.listProjects) { @@ -90,21 +90,33 @@ const Routes: React.FC = () => { if (getToken() === '') { return ( - - - - - + <> + {loading ? ( + + ) : ( + + + + + + )} + ); } if (!projectID) { return ( - - - - - + <> + {loading ? ( + + ) : ( + + + + + + )} + ); }