From 1aabd3ef1e664089254b3581b9b4c4491c2fdca1 Mon Sep 17 00:00:00 2001
From: sebseb7 <sebgreenbus@gmail.com>
Date: Wed, 23 Jul 2025 11:21:36 +0200
Subject: [PATCH] refactor: implement lazy loading for LoginComponent in
 ButtonGroup to enhance performance and user experience

---
 src/components/header/ButtonGroup.js | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/header/ButtonGroup.js b/src/components/header/ButtonGroup.js
index b1339a9..3b98517 100644
--- a/src/components/header/ButtonGroup.js
+++ b/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"