fix: connect header and layout user info to api, fix setting api and lazy load

src/components/Layout/Toolbar.tsx

@@ -3,18 +3,20 @@ import {
   Box,
   IconButton,
   Toolbar as MuiToolbar,
-  Typography,
+  Skeleton,
 } from '@mui/material';
 import { Icon } from '@rkheftan/harmony-ui';
 import { HambergerMenu, Menu } from 'iconsax-react';
 import type { Dispatch, SetStateAction } from 'react';
 import type { User } from './type';
+import Logo from '../Logo';
 
 interface ToolbarProps {
   sideNavOpen: boolean;
   setSideNavOpen: Dispatch<SetStateAction<boolean>>;
   isMobile: boolean;
   user: User;
+  loading: boolean;
 }
 
 export const Toolbar: React.FC<ToolbarProps> = ({
@@ -22,6 +24,7 @@ export const Toolbar: React.FC<ToolbarProps> = ({
   setSideNavOpen,
   isMobile,
   user,
+  loading,
 }) => {
   return (
     <MuiToolbar
@@ -52,20 +55,22 @@ export const Toolbar: React.FC<ToolbarProps> = ({
             <Icon Component={HambergerMenu} />
           </IconButton>
         )}
-        {/* <Logo /> */}
-        <Typography variant="h6">LOGO placeholder</Typography>
+        <Logo />
       </Box>
       <Box
         sx={{ display: 'flex', height: '100%', alignItems: 'center', gap: 1 }}
       >
-        {isMobile && (
-          <Avatar
-            sx={{ width: 32, height: 32, fontSize: '14px' }}
-            src={user.profileUrl}
-          >
-            {user.firstName.charAt(0) + ' ' + user.lastName.charAt(0)}
-          </Avatar>
-        )}
+        {isMobile &&
+          (loading ? (
+            <Skeleton variant="circular" />
+          ) : (
+            <Avatar
+              sx={{ width: 32, height: 32, fontSize: '14px' }}
+              src={user.profileUrl}
+            >
+              {user.firstName.charAt(0) + ' ' + user.lastName.charAt(0)}
+            </Avatar>
+          ))}
         <IconButton>
           <Icon Component={Menu} variant="Bold" />
         </IconButton>