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'
-
-const localeModules = import.meta.glob<{ default: CrowdinMessages }>(
-	'../src/locales/*/index.json',
-	{
-		eager: true,
-	},
-)
+import { createMessageCompiler } from '@modrinth/ui'
 
 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)
+})