Merge pull request Expensify#64378 from Expensify/jules-fixLazyLoadTranslations

Fix lazy loading translations issue with auth page

Author: lakchote

src/libs/actions/Locale.ts

@@ -0,0 +1,21 @@
+import Onyx from 'react-native-onyx';
+import {getDevicePreferredLocale} from '@libs/Localize';
+import TranslationStore from '@src/languages/TranslationStore';
+import ONYXKEYS from '@src/ONYXKEYS';
+
+/* There are scenarios where locale is not loaded and we start to render UI which results in rendering translations keys instead of real translations.
+ * E.g. when we transition from OldDot to NewDot during sign-out.
+ * This function is used to ensure that the locale is loaded before we start to render UI. Once we load initial locale we can remove listener.
+ */
+function init() {
+    const connection = Onyx.connect({
+        key: ONYXKEYS.NVP_PREFERRED_LOCALE,
+        initWithStoredValues: true,
+        callback: (locale) => {
+            Onyx.disconnect(connection);
+            TranslationStore.load(locale ?? getDevicePreferredLocale());
+        },
+    });
+}
+
+export default init;

src/setup/index.ts

@@ -2,6 +2,7 @@ import {I18nManager} from 'react-native';
 import Onyx from 'react-native-onyx';
 import intlPolyfill from '@libs/IntlPolyfill';
 import {setDeviceID} from '@userActions/Device';
+import initLocale from '@userActions/Locale';
 import initOnyxDerivedValues from '@userActions/OnyxDerived';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -52,6 +53,9 @@ export default function () {
         skippableCollectionMemberIDs: CONST.SKIPPABLE_COLLECTION_MEMBER_IDS,
     });
 
+    // Init locale early to avoid rendering translations keys instead of real translations
+    initLocale();
+
     initOnyxDerivedValues();
 
     setDeviceID();