Add loading functionality for changing pages

compass/README.md

@@ -24,8 +24,8 @@ This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-opti
 
 To learn more about Next.js, take a look at the following resources:
 
--   [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
--   [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
 You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
 

compass/app/home/layout.tsx

@@ -17,7 +17,6 @@ export default function RootLayout({
     const router = useRouter();
     const [loading, setLoading] = useState(true);
 
-
     useEffect(() => {
         async function getUser() {
             const supabase = createClient();

compass/components/RootLayout.tsx

@@ -33,7 +33,7 @@ export default function RootLayout({
             );
 
             const user: User = await userData.json();
-            setUser(user);  // Set user data after fetching
+            setUser(user); // Set user data after fetching
         }
 
         getUser();

compass/components/Sidebar/LoadingIcon.module.css

@@ -9,7 +9,6 @@
     margin-bottom: 20px;
 }
 
-
 @keyframes spin {
     0% {
         transform: rotate(0deg); /* Start position */

compass/components/Sidebar/Sidebar.tsx

@@ -9,7 +9,7 @@ import {
     LockClosedIcon,
 } from "@heroicons/react/24/solid";
 import { SidebarItem } from "./SidebarItem";
-import styles from "./LoadingIcon.module.css"
+import styles from "./LoadingIcon.module.css";
 import { UserProfile } from "../resource/UserProfile";
 import LoadingIcon from "./LoadingIcon";
 
@@ -67,16 +67,20 @@ const Sidebar: React.FC<SidebarProps> = ({
                     </button>
                 </div>
 
-                   {/* Loading indicator*/}
+                {/* Loading indicator*/}
-                   {isLoading && (
+                {isLoading && (
                     <div className="fixed top-2 left-2">
-                        <LoadingIcon/>{/* Spinner */}
+                        <LoadingIcon />
                     </div>
                 )}
 
                 <div className="flex flex-col space-y-8">
                     <div className="flex items-center p-4 space-x-2 border rounded-md">
-                        <UserProfile name={name} email={email} setLoading={setIsLoading} />
+                        <UserProfile
+                            name={name}
+                            email={email}
+                            setLoading={setIsLoading}
+                        />
                     </div>
 
                     {/* navigation menu  */}
@@ -91,6 +95,7 @@ const Sidebar: React.FC<SidebarProps> = ({
                                     text="Admin"
                                     active={true}
                                     redirect="/admin"
+                                    onClick={setIsLoading}
                                 />
                             )}
 
@@ -99,24 +104,28 @@ const Sidebar: React.FC<SidebarProps> = ({
                                 text="Home"
                                 active={true}
                                 redirect="/home"
+                                onClick={setIsLoading}
                             />
                             <SidebarItem
                                 icon={<BookmarkIcon />}
                                 text="Resources"
                                 active={true}
                                 redirect="/resource"
+                                onClick={setIsLoading}
                             />
                             <SidebarItem
                                 icon={<ClipboardIcon />}
                                 text="Services"
                                 active={true}
                                 redirect="/service"
+                                onClick={setIsLoading}
                             />
                             <SidebarItem
                                 icon={<BookOpenIcon />}
                                 text="Training Manuals"
                                 active={true}
                                 redirect="/training-manuals"
+                                onClick={setIsLoading}
                             />
                         </nav>
                     </div>

compass/components/Sidebar/SidebarItem.tsx

@@ -5,6 +5,7 @@ interface SidebarItemProps {
     text: string;
     active: boolean;
     redirect: string;
+    onClick: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export const SidebarItem: React.FC<SidebarItemProps> = ({
@@ -12,9 +13,11 @@ export const SidebarItem: React.FC<SidebarItemProps> = ({
     text,
     active,
     redirect,
+    onClick,
 }) => {
     return (
         <Link
+            onClick={() => onClick(true)}
             href={redirect}
             className={
                 active

compass/components/resource/UserProfile.tsx

@@ -11,9 +11,8 @@ const handleClick = async (
     event: React.MouseEvent<HTMLButtonElement>,
     setLoading: React.Dispatch<React.SetStateAction<boolean>>
 ) => {
-    setLoading(true);  // Set loading to true
+    setLoading(true);
     await signOut();
-    setLoading(false);  // Reset loading after sign-out completes
 };
 
 export const UserProfile = ({ name, email, setLoading }: UserProfileProps) => {