Authentication: Optimizing the initial load of langpack (#2862)

src/components/auth/AuthPhoneNumber.tsx

@@ -70,7 +70,7 @@ const AuthPhoneNumber: FC<StateProps> = ({
   const inputRef = useRef<HTMLInputElement>(null);
   const suggestedLanguage = getSuggestedLanguage();
 
-  const continueText = useLangString(suggestedLanguage, 'ContinueOnThisLanguage');
+  const continueText = useLangString(suggestedLanguage, 'ContinueOnThisLanguage', true);
   const [country, setCountry] = useState<ApiCountryCode | undefined>();
   const [phoneNumber, setPhoneNumber] = useState<string | undefined>();
   const [isTouched, setIsTouched] = useState(false);

src/components/auth/AuthQrCode.tsx

@@ -58,7 +58,7 @@ const AuthCode: FC<StateProps> = ({
   const lang = useLang();
   // eslint-disable-next-line no-null/no-null
   const qrCodeRef = useRef<HTMLDivElement>(null);
-  const continueText = useLangString(suggestedLanguage, 'ContinueOnThisLanguage');
+  const continueText = useLangString(suggestedLanguage, 'ContinueOnThisLanguage', true);
   const [isLoading, markIsLoading, unmarkIsLoading] = useFlag();
   const [isQrMounted, markQrMounted, unmarkQrMounted] = useFlag();
 

src/components/middle/composer/hooks/useEditing.ts

@@ -116,8 +116,7 @@ const useEditing = (
         noWebPage: false,
       });
     }
-    // eslint-disable-next-line react-hooks-static-deps/exhaustive-deps -- `as const` not yet supported by linter
+  }, [editedMessage, chatId, getHtml, threadId, getShouldResetNoWebPageDebounced]);
-  }, [editedMessage, chatId, getHtml, threadId] as const);
 
   const restoreNewDraftAfterEditing = useCallback(() => {
     if (!draft) return;

src/hooks/useLangString.ts

@@ -1,18 +1,21 @@
 import * as langProvider from '../util/langProvider';
 import { useState } from '../lib/teact/teact';
 
-const useLangString = (langCode: string | undefined, key: string): string | undefined => {
+const useLangString = (
+  langCode: string | undefined,
+  key: string,
+  shouldIgnoreSameValue = false,
+): string | undefined => {
   const [translation, setTranslation] = useState<string>();
 
   if (langCode) {
     langProvider
       .getTranslationForLangString(langCode, key)
       .then((value) => {
-        // The string is not translated, maybe the language pack was not loaded due to network or a timeout errors
+        // The string is not translated, maybe the language pack was not loaded due to network errors or a timeout
-        if (value === key) {
+        if (shouldIgnoreSameValue && value === key) {
           return;
         }
-
         setTranslation(value);
       });
   }

src/util/fallbackLangPackInitial.ts

@@ -2,7 +2,7 @@
 
 import type { ApiLangPack } from '../api/types';
 
-export const authLangPack = {
+export const fallbackLangPackInitial = {
   WrongNumber: {
     key: 'WrongNumber',
     value: 'Wrong number?',

src/util/langProvider.ts

@@ -10,7 +10,7 @@ import * as cacheApi from './cacheApi';
 import { callApi } from '../api/gramjs';
 import { createCallbackManager } from './callbacks';
 import { formatInteger } from './textFormat';
-import { authLangPack } from './authLangPack';
+import { fallbackLangPackInitial } from './fallbackLangPackInitial';
 
 export interface LangFn {
   (key: string, value?: any, format?: 'i', pluralValue?: number): string;
@@ -105,16 +105,11 @@ function createLangFn() {
       }
     }
 
-    if (!langPack && !fallbackLangPack && !authLangPack[key]) {
+    if (!fallbackLangPack) {
-      return key;
-    }
-
-    const shouldImportFallback = !fallbackLangPack && !(langPack?.[key] || fallbackLangPack?.[key]);
-    if (shouldImportFallback) {
       void importFallbackLangPack();
     }
 
-    const langString = (langPack?.[key]) || (fallbackLangPack?.[key]) || authLangPack[key];
+    const langString = langPack?.[key] || fallbackLangPack?.[key] || fallbackLangPackInitial[key];
     if (!langString) {
       return key;
     }