fix: fouc (#5012)

* fix: fouc

* feat: lazy load locales

* switch test to use build

apps/frontend/i18n/i18n.config.ts

@@ -1,11 +1,4 @@
-import { buildLocaleMessages, createMessageCompiler, type CrowdinMessages } from '@modrinth/ui'
+import { createMessageCompiler } from '@modrinth/ui'
-
-const localeModules = import.meta.glob<{ default: CrowdinMessages }>(
-	'../src/locales/*/index.json',
-	{
-		eager: true,
-	},
-)
 
 export default defineI18nConfig(() => ({
 	legacy: false,
@@ -14,6 +7,4 @@ export default defineI18nConfig(() => ({
 	messageCompiler: createMessageCompiler(),
 	missingWarn: false,
 	fallbackWarn: false,
-	// @ts-expect-error - buildLocaleMessages returns compatible format at runtime
-	messages: buildLocaleMessages(localeModules),
 }))

apps/frontend/i18n/locale-loader.ts

@@ -0,0 +1,17 @@
+import { type CrowdinMessages, transformCrowdinMessages } from '@modrinth/ui'
+
+// eager:false - only loads the locale requested
+const localeModules = import.meta.glob<{ default: CrowdinMessages }>(
+	'../src/locales/*/index.json',
+	{ eager: false },
+)
+
+export default defineI18nLocale(async (locale) => {
+	const loader = localeModules[`../src/locales/${locale}/index.json`]
+	if (!loader) {
+		console.warn(`Locale ${locale} not found`)
+		return {}
+	}
+	const messages = await loader()
+	return transformCrowdinMessages(messages.default)
+})

apps/frontend/nuxt.config.ts

@@ -225,8 +225,12 @@ export default defineNuxtConfig({
 	},
 	i18n: {
 		defaultLocale: 'en-US',
-		// @ts-expect-error - LocaleDefinition is compatible at runtime
+		lazy: true,
-		locales: LOCALES,
+		langDir: '.',
+		locales: LOCALES.map((locale) => ({
+			...locale,
+			file: 'locale-loader.ts',
+		})),
 		strategy: 'no_prefix',
 		detectBrowserLanguage: {
 			useCookie: true,

apps/frontend/package.json

@@ -3,7 +3,7 @@
 	"private": true,
 	"type": "module",
 	"scripts": {
-		"build": "nuxi build",
+		"build": "NODE_OPTIONS=\"--max-old-space-size=8192\" nuxi build",
 		"dev": "nuxi dev",
 		"generate": "nuxi generate",
 		"preview": "nuxi preview",
@@ -11,7 +11,7 @@
 		"lint": "eslint . && prettier --check .",
 		"fix": "eslint . --fix && prettier --write .",
 		"intl:extract": "formatjs extract \"src/{components,composables,layouts,middleware,modules,pages,plugins,utils}/**/*.{vue,ts,tsx,js,jsx,mts,cts,mjs,cjs}\" \"src/error.vue\" --ignore \"**/*.d.ts\" --ignore node_modules --out-file src/locales/en-US/index.json --format crowdin --preserve-whitespace",
-		"test": "nuxi build"
+		"test": "pnpm build"
 	},
 	"devDependencies": {
 		"@formatjs/cli": "^6.2.12",

package.json

@@ -40,9 +40,6 @@
 		"patchedDependencies": {
 			"readable-stream@2.3.8": "patches/readable-stream@2.3.8.patch"
 		},
-		"overrides": {
-			"vite": "npm:rolldown-vite@7.2.11"
-		},
 		"peerDependencyRules": {
 			"allowedVersions": {
 				"vite": "7",