🚀 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
46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
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,
|
|
};
|
|
};
|