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

feat: implement lazy loading for languages in i18n, enhance LanguageSwitcher to handle language changes asynchronously, and update available languages management

Browse Source
This commit is contained in:
sebseb7
2025-07-20 15:44:50 +02:00
parent 2b64719758
commit 5202ff6e3e
3 changed files with 246 additions and 362 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/LanguageSwitcher.js
View File

@@ -24,10 +24,14 @@ class LanguageSwitcher extends Component {
this.setState({ anchorEl: null });
};
handleLanguageChange = (language) => {
handleLanguageChange = async (language) => {
const { languageContext } = this.props;
if (languageContext) {
languageContext.changeLanguage(language);
try {
await languageContext.changeLanguage(language);
} catch (error) {
console.error('Failed to change language:', error);
}
}
this.handleClose();
};
@@ -126,8 +130,8 @@ class LanguageSwitcher extends Component {
const { languageContext } = this.props;
if (anchorEl && !prevState.anchorEl && languageContext) {
// Menu just opened, lazy load all flags
languageContext.availableLanguages.forEach(lang => {
// Menu just opened, lazy load flags for all languages (not just available ones)
languageContext.allLanguages.forEach(lang => {
if (!this.state.loadedFlags[lang]) {
this.loadFlagComponent(lang);
}
@@ -197,7 +201,7 @@ class LanguageSwitcher extends Component {
return null;
}
const { currentLanguage, availableLanguages } = languageContext;
const { currentLanguage, allLanguages } = languageContext;
const open = Boolean(anchorEl);
return (
@@ -237,29 +241,31 @@ class LanguageSwitcher extends Component {
horizontal: 'right',
}}
>
{availableLanguages.map((language) => (
<MenuItem
key={language}
onClick={() => this.handleLanguageChange(language)}
selected={language === currentLanguage}
sx={{
minWidth: 160,
display: 'flex',
justifyContent: 'space-between',
gap: 2
}}
>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
{this.getLanguageFlag(language)}
<Typography variant="body2">
{this.getLanguageName(language)}
{allLanguages.map((language) => {
return (
<MenuItem
key={language}
onClick={() => this.handleLanguageChange(language)}
selected={language === currentLanguage}
sx={{
minWidth: 160,
display: 'flex',
justifyContent: 'space-between',
gap: 2
}}
>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
{this.getLanguageFlag(language)}
<Typography variant="body2">
{this.getLanguageName(language)}
</Typography>
</Box>
<Typography variant="caption" color="text.secondary" sx={{ ml: 'auto' }}>
{this.getLanguageLabel(language)}
</Typography>
</Box>
<Typography variant="caption" color="text.secondary" sx={{ ml: 'auto' }}>
{this.getLanguageLabel(language)}
</Typography>
</MenuItem>
))}
</MenuItem>
);
})}
</Menu>
</Box>
);