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

56
src/i18n/withTranslation.js
View File

@@ -1,5 +1,6 @@
import React, { Component } from 'react';
import { withTranslation as reactI18nextWithTranslation } from 'react-i18next';
import { loadLanguage } from './index.js';
// HOC to provide translation functions to class components
export const withTranslation = (namespaces = 'translation') => (WrappedComponent) => {
@@ -10,7 +11,7 @@ export const withTranslation = (namespaces = 'translation') => (WrappedComponent
export const LanguageContext = React.createContext({
currentLanguage: 'de',
changeLanguage: () => {},
availableLanguages: ['ar', 'bg', 'cs', 'de', 'el', 'en', 'es', 'fr', 'hr', 'hu', 'it', 'pl', 'ro', 'ru', 'sk', 'sl', 'sr', 'sv', 'tr', 'uk', 'zh']
availableLanguages: ['de'] // Start with only German
});
// Provider component for language management
@@ -18,14 +19,16 @@ export class LanguageProvider extends Component {
constructor(props) {
super(props);
// Get initial language from i18n instance
const currentLanguage = props.i18n?.language || 'de';
// Always start with German
const currentLanguage = 'de';
this.state = {
currentLanguage,
availableLanguages: ['ar', 'bg', 'cs', 'de', 'el', 'en', 'es', 'fr', 'hr', 'hu', 'it', 'pl', 'ro', 'ru', 'sk', 'sl', 'sr', 'sv', 'tr', 'uk', 'zh'],
demoMode: false, // Enable demo mode
currentLanguageIndex: 0
availableLanguages: ['de'], // Start with only German visible
allLanguages: ['ar', 'bg', 'cs', 'de', 'el', 'en', 'es', 'fr', 'hr', 'hu', 'it', 'pl', 'ro', 'ru', 'sk', 'sl', 'sr', 'sv', 'tr', 'uk', 'zh'],
demoMode: false,
currentLanguageIndex: 0,
loadingLanguages: new Set()
};
this.demoInterval = null;
@@ -124,14 +127,47 @@ export class LanguageProvider extends Component {
}
};
changeLanguage = (language) => {
if (this.props.i18n && this.state.availableLanguages.includes(language)) {
changeLanguage = async (language) => {
if (this.props.i18n && this.state.allLanguages.includes(language)) {
// Stop demo mode if user manually changes language
if (this.state.demoMode) {
this.stopDemo();
}
this.props.i18n.changeLanguage(language);
// If language is not German and not already available, load it
if (language !== 'de' && !this.state.availableLanguages.includes(language)) {
// Check if already loading
if (this.state.loadingLanguages.has(language)) {
return; // Already loading
}
// Mark as loading
this.setState(prevState => ({
loadingLanguages: new Set([...prevState.loadingLanguages, language])
}));
try {
console.log(`🌍 Loading language: ${language}`);
await loadLanguage(language);
// Add to available languages after successful load
this.setState(prevState => ({
availableLanguages: [...prevState.availableLanguages, language],
loadingLanguages: new Set([...prevState.loadingLanguages].filter(l => l !== language))
}));
console.log(`✅ Language ${language} now available`);
} catch (error) {
console.error(`❌ Failed to load language ${language}:`, error);
this.setState(prevState => ({
loadingLanguages: new Set([...prevState.loadingLanguages].filter(l => l !== language))
}));
return; // Don't change language if loading failed
}
}
// Change the language
await this.props.i18n.changeLanguage(language);
}
};
@@ -140,6 +176,8 @@ export class LanguageProvider extends Component {
currentLanguage: this.state.currentLanguage,
changeLanguage: this.changeLanguage,
availableLanguages: this.state.availableLanguages,
allLanguages: this.state.allLanguages,
loadingLanguages: this.state.loadingLanguages,
demoMode: this.state.demoMode,
stopDemo: this.stopDemo
};