seb/reactShop
1
0
Fork 0
Code Issues Pull Requests Activity

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

Browse Source
This commit is contained in:
sebseb7
2025-07-23 11:21:36 +02:00
parent 4879f68998
commit 1aabd3ef1e
1 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/header/ButtonGroup.js
View File

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