refactor: loading spinners (#62)

* chore: edit not found pages

* refactor: spinner for loading state

client/src/App.tsx

@@ -14,7 +14,6 @@ const App = () => {
   useEffect(() => {
     store.dispatch(loadCurrentUser());
   }, []);
-
   return (
     <ErrorBoundary>
       <Layout id="app">

client/src/router/AuthRoute.tsx

@@ -3,6 +3,7 @@ import { Navigate, useLocation } from 'react-router';
 import * as routes from 'constants/routes';
 import { Role } from 'enums';
 import { AccessDenied } from 'sections';
+import { Spin } from 'antd';
 
 /**
  * A wrapper around the element which checks if the user is authenticated
@@ -14,7 +15,12 @@ export const AuthRoute = ({ children, roles }: { children: JSX.Element; roles: A
 
   const { isAuthenticated, user, status } = useAppSelector((state) => state.auth);
 
-  if (status === 'idle' || status === 'pending') return <p className="container">Checking in..</p>;
+  if (status === 'idle' || status === 'pending')
+    return (
+      <div className="body-center container">
+        <Spin size="large" tip="Checking in.." />
+      </div>
+    );
 
   const userHasRequiredRole = user && roles.includes(user.role) ? true : false;
 

client/src/router/NonAuthRoute.tsx

@@ -4,7 +4,7 @@ import * as routes from 'constants/routes';
 import { Role } from 'enums';
 
 export const NonAuthRoute = ({ children }: { children: JSX.Element }) => {
-  let location = useLocation();
+  const location = useLocation();
 
   const { isAuthenticated, user } = useAppSelector((state) => state.auth);
 

client/src/sections/Profile/index.tsx

@@ -1,4 +1,4 @@
-import { Col, Row } from 'antd';
+import { Col, Row, Spin } from 'antd';
 import { useAppDispatch, useAppSelector, useScrollToTop } from 'hooks';
 import * as React from 'react';
 import { Helmet } from 'react-helmet-async';
@@ -21,10 +21,12 @@ export const Profile = () => {
 
   useScrollToTop();
 
-  if (status === 'pending' && !user) {
+  if (status === 'pending' || !user) {
     return (
-      <section className="loading">
-        <div className="container">Loading account...</div>
+      <section className="body-center">
+        <div className="container">
+          <Spin size="large" tip="Loading profile.." />
+        </div>
       </section>
     );
   }

client/src/sections/Student/TeacherListings/components/MentorCards/index.tsx

@@ -1,4 +1,4 @@
-import { Col, Row, Typography } from 'antd';
+import { Col, Row, Spin, Typography } from 'antd';
 import { EmptyPageMessage, UserCard } from 'core-ui';
 import { useAppSelector } from 'hooks';
 import * as React from 'react';
@@ -17,9 +17,9 @@ export const MentorCards: React.FC<MentorCardsProps> = ({ mentors, recommendMent
 
   if (status === 'pending' || !mentors) {
     return (
-      <section className="loading">
+      <section className="body-center">
         <div className="container">
-          <Paragraph type="secondary">Loading mentors..</Paragraph>
+          <Spin size="large" tip="Loading mentors.." />
         </div>
       </section>
     );

client/src/styles/index.css

@@ -142,6 +142,14 @@ body {
   max-width: 100%;
 }
 
+.body-center {
+  margin-top: 10vh;
+  height: 80vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 /*==============================================================================
  Section : Ant Design utility classes
 ==============================================================================*/
@@ -420,7 +428,7 @@ body {
   margin-top: 1em;
 }
 /*==============================================================================
- Section : Not Found
+ Section : access denied
 ==============================================================================*/
 .access-denied {
   margin-top: 10vh;