apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-04-25 00:36:31 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge pull request #1176 from SohamBhattacharjee2003/perf/dynamic-locale-loading

Browse source 
perf: dynamic locale loading
This commit is contained in:
Rohan Verma 2026-04-07 23:41:19 -07:00 • committed by GitHub
commit 88834e7b1a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 28 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

44
surfsense_web/contexts/LocaleContext.tsx
View file

@ -2,21 +2,27 @@
import type React from "react";
import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
import { set } from "zod";
import enMessages from "../messages/en.json";
import esMessages from "../messages/es.json";
import hiMessages from "../messages/hi.json";
import ptMessages from "../messages/pt.json";
import zhMessages from "../messages/zh.json";
type Locale = "en" | "es" | "pt" | "hi" | "zh";
const messagesMap: Record<Locale, typeof enMessages> = {
en: enMessages,
es: esMessages as typeof enMessages,
pt: ptMessages as typeof enMessages,
hi: hiMessages as typeof enMessages,
zh: zhMessages as typeof enMessages,
/**
* Dynamically load locale messages on demand.
* English is the default and always available synchronously.
*/
const loadMessages = async (locale: Locale): Promise<typeof enMessages> => {
switch (locale) {
case "es":
return (await import("../messages/es.json")).default;
case "hi":
return (await import("../messages/hi.json")).default;
case "pt":
return (await import("../messages/pt.json")).default;
case "zh":
return (await import("../messages/zh.json")).default;
default:
return enMessages;
}
};
interface LocaleContextType {
@ -33,24 +39,30 @@ export function LocaleProvider({ children }: { children: React.ReactNode }) {
// Always start with 'en' to avoid hydration mismatch
// Then sync with localStorage after mount
const [locale, setLocaleState] = useState<Locale>("en");
const [messages, setMessages] = useState<typeof enMessages>(enMessages);
const [mounted, setMounted] = useState(false);
// Get messages based on current locale
const messages = messagesMap[locale] || enMessages;
// Load locale from localStorage after component mounts (client-side only)
useEffect(() => {
setMounted(true);
if (typeof window !== "undefined") {
const stored = localStorage.getItem(LOCALE_STORAGE_KEY);
if (stored && (["en", "es", "pt", "hi", "zh"] as const).includes(stored as Locale)) {
setLocaleState(stored as Locale);
const storedLocale = stored as Locale;
setLocaleState(storedLocale);
// Load messages for non-English locale
if (storedLocale !== "en") {
loadMessages(storedLocale).then(setMessages);
}
}
}
}, []);
// Update locale and persist to localStorage
const setLocale = useCallback((newLocale: Locale) => {
const setLocale = useCallback(async (newLocale: Locale) => {
// Load messages for the new locale
const newMessages = await loadMessages(newLocale);
setMessages(newMessages);
setLocaleState(newLocale);
if (typeof window !== "undefined") {
localStorage.setItem(LOCALE_STORAGE_KEY, newLocale);