refactor: implement lazy loading for LoginComponent in ButtonGroup to enhance performance and user experience

src/components/header/ButtonGroup.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, lazy } from 'react';
 import Box from '@mui/material/Box';
 import Badge from '@mui/material/Badge';
 import Drawer from '@mui/material/Drawer';
@@ -8,7 +8,14 @@ import Typography from '@mui/material/Typography';
 import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
 import CloseIcon from '@mui/icons-material/Close';
 import { useNavigate } from 'react-router-dom';
-import LoginComponent from '../LoginComponent.js';
+import CircularProgress from '@mui/material/CircularProgress';
+import { Suspense } from 'react';
+//import LoginComponent from '../LoginComponent.js';
+
+
+const LoginComponent = lazy(() => import(/* webpackChunkName: "login" */ "../LoginComponent.js"));
+
+
 import CartDropdown from '../CartDropdown.js';
 import LanguageSwitcher from '../LanguageSwitcher.js';
 import { isUserLoggedIn } from '../LoginComponent.js';
@@ -113,7 +120,9 @@ class ButtonGroup extends Component {
       <Box sx={{ display: 'flex', gap: { xs: 0.5, sm: 1 } }}>
         
         <LanguageSwitcher />
-        <LoginComponent/>
+        <Suspense fallback={<CircularProgress size={20} />}>
+          <LoginComponent/>
+        </Suspense>
                 
         <IconButton 
           color="inherit"