Loading page

frontend/react-app/package.json

@@ -8,8 +8,10 @@
     "@testing-library/user-event": "^13.5.0",
     "ajv": "^8.17.1",
     "ajv-keywords": "^5.1.0",
+    "framer-motion": "^12.6.3",
     "jquery": "^3.7.1",
     "lucide-react": "^0.486.0",
+    "motion": "^12.6.3",
     "react": "^18.3.1",
     "react-cookie": "^7.2.2",
     "react-dom": "^18.3.1",

frontend/react-app/src/App.js

@@ -18,6 +18,7 @@ import CreateTask from './pages/CreateTask';
 import ChangePassword from './pages/ChangePassword';
 import EditUserDetails from './pages/EditUserDetails';
 import CreatTeamPage from './pages/CreateTeamPage';
+import Loading from './pages/Loading';
 
 
 function App() {

frontend/react-app/src/css/Loading.css

@@ -0,0 +1,6 @@
+.loadingContainer{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 50px;
+}

frontend/react-app/src/pages/AdminAllUsers.jsx

@@ -3,6 +3,7 @@ import Header from '../components/Header'
 import '../css/AdminAllUsers.css'
 import {useState, useEffect} from 'react'
 import { getTeams } from '../api/teamApi';
+import Loading from './Loading';
 
 
 function AdminAllUsers(){
@@ -23,7 +24,7 @@ function AdminAllUsers(){
 
     },[])
     if(loading){
-        return(<div>...loading</div>)
+        return(<Loading/>)
     }
     return(
         <div className='pageContainer'>

frontend/react-app/src/pages/AdminPanel.jsx

@@ -5,6 +5,7 @@ import '../css/AdminPanel.css'
 import {useNavigate} from 'react-router-dom'
 import { useEffect, useState } from "react";
 import { getTeams } from "../api/teamApi";
+import Loading from "./Loading";
 
 export default function AdminPanel(){
     const { register, handleSubmit} = useForm();
@@ -38,7 +39,7 @@ export default function AdminPanel(){
     },[])
 
     if(loading){
-        return(<div>...Loading</div>)
+        return(<Loading/>)
     }
     return(
         <div className='pageContainer'>

frontend/react-app/src/pages/CreateAccount.jsx

@@ -3,6 +3,7 @@ import '../css/CreateAccount.css';
 import Header from '../components/Header';
 import CreateAccountForm from '../components/CreateAccountForm';
 import { getTeams } from '../api/teamApi';
+import Loading from './Loading';
 
 const CreateAccount = () => {
     const [loading, setLoading]= useState(true);
@@ -31,7 +32,7 @@ const CreateAccount = () => {
         getAllTeams();
     },[])
     if(loading){
-        return (<div>...Loading</div>)
+        return (<Loading/>)
     }
     return (
     <div className='pageContainer'>

frontend/react-app/src/pages/CreateTeamPage.jsx

@@ -4,6 +4,7 @@ import Header from '../components/Header';
 import CreateTeamForm from '../components/CreateTeamForm';
 import { getTeamMembers } from '../api/teamMemberAccountApi';
 import { getAdmins } from '../api/adminApi';
+import Loading from './Loading';
 
 export default function CreatTeamPage(){
     const [loading, setLoading]= useState(true);
@@ -32,7 +33,7 @@ export default function CreatTeamPage(){
         getAllUsers();
     },[])
     if(loading){
-        return (<div>...Loading</div>)
+        return (<Loading/>)
     }
     return (
     <div className='pageContainer'>

frontend/react-app/src/pages/EditTask.jsx

@@ -4,6 +4,7 @@ import EditTaskForm from '../components/EditTaskForm'
 import Header from '../components/Header'
 import '../css/EditTask.css'
 import { getTeamMembers } from '../api/teamApi'
+import Loading from './Loading'
 
 function EditTask(){
         const location = useLocation()
@@ -28,7 +29,7 @@ function EditTask(){
         },[]);
         console.log("taskToEdit: ", taskToEdit)
         if(loading){
-            return(<div>..Loading</div>)
+            return(<Loading/>)
         }
         return(
             <div className='pageContainer'>

frontend/react-app/src/pages/EditUserDetails.jsx

@@ -5,6 +5,7 @@ import { modifyAdminEmail, modifyAdminName } from "../api/adminAccountApi"
 import {getTeamMemberById, modifyTeamMemberEmail, modifyTeamMemberName } from "../api/teamMemberAccountApi"
 import {useForm} from 'react-hook-form'
 import { resetPassword } from "../api/adminApi"
+import Loading from "./Loading"
 import '../css/EditUserDetails.css';
 
 export default function EditUserDetails(){
@@ -90,7 +91,7 @@ export default function EditUserDetails(){
     },[accountToEdit])
     if(loading){
         return (
-            <div>Loading...</div>
+            <Loading/>
         )
     }
 

frontend/react-app/src/pages/Home.jsx

@@ -7,6 +7,7 @@ import {Link} from 'react-router-dom'
 import fakeData from "../FakeData/fakeTaskData.json"
 import TaskList from '../components/TaskList';
 import { getAssignedTasks } from "../api/teamMemberApi";
+import Loading from './Loading';
 
 function setUpDataTasksToDo(obj){
     let ansArr = []
@@ -115,7 +116,7 @@ const Home = () => {
 
     },[])
     if(loading || loadingTasks){
-        return (<div>Loading...</div>)
+        return (<Loading/>)
     }
     return (
 

frontend/react-app/src/pages/Loading.jsx

@@ -0,0 +1,61 @@
+import '../css/Loading.css'
+import { motion } from "framer-motion"
+const circleStyle={
+    top: '0',
+    left: '0',
+    display:'block',
+    width: '5rem',
+    height: '5rem',
+    border: '0.5rem solid #e9e9e9',
+    borderTop: '0.5rem solid #5d5d81',
+    borderRadius: '50%',
+    position: 'absoloute',
+    boxSizing: 'border-box'
+
+}
+const spinTransition = {
+    repeat: Infinity,
+    duration: 1,
+    ease: "linear",
+  }
+function Loading() {
+    return (
+        <div className="loadingContainer">
+            <motion.span
+                style={circleStyle}
+                animate={{ rotate: 360 }}
+                transition={spinTransition}
+/>
+        </div>
+    )
+}
+
+/**
+ * ==============   Styles   ================
+ */
+function StyleSheet() {
+    return (
+        <style>
+            {`
+            .container {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                padding: 40px;
+                border-radius: 8px;
+            }
+
+            .spinner {
+                width: 50px;
+                height: 50px;
+                border-radius: 50%;
+                border: 4px solid var(--divider);
+                border-top-color: #ff0088;
+                will-change: transform;
+            }
+            `}
+        </style>
+    )
+}
+
+export default Loading

frontend/react-app/src/pages/MyTasks.jsx

@@ -8,6 +8,7 @@ import { getAssignedTasks } from "../api/teamMemberApi";
 import { useCookies } from 'react-cookie';
 import { useState, useEffect } from 'react';
 import LockUnlockTask from "../components/LockUnlockTask";
+import Loading from "./Loading";
 import { Lock, LockOpen } from 'lucide-react';
 
 function getAssigneesNames(taskItem) {
@@ -142,7 +143,7 @@ const headerAndAccessorsComplete = [
     ...commonColumns
 ]
 if(loading){
-    return (<div>Loading...</div>)
+    return (<Loading/>)
 }
     const tasksToDoData = setUpData(tasksToDo);
     const tasksCompletedData = setUpDataCompleted(tasksToDo);

frontend/react-app/src/pages/Notifications.jsx

@@ -4,6 +4,7 @@ import Notification from "../components/Notification";
 import { getReadNotifications, getUnreadNotifications, markAsRead, markAsUnread, deleteNotification as deleteThisNotification} from '../api/notificationApi';
 import { useCookies } from 'react-cookie';
 import Header from '../components/Header'
+import Loading from './Loading';
 
 const Notifications = () => {
     const [cookies] = useCookies(['userInfo'])
@@ -100,7 +101,7 @@ const Notifications = () => {
         )
     );
     if(loading){
-        return(<div>...Loading</div>)
+        return(<Loading/>)
     }
     return (
         <div className='pageContainer'>

frontend/react-app/src/pages/Profile.jsx

@@ -7,6 +7,7 @@ import { useCookies } from "react-cookie";
 import { useEffect, useState } from "react";
 import {getTeamMemberById} from '../api/teamMemberAccountApi'
 import { getTeamsForMember } from "../api/teamMemberApi";
+import Loading from "./Loading";
 
 function Profile(){
     const [cookies] = useCookies(['userInfo']);
@@ -31,7 +32,7 @@ function Profile(){
         getUserInfo();
     },[])
     if(loading){
-        return (<div>...Loading</div>)
+        return (<Loading/>)
     }
     console.log(userData)
     return (

frontend/react-app/src/pages/TeamTasks.jsx

@@ -12,6 +12,7 @@ import LockUnlockTask from "../components/LockUnlockTask";
 import DeleteTeamButton from "../components/DeleteTeamButton";
 import { getAdmins } from "../api/adminApi";
 import AddToTeam from "../components/AddToTeam";
+import Loading from "./Loading";
 
 function getAssigneesNames(taskItem) {
   return taskItem.assignedMembers.map((member) => member.userName).join(", ");
@@ -177,7 +178,7 @@ useEffect(()=>{
 
 },[teamLead])
 if(loadingNames || loadingTasks){
-  return (<div>Loading...</div>)
+  return (<Loading/>)
 }