feat(overlays): add loading indicators for overlays

Add loading indicators for overlays

loading_indicator

src/components/FunctionalArea/NavBar/NavBar.component.tsx

@@ -3,6 +3,7 @@ import luxembourgLogoImg from '@/assets/images/luxembourg-logo.png';
 import { openDrawer } from '@/redux/drawer/drawer.slice';
 import { useAppDispatch } from '@/redux/hooks/useAppDispatch';
 import { openLegend } from '@/redux/legend/legend.slice';
+import { openLoginModal } from '@/redux/modal/modal.slice';
 import { IconButton } from '@/shared/IconButton';
 import Image from 'next/image';
 
@@ -25,6 +26,10 @@ export const NavBar = (): JSX.Element => {
     dispatch(openLegend());
   };
 
+  const openModalLogin = (): void => {
+    dispatch(openLoginModal());
+  };
+
   return (
     <div className="flex min-h-full w-[88px] flex-col items-center justify-between bg-cultured py-8">
       <div data-testid="nav-buttons">
@@ -35,7 +40,7 @@ export const NavBar = (): JSX.Element => {
           <IconButton icon="export" onClick={openDrawerExport} />
         </div>
         <div className="flex flex-col gap-[10px]">
-          <IconButton icon="admin" />
+          <IconButton icon="admin" onClick={openModalLogin} />
           <IconButton icon="legend" onClick={openDrawerLegend} />
         </div>
       </div>