feat: add loading to logout button

Author: pooriaset

src/app/[locale]/(main)/(container)/profile/components/MenuItems.tsx

@@ -1,6 +1,7 @@
 import { Link } from '@/navigation';
 import {
   Chip,
+  CircularProgress,
   Divider,
   List,
   ListItem,
@@ -17,6 +18,7 @@ export interface MenuItem {
   icon: any;
   count?: number;
   onClick?: () => void;
+  isLoading?: boolean;
 }
 
 export interface MenuItemsProps {
@@ -60,8 +62,13 @@ const MenuItems: FC<MenuItemsProps> = ({ items }) => {
                       minWidth: 36,
                     }}
                   >
-                    <item.icon />
+                    {item.isLoading ? (
+                      <CircularProgress color="inherit" size={20} />
+                    ) : (
+                      <item.icon />
+                    )}
                   </ListItemIcon>
+
                   <ListItemText
                     primary={item.label}
                     primaryTypographyProps={{

src/app/[locale]/(main)/(container)/profile/hooks/useMenuItems.ts

@@ -9,6 +9,7 @@ import { MenuItem } from '../components/MenuItems';
 import { usePathname, useRouter } from '@/navigation';
 import { signOut } from 'next-auth/react';
 import { protectedRoutes } from '@/config/app';
+import { useTransition } from 'react';
 
 export interface IUseMenuItems {
   (props?: { ordersCount: number }): {
@@ -17,14 +18,16 @@ export interface IUseMenuItems {
 }
 const useMenuItems: IUseMenuItems = (props) => {
   const t = useTranslations();
-
+  const [isPending, startTransition] = useTransition();
   const pathname = usePathname();
   const router = useRouter();
   const handleLogout = async () => {
-    await signOut({ redirect: false });
-    if (protectedRoutes.some((route) => pathname.includes(route))) {
-      router.push('/');
-    }
+    startTransition(async () => {
+      await signOut({ redirect: false });
+      if (protectedRoutes.some((route) => pathname.includes(route))) {
+        router.push('/');
+      }
+    });
   };
 
   const items = [
@@ -48,6 +51,7 @@ const useMenuItems: IUseMenuItems = (props) => {
       label: t('profile.logout'),
       onClick: handleLogout,
       icon: LogoutOutlined,
+      isLoading: isPending,
     },
   ];
   return { items };