Add loading functionality for changing pages

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/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";
 
@@ -70,13 +70,17 @@ const Sidebar: React.FC<SidebarProps> = ({
                 {/* Loading indicator*/}
                 {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) => {