fix: login page flag icon preload (#1393)

web/src/SelectLanguageBox.js

@@ -32,16 +32,7 @@ class SelectLanguageBox extends React.Component {
     };
   }
 
-  items = [
+  items = Setting.Countries.map((country) => Setting.getItem(country.label, country.key, flagIcon(country.country, country.alt)));
-    Setting.getItem("English", "en", flagIcon("US", "English")),
-    Setting.getItem("简体中文", "zh", flagIcon("CN", "简体中文")),
-    Setting.getItem("Español", "es", flagIcon("ES", "Español")),
-    Setting.getItem("Français", "fr", flagIcon("FR", "Français")),
-    Setting.getItem("Deutsch", "de", flagIcon("DE", "Deutsch")),
-    Setting.getItem("日本語", "ja", flagIcon("JP", "日本語")),
-    Setting.getItem("한국어", "ko", flagIcon("KR", "한국어")),
-    Setting.getItem("Русский", "ru", flagIcon("RU", "Русский")),
-  ];
 
   getOrganizationLanguages(languages) {
     const select = [];

web/src/Setting.js

@@ -33,6 +33,16 @@ export const StaticBaseUrl = "https://cdn.casbin.org";
 // https://catamphetamine.gitlab.io/country-flag-icons/3x2/index.html
 export const CountryRegionData = getCountryRegionData();
 
+export const Countries = [{label: "English", key: "en", country: "US", alt: "English"},
+  {label: "简体中文", key: "zh", country: "CN", alt: "简体中文"},
+  {label: "Español", key: "es", country: "ES", alt: "Español"},
+  {label: "Français", key: "fr", country: "FR", alt: "Français"},
+  {label: "Deutsch", key: "de", country: "DE", alt: "Deutsch"},
+  {label: "日本語", key: "ja", country: "JP", alt: "日本語"},
+  {label: "한국어", key: "ko", country: "KR", alt: "한국어"},
+  {label: "Русский", key: "ru", country: "RU", alt: "Русский"},
+];
+
 export const OtherProviderInfo = {
   SMS: {
     "Aliyun SMS": {

web/src/auth/LoginPage.js

@@ -69,6 +69,12 @@ class LoginPage extends React.Component {
     }
   }
 
+  componentDidMount() {
+    Setting.Countries.forEach((country) => {
+      new Image().src = `${Setting.StaticBaseUrl}/flag-icons/${country.country}.svg`;
+    });
+  }
+
   componentDidUpdate(prevProps, prevState, snapshot) {
     if (this.state.application && !prevState.application) {
       const defaultCaptchaProviderItems = this.getDefaultCaptchaProviderItems(this.state.application);