fix: Translations falling back to english after refreshing the page (#32348)

Co-authored-by: Guilherme Gazzo <5263975+ggazzo@users.noreply.github.com>

.changeset/fresh-students-remember.md

+---
+"@rocket.chat/meteor": patch
+---
+
+Fixed an issue where translations would fallback to english some of the times.

apps/meteor/client/providers/TranslationProvider.tsx

@@ -6,7 +6,6 @@ import type { TranslationContextValue } from '@rocket.chat/ui-contexts';
 import { useMethod, useSetting, TranslationContext } from '@rocket.chat/ui-contexts';
 import type i18next from 'i18next';
 import I18NextHttpBackend from 'i18next-http-backend';
-import sprintf from 'i18next-sprintf-postprocessor';
 import moment from 'moment';
 import type { ReactElement, ReactNode } from 'react';
 import React, { useEffect, useMemo } from 'react';
@@ -26,7 +25,7 @@ import {
 import { AppClientOrchestratorInstance } from '../../ee/client/apps/orchestrator';
 import { isRTLScriptLanguage } from '../lib/utils/isRTLScriptLanguage';
 
-i18n.use(I18NextHttpBackend).use(initReactI18next).use(sprintf);
+i18n.use(I18NextHttpBackend).use(initReactI18next);
 
 const useCustomTranslations = (i18n: typeof i18next) => {
 	const customTranslations = useSetting('Custom_Translations');
@@ -64,9 +63,13 @@ const useCustomTranslations = (i18n: typeof i18next) => {
 };
 
 const localeCache = new Map<string, Promise<string>>();
+let isI18nInitialized = false;
 
 const useI18next = (lng: string): typeof i18next => {
-	if (!i18n.isInitialized) {
+	// i18n.init is async, so there's a chance a race condition happens and it is initialized twice
+	// This breaks translations because it loads `lng` in the first init but not the second.
+	if (!isI18nInitialized) {
+		isI18nInitialized = true;
 		i18n.init({
 			lng,
 			fallbackLng: 'en',

apps/meteor/tests/e2e/translations.spec.ts

@@ -6,36 +6,50 @@ import { test, expect } from './utils/test';
 test.use({ storageState: Users.admin.state });
 
 test.describe('Translations', () => {
-    test.beforeAll(async ({ api }) => {
-        expect((await setUserPreferences(api, { language: '' })).status()).toBe(200);
-        expect((await setSettingValueById(api, 'Language', 'en')).status()).toBe(200);
-        expect((await setSettingValueById(api, 'Site_Name', 'Rocket.Chat')).status()).toBe(200);
+	test.beforeAll(async ({ api }) => {
+		expect((await setUserPreferences(api, { language: '' })).status()).toBe(200);
+		expect((await setSettingValueById(api, 'Language', 'en')).status()).toBe(200);
+		expect((await setSettingValueById(api, 'Site_Name', 'Rocket.Chat')).status()).toBe(200);
 	});
 
-    test.afterAll(async ({ api }) => {
-        expect((await setUserPreferences(api, { language: '' })).status()).toBe(200);
-        expect((await setSettingValueById(api, 'Language', 'en')).status()).toBe(200);
+	test.afterAll(async ({ api }) => {
+		expect((await setUserPreferences(api, { language: '' })).status()).toBe(200);
+		expect((await setSettingValueById(api, 'Language', 'en')).status()).toBe(200);
+	});
+
+	test("expect to display text in the user's preference language", async ({ page, api }) => {
+		await page.goto('/home');
+		await page.waitForTimeout(5000);
+		await expect(page.locator('h2')).toHaveText('Welcome to Rocket.Chat');
+
+		const response = page.waitForResponse('**/i18n/pt-BR.json');
+		expect((await setUserPreferences(api, { language: 'pt-BR' })).status()).toBe(200);
+		await response;
+		await expect(page.locator('h2')).toHaveText('Bem-vindo ao Rocket.Chat');
+		expect((await setUserPreferences(api, { language: '' })).status()).toBe(200);
+	});
+
+	test('expect to keep chosen language after refresh', async ({ page, api }) => {
+		await page.goto('/home');
+		await expect(page.locator('h2')).toHaveText('Welcome to Rocket.Chat');
+
+		const response = page.waitForResponse('**/i18n/pt-BR.json');
+		expect((await setUserPreferences(api, { language: 'pt-BR' })).status()).toBe(200);
+		await response;
+		await expect(page.locator('h2')).toHaveText('Bem-vindo ao Rocket.Chat');
+
+		// Test if selected language remaing after refresh
+		await page.goto('/home');
+		await expect(page.locator('h2')).toHaveText('Bem-vindo ao Rocket.Chat');
+
+		expect((await setUserPreferences(api, { language: '' })).status()).toBe(200);
+	});
+
+	test.describe('Browser', async () => {
+		test.use({ locale: 'pt-BR' });
+		test("expect to display text in the browser's language", async ({ page }) => {
+			await page.goto('/home');
+			await expect(page.locator('h2')).toHaveText('Bem-vindo ao Rocket.Chat');
+		});
 	});
-    
-    test('expect to display text in the user\'s preference language', async ({ page, api }) => {
-        await page.goto('/home');
-        await page.waitForTimeout(5000);
-        await expect(page.locator('h2')).toHaveText('Welcome to Rocket.Chat');
-
-        const response = page.waitForResponse('**/i18n/pt-BR.json');
-        expect((await setUserPreferences(api, { language: 'pt-BR' })).status()).toBe(200);
-        await response;
-        await expect(page.locator('h2')).toHaveText('Bem-vindo ao Rocket.Chat');
-        expect((await setUserPreferences(api, { language: '' })).status()).toBe(200);
-    });
-
-    // Browser language not working on CI for some reason. This test passes locally.
-    test.describe.skip('Browser', async () => {
-        test.use({ locale: 'pt-BR' });
-        test('expect to display text in the browser\'s language', async ({ page }) => {
-            await page.goto('/home');
-            await page.waitForTimeout(5000);
-            await expect(page.locator('h2')).toHaveText('Bem-vindo ao Rocket.Chat');
-        });
-    });
 });