Lazy load translations

src/components/LanguageSelection/LanguageSelection.jsx

@@ -65,7 +65,7 @@ const LanguageSelection = ({heading = DEFAULT_HEADING, headingLevel = 2}) => {
     // or if an update is being processed.
     if (updatingLanguage || languageCode === locale) return;
 
-    const confirmationQuestion = formatMessageForLocale(languageCode, changeLanguagePrompt);
+    const confirmationQuestion = await formatMessageForLocale(languageCode, changeLanguagePrompt);
 
     // only prompt to confirm if there is an active submission
     if (submissionState.hasSubmission && !window.confirm(confirmationQuestion)) {

src/components/LanguageSelection/LanguageSelection.stories.jsx

@@ -124,7 +124,11 @@ export const Functional = {
     await userEvent.click(frysk_button);
     // wait for PUT api call to have completed and loading state to be resolved
     await waitFor(() => canvas.findByText(/^fy$/i));
-    await expect(args.onLanguageChangeDone).toHaveBeenCalledTimes(1); // change once
+    // change once
+    await waitFor(() => {
+      expect(args.onLanguageChangeDone).toHaveBeenCalled();
+    });
+    expect(args.onLanguageChangeDone).toHaveBeenCalledTimes(1);
   },
 };
 

src/i18n.jsx

@@ -12,9 +12,6 @@
 import ErrorMessage from 'components/Errors/ErrorMessage';
 import Loader from 'components/Loader';
 
-import messagesEN from './i18n/compiled/en.json';
-import messagesNL from './i18n/compiled/nl.json';
-
 // ensure flatpickr locales are included in bundle
 flatpickr.l10ns.nl = Dutch;
 
@@ -24,22 +21,32 @@
   currentLanguage.setValue(langCode);
 };
 
-const loadLocaleData = locale => {
+const loadLocaleData = async locale => {
+  let localeToLoad;
   switch (locale) {
-    case 'nl':
-      return messagesNL;
-    default:
-      return messagesEN;
+    case 'nl': {
+      localeToLoad = 'nl';
+      break;
+    }
+    case 'en':
+    // in case (accidentally) a locale is set that we don't ship translations for yet,
+    // fall back to English.
+    // eslint-disable-next-line no-fallthrough
+    default: {
+      localeToLoad = 'en';
+    }
   }
+  const messages = await import(`./i18n/compiled/${localeToLoad}.json`);
+  return messages.default;
 };
 
 /*
 Functionality to localize messages in a locale outside of the usual React lifecycle.
  */
 const cache = createIntlCache();
 
-const formatMessageForLocale = (locale, msg) => {
-  const messages = loadLocaleData(locale);
+const formatMessageForLocale = async (locale, msg) => {
+  const messages = await loadLocaleData(locale);
   const intl = createIntl({locale, messages}, cache);
   return intl.formatMessage(msg);
 };

vite.config.mts

@@ -148,6 +148,14 @@ export default defineConfig(({mode}) => ({
       },
     },
     sentryVitePlugin({
+      silent: mode === 'development',
+      release: {
+        create: false,
+        inject: false,
+      },
+      sourcemaps: {
+        disable: true,
+      },
       bundleSizeOptimizations: {
         excludeDebugStatements: true,
         excludeTracing: true,
@@ -156,6 +164,7 @@ export default defineConfig(({mode}) => ({
         excludeReplayIframe: true,
         excludeReplayWorker: true,
       },
+      telemetry: false,
     }),
     // must be last!
     codecovVitePlugin({