diff --git a/apps/web/app/loading.tsx b/apps/web/app/loading.tsx new file mode 100644 index 000000000..016865ebd --- /dev/null +++ b/apps/web/app/loading.tsx @@ -0,0 +1,5 @@ +import { GlobalLoader } from '@kit/ui/global-loader'; + +export default function Loading() { + return ; +} diff --git a/apps/web/lib/i18n/i18n.settings.ts b/apps/web/lib/i18n/i18n.settings.ts index cb35e57eb..ec7975cfd 100644 --- a/apps/web/lib/i18n/i18n.settings.ts +++ b/apps/web/lib/i18n/i18n.settings.ts @@ -61,5 +61,8 @@ export function getI18nSettings( fallbackNS: defaultI18nNamespaces, defaultNS: defaultI18nNamespaces, ns, + react: { + useSuspense: true, + }, }; } diff --git a/packages/i18n/src/i18n.client.ts b/packages/i18n/src/i18n.client.ts index 04690ddaf..ebc7373ee 100644 --- a/packages/i18n/src/i18n.client.ts +++ b/packages/i18n/src/i18n.client.ts @@ -14,20 +14,24 @@ export async function initializeI18nClient( settings: InitOptions, resolver: (lang: string, namespace: string) => Promise, ): Promise { - if (clientInstance?.isInitialized) { + if (clientInstance) { return Promise.resolve(clientInstance); } + const loadedLanguages: string[] = []; + await i18next - .use(initReactI18next) .use( resourcesToBackend(async (language, namespace, callback) => { const data = await resolver(language, namespace); + loadedLanguages.push(language); + return callback(null, data); }), ) .use(LanguageDetector) + .use(initReactI18next) .init( { ...settings, @@ -47,19 +51,10 @@ export async function initializeI18nClient( }, ); - console.log('i18n client initialized'); - - console.log( - `initialized with ${i18next.languages.join(', ')} languages`, - clientInstance, - ); - - console.log( - 'resource', - i18next.getResource('en', 'billing', 'billingInterval.month'), - ); - - console.log(i18next.t('billing:billingInterval.month')); + // keep component suspended until all languages are loaded + if (loadedLanguages.length !== settings.ns?.length) { + throw new Error(); + } clientInstance = i18next;