diff --git a/public/app/core/localisation.tsx b/public/app/core/localisation.tsx
index c7626b68698..d3a44a3175a 100644
--- a/public/app/core/localisation.tsx
+++ b/public/app/core/localisation.tsx
@@ -1,17 +1,25 @@
import { I18n, i18n } from '@lingui/core';
import { I18nProvider as LinguiI18nProvider } from '@lingui/react';
-import React, { useState } from 'react';
+import React, { useEffect } from 'react';
+
+import config from 'app/core/config';
import { messages } from '../../locales/en/messages';
let i18nInstance: I18n;
-export function getI18n(locale = 'en') {
+export async function getI18n(locale = 'en') {
if (i18nInstance) {
return i18nInstance;
}
-
- i18n.load(locale, messages);
+ // Dynamically load the messages for the user's locale
+ const imp =
+ config.featureToggles.internationalization &&
+ (await import(`../../locales/${locale}/messages`).catch((err) => {
+ // TODO: Properly return an error if we can't find the messages for a locale
+ return err;
+ }));
+ i18n.load(locale, imp?.messages || messages);
// Browser support for Intl.PluralRules is good and covers what we support in .browserlistrc,
// but because this could potentially be in a the critical path of loading the frontend lets
@@ -38,7 +46,29 @@ interface I18nProviderProps {
children: React.ReactNode;
}
export function I18nProvider({ children }: I18nProviderProps) {
- const [i18nRef] = useState(() => getI18n());
+ useEffect(() => {
+ let loc;
+ if (config.featureToggles.internationalization) {
+ // TODO: Use locale preference instead of weekStart
+ switch (config.bootData.user.weekStart) {
+ case 'saturday':
+ loc = 'es';
+ break;
+ case 'sunday':
+ loc = 'fr';
+ break;
+ default:
+ loc = 'en';
+ break;
+ }
+ }
+
+ getI18n(loc);
+ }, []);
- return {children};
+ return (
+
+ {children}
+
+ );
}