feat: implement i18n lazy loading optimization
🚀 Performance improvements: - Replace static language imports with dynamic imports - Load only current language on startup instead of all 13 languages - Implement on-demand loading when switching languages 📦 Bundle optimization: - Reduce initial bundle size by avoiding preloading all language files - Add resource caching to prevent reloading same language - Support all 13 languages: en, ru, zh, fa, tt, id, ar, ko, tr, de, es, jp, zhtw 🔧 Technical changes: - Convert i18n.ts to use dynamic import() for language resources - Add async initializeLanguage() for app startup - Create useI18n hook for language management with loading states - Update main.tsx for async language initialization - Fix language display labels in settings dropdown - Maintain backward compatibility with existing language system ✅ Fixed issues: - Resolve infinite loop in React components - Fix missing language labels in settings UI - Prevent circular dependencies in language loading - Add proper error handling and fallback mechanisms
This commit is contained in:
45
src/hooks/use-i18n.ts
Normal file
45
src/hooks/use-i18n.ts
Normal file
@@ -0,0 +1,45 @@
|
||||
import { useState, useCallback } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { changeLanguage, supportedLanguages } from "@/services/i18n";
|
||||
import { useVerge } from "./use-verge";
|
||||
|
||||
export const useI18n = () => {
|
||||
const { i18n, t } = useTranslation();
|
||||
const { patchVerge } = useVerge();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
const switchLanguage = useCallback(
|
||||
async (language: string) => {
|
||||
if (!supportedLanguages.includes(language)) {
|
||||
console.warn(`Unsupported language: ${language}`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (i18n.language === language) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
try {
|
||||
await changeLanguage(language);
|
||||
|
||||
if (patchVerge) {
|
||||
await patchVerge({ language });
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to change language:", error);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
},
|
||||
[i18n.language, patchVerge],
|
||||
);
|
||||
|
||||
return {
|
||||
currentLanguage: i18n.language,
|
||||
supportedLanguages,
|
||||
switchLanguage,
|
||||
isLoading,
|
||||
t,
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user