feat: load languages on demand instead of all (#294)

* feat: load languages on demand instead of all

* fix: type without delay

* fix: resolve issues with quickly changing languages

cypress/integration/0-main-market/swap.spec.ts

@@ -97,7 +97,7 @@ describe('SWAP SPEC FOR MAINMARKET', () => {
       {
         fromAsset: assets.aaveMarket.ETH,
         toAsset: assets.aaveMarket.USDT,
-        amount: 2000,
+        amount: 1,
         failCase: true,
         hasApproval: false,
       },

cypress/support/steps/main.steps.ts

@@ -260,7 +260,8 @@ export const swap = (
           }
         });
       cy.get(':nth-child(1) > .AmountFieldWithSelect__field-inner  [data-cy=amountInput]').type(
-        amount.toString()
+        amount.toString(),
+        { delay: 0 }
       );
       cy.get('.AssetSelect__reverse .AssetSelect__button').click();
       cy.get('.AssetSelect__reverse .TokenIcon__name').contains(_shortNameTo).click();

src/libs/language-provider/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useContext, useState } from 'react';
+import React, { ReactNode, useContext, useEffect, useState } from 'react';
 import { IntlProvider } from 'react-intl';
 import dayjs from 'dayjs';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
@@ -16,17 +16,7 @@ import 'dayjs/locale/pt';
 
 import { getCurrentLocale } from './get-language';
 import { SupportedLanguage } from './constants';
-
-import enMessages from '../../translations/en.json';
-import esMessages from '../../translations/es.json';
-import frMessages from '../../translations/fr.json';
-import itMessages from '../../translations/it.json';
-import cnMessages from '../../translations/cn.json';
-import jaMessages from '../../translations/ja.json';
-import trMessages from '../../translations/tr.json';
-import viMessages from '../../translations/vi.json';
-import koMessages from '../../translations/ko.json';
-import ptMessages from '../../translations/pt.json';
+import en from '../../translations/en.json';
 
 dayjs.extend(localizedFormat);
 
@@ -35,19 +25,17 @@ interface LanguageContextProps {
   changeLang: (langCode: SupportedLanguage) => void;
 }
 
-const messages: {
-  [key: string]: {};
-} = {
-  en: enMessages,
-  es: esMessages,
-  fr: frMessages,
-  it: itMessages,
-  zh: cnMessages,
-  ja: jaMessages,
-  tr: trMessages,
-  vi: viMessages,
-  ko: koMessages,
-  pt: ptMessages,
+const messageLoader = {
+  en: () => import('../../translations/en.json'),
+  es: () => import('../../translations/es.json'),
+  fr: () => import('../../translations/fr.json'),
+  it: () => import('../../translations/it.json'),
+  zh: () => import('../../translations/cn.json'),
+  ja: () => import('../../translations/ja.json'),
+  tr: () => import('../../translations/tr.json'),
+  vi: () => import('../../translations/vi.json'),
+  ko: () => import('../../translations/ko.json'),
+  pt: () => import('../../translations/pt.json'),
 };
 
 const LanguageContext = React.createContext({} as LanguageContextProps);
@@ -58,6 +46,7 @@ interface LanguageProviderProps {
 
 export function LanguageProvider({ children }: LanguageProviderProps) {
   const [currentLang, setCurrentLangSlug] = useState<SupportedLanguage>(getCurrentLocale());
+  const [messages, setMessages] = useState<{ [key: string]: {} }>({ en });
 
   const changeLang = (langCode: SupportedLanguage) => {
     localStorage.setItem('locale', langCode);
@@ -66,6 +55,13 @@ export function LanguageProvider({ children }: LanguageProviderProps) {
 
   dayjs.locale(currentLang === 'zh' ? 'zh-cn' : currentLang);
 
+  useEffect(() => {
+    if (!messages[currentLang])
+      messageLoader[currentLang]?.().then((messages) =>
+        setMessages((cache: any) => ({ ...cache, [currentLang]: messages }))
+      );
+  }, [currentLang]);
+
   return (
     <LanguageContext.Provider value={{ currentLangSlug: currentLang, changeLang }}>
       <IntlProvider