refactor: Update webpack configuration to improve git commit hash retrieval and enhance lazy loading of components for better performance

src/components/LanguageSwitcher.js

@@ -6,13 +6,37 @@ import MenuItem from '@mui/material/MenuItem';
 import Typography from '@mui/material/Typography';
 import { withI18n } from '../i18n/withTranslation.js';
 
+const LANGUAGE_FLAG_EMOJIS = {
+  ar: '🇪🇬',
+  bg: '🇧🇬',
+  cs: '🇨🇿',
+  de: '🇩🇪',
+  el: '🇬🇷',
+  en: '🇺🇸',
+  es: '🇪🇸',
+  fr: '🇫🇷',
+  hr: '🇭🇷',
+  hu: '🇭🇺',
+  it: '🇮🇹',
+  pl: '🇵🇱',
+  ro: '🇷🇴',
+  ru: '🇷🇺',
+  sk: '🇸🇰',
+  sl: '🇸🇮',
+  sq: '🇦🇱',
+  sr: '🇷🇸',
+  sv: '🇸🇪',
+  tr: '🇹🇷',
+  uk: '🇺🇦',
+  zh: '🇨🇳'
+};
+
 class LanguageSwitcher extends Component {
   constructor(props) {
     super(props);
-    
+
     this.state = {
-      anchorEl: null,
-      loadedFlags: {}
+      anchorEl: null
     };
   }
 
@@ -36,72 +60,7 @@ class LanguageSwitcher extends Component {
     this.handleClose();
   };
 
-  // Lazy load flag components
-  loadFlagComponent = async (lang) => {
-    if (this.state.loadedFlags[lang]) {
-      return this.state.loadedFlags[lang];
-    }
-
-    try {
-      const flagMap = {
-        'ar': () => import('country-flag-icons/react/3x2').then(m => m.EG),
-        'bg': () => import('country-flag-icons/react/3x2').then(m => m.BG),
-        'cs': () => import('country-flag-icons/react/3x2').then(m => m.CZ),
-        'de': () => import('country-flag-icons/react/3x2').then(m => m.DE),
-        'el': () => import('country-flag-icons/react/3x2').then(m => m.GR),
-        'en': () => import('country-flag-icons/react/3x2').then(m => m.US),
-        'es': () => import('country-flag-icons/react/3x2').then(m => m.ES),
-        'fr': () => import('country-flag-icons/react/3x2').then(m => m.FR),
-        'hr': () => import('country-flag-icons/react/3x2').then(m => m.HR),
-        'hu': () => import('country-flag-icons/react/3x2').then(m => m.HU),
-        'it': () => import('country-flag-icons/react/3x2').then(m => m.IT),
-        'pl': () => import('country-flag-icons/react/3x2').then(m => m.PL),
-        'ro': () => import('country-flag-icons/react/3x2').then(m => m.RO),
-        'ru': () => import('country-flag-icons/react/3x2').then(m => m.RU),
-        'sk': () => import('country-flag-icons/react/3x2').then(m => m.SK),
-        'sl': () => import('country-flag-icons/react/3x2').then(m => m.SI),
-        'sq': () => import('country-flag-icons/react/3x2').then(m => m.AL),
-        'sr': () => import('country-flag-icons/react/3x2').then(m => m.RS),
-        'sv': () => import('country-flag-icons/react/3x2').then(m => m.SE),
-        'tr': () => import('country-flag-icons/react/3x2').then(m => m.TR),
-        'uk': () => import('country-flag-icons/react/3x2').then(m => m.UA),
-        'zh': () => import('country-flag-icons/react/3x2').then(m => m.CN)
-      };
-
-      const flagLoader = flagMap[lang];
-      if (flagLoader) {
-        const FlagComponent = await flagLoader();
-        this.setState(prevState => ({
-          loadedFlags: {
-            ...prevState.loadedFlags,
-            [lang]: FlagComponent
-          }
-        }));
-        return FlagComponent;
-      }
-    } catch (error) {
-      console.warn(`Failed to load flag for language: ${lang}`, error);
-    }
-    return null;
-  };
-
   getLanguageFlag = (lang) => {
-    const FlagComponent = this.state.loadedFlags[lang];
-    
-    if (FlagComponent) {
-      return (
-        <FlagComponent 
-          style={{ 
-            width: '20px', 
-            height: '14px',
-            borderRadius: '2px',
-            border: '1px solid #ddd'
-          }} 
-        />
-      );
-    }
-    
-    // Loading placeholder or fallback
     return (
       <Box
         component="span"
@@ -111,35 +70,17 @@ class LanguageSwitcher extends Component {
           justifyContent: 'center',
           minWidth: '20px',
           height: '14px',
-          backgroundColor: '#f5f5f5',
-          color: '#666',
-          fontSize: '8px',
-          fontWeight: 'bold',
+          fontSize: '14px',
+          lineHeight: 1,
           borderRadius: '2px',
-          fontFamily: 'monospace',
-          border: '1px solid #ddd'
+          overflow: 'hidden'
         }}
       >
-        {this.getLanguageLabel(lang)}
+        {LANGUAGE_FLAG_EMOJIS[lang] || this.getLanguageLabel(lang)}
       </Box>
     );
   };
 
-  // Load flags when menu opens
-  componentDidUpdate(prevProps, prevState) {
-    const { anchorEl } = this.state;
-    const { languageContext } = this.props;
-    
-    if (anchorEl && !prevState.anchorEl && languageContext) {
-      // 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);
-        }
-      });
-    }
-  }
-
   getLanguageLabel = (lang) => {
     const labels = {
       'ar': 'EG',
@@ -275,4 +216,4 @@ class LanguageSwitcher extends Component {
   }
 }
 
-export default withI18n()(LanguageSwitcher); 
+export default withI18n()(LanguageSwitcher);