From 4e40eee7386b613faf090d3589333101cb5ed8d9 Mon Sep 17 00:00:00 2001 From: Eric Mc Sween Date: Thu, 21 Jan 2021 07:21:28 -0500 Subject: [PATCH] Merge pull request #3586 from overleaf/as-fix-react-i18n-re-render Trigger render after receiving translation strings GitOrigin-RevId: 22bfd5aa3cb7ae7c76cd6924663a4133b08c3d24 --- services/web/frontend/js/i18n.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/services/web/frontend/js/i18n.js b/services/web/frontend/js/i18n.js index 1d944fe34a..9e89578f97 100644 --- a/services/web/frontend/js/i18n.js +++ b/services/web/frontend/js/i18n.js @@ -6,7 +6,7 @@ const LANG = window.i18n.currentLangCode // Since we are rendering React from Angular, the initialisation is // synchronous on page load (but hidden behind the loading screen). This // means that translations must be initialised without any actual -// translations strings, and load those manually ourselves later +// translation strings, and load those manually ourselves later i18n.use(initReactI18next).init({ lng: LANG, @@ -14,7 +14,12 @@ i18n.use(initReactI18next).init({ react: { // Since we are manually waiting on the translations data to // load, we don't need to use Suspense - useSuspense: false + useSuspense: false, + + // Trigger a re-render when a language is added. Since we load the + // translation strings asynchronously, we need to trigger a re-render once + // they've loaded + bindI18nStore: 'added' }, interpolation: {