loading for sign out

compass/app/home/layout.tsx

@@ -15,6 +15,8 @@ export default function RootLayout({
     const [isSidebarOpen, setIsSidebarOpen] = useState(true);
     const [user, setUser] = useState<User>();
     const router = useRouter();
+    const [loading, setLoading] = useState(true); 
+
 
     useEffect(() => {
         async function getUser() {
@@ -35,6 +37,7 @@ export default function RootLayout({
             );
 
             setUser(await userData.json());
+            setLoading(false);
         }
 
         getUser();
@@ -50,6 +53,7 @@ export default function RootLayout({
                         setIsSidebarOpen={setIsSidebarOpen}
                         isSidebarOpen={isSidebarOpen}
                         isAdmin={user.role === Role.ADMIN}
+                        loading={loading}
                     />
                     <div
                         className={`flex-1 transition duration-300 ease-in-out ${

compass/components/Sidebar/LoadingIcon.module.css

@@ -0,0 +1,20 @@
+/* components/LoadingIcon.module.css */
+.loader {
+    width: 24px; /* Larger for better visibility */
+    height: 24px;
+    border: 4px solid #5b21b6; /* Primary color */
+    border-top: 4px solid #ffffff; /* Contrasting color */
+    border-radius: 50%;
+    animation: spin 1s linear infinite; /* Smooth continuous spin */
+    margin-bottom: 20px;
+}
+
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg); /* Start position */
+    }
+    100% {
+        transform: rotate(360deg); /* Full rotation */
+    }
+}

compass/components/Sidebar/LoadingIcon.tsx

@@ -0,0 +1,14 @@
+// components/Loading.js
+import styles from "./LoadingIcon.module.css";
+
+const LoadingIcon = () => {
+    return (
+        <div className={styles.loadingOverlay}>
+            <div className={styles.loadingContent}>
+                <div className={styles.loader}></div>
+            </div>
+        </div>
+    );
+};
+
+export default LoadingIcon;

compass/components/Sidebar/Sidebar.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import {
     HomeIcon,
     ChevronDoubleLeftIcon,
@@ -9,7 +9,9 @@ import {
     LockClosedIcon,
 } from "@heroicons/react/24/solid";
 import { SidebarItem } from "./SidebarItem";
+import styles from "./LoadingIcon.module.css"
 import { UserProfile } from "../resource/UserProfile";
+import LoadingIcon from "./LoadingIcon";
 
 interface SidebarProps {
     setIsSidebarOpen: React.Dispatch<React.SetStateAction<boolean>>;
@@ -17,6 +19,7 @@ interface SidebarProps {
     name: string;
     email: string;
     isAdmin: boolean;
+    loading: boolean;
 }
 
 const Sidebar: React.FC<SidebarProps> = ({
@@ -25,7 +28,9 @@ const Sidebar: React.FC<SidebarProps> = ({
     name,
     email,
     isAdmin: admin,
+    loading,
 }) => {
+    const [isLoading, setIsLoading] = useState(false);
     return (
         <>
             {/* Button to open the sidebar. */}
@@ -62,11 +67,18 @@ const Sidebar: React.FC<SidebarProps> = ({
                     </button>
                 </div>
 
-                <div className="flex flex-col space-y-8">
+                   {/* Loading indicator*/}
-                    {/* user + logout button  */}
+                   {isLoading && (
-                    <div className="flex items-center p-4 space-x-2 border border-gray-200 rounded-md ">
+                    <div className="fixed top-2 left-2">
-                        <UserProfile name={name} email={email} />
+                        <LoadingIcon/>{/* Spinner */}
                     </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} />
+                    </div>
+
                     {/* navigation menu  */}
                     <div className="flex flex-col space-y-2">
                         <h4 className="text-xs font-semibold text-gray-500">

compass/components/resource/UserProfile.tsx

@@ -1,48 +1,35 @@
 import { useState } from "react";
 import { signOut } from "@/app/auth/actions";
-import LoggingOut from "../auth/LoggingOut";
 
 interface UserProfileProps {
     name: string;
     email: string;
+    setLoading: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const handleClick = async (
     event: React.MouseEvent<HTMLButtonElement>,
     setLoading: React.Dispatch<React.SetStateAction<boolean>>
 ) => {
-    setLoading(true);  // Set loading state to true
+    setLoading(true);  // Set loading to true
-
-    // Call signOut and wait for the process to complete before redirecting
     await signOut();
-
+    setLoading(false);  // Reset loading after sign-out completes
-    // Once signOut is complete, the redirect should happen, but let's delay it to allow the loading state to be visible for a short time
-    setTimeout(() => {
-        // The signOut already handles the redirect, so we don't need to redirect here again.
-        setLoading(false);  // Reset the loading state after the timeout (just in case)
-    }, 1000);  // You can adjust this delay as needed
 };
 
-export const UserProfile = ({ name, email }: UserProfileProps) => {
+export const UserProfile = ({ name, email, setLoading }: UserProfileProps) => {
-    const [loading, setLoading] = useState(false);
-
-    if (loading) {
-        // Show the "Logging out" screen while the sign-out process is in progress
-        return <LoggingOut />;
-    }
-
     return (
         <div className="flex flex-col items-start space-y-2">
             <div className="flex flex-col">
-                <span className="text-sm font-semibold text-gray-800">{name}</span>
+                <span className="text-sm font-semibold text-gray-800">
+                    {name}
+                </span>
                 <span className="text-xs text-gray-500">{email}</span>
             </div>
             <button
                 onClick={(event) => handleClick(event, setLoading)}
                 className="text-red-600 font-semibold text-xs hover:underline mt-1"
-                disabled={loading} // Disable button while loading
             >
-                 {loading ? "Signing out..." : "Sign out"} {/* Show appropriate text */}
+                Sign out
             </button>
         </div>
     );