load locales async and await all

Author: cconard96

lib/bundles/base.js

@@ -98,7 +98,7 @@ window._ = require('lodash');
 // signature is almost the same as for PHP functions, but accept extra arguments for string variables
 window.i18n = require('gettext.js/lib/gettext').default({domain: 'glpi'});
 if (window.loadLocales !== undefined) {
-    window.loadLocales();
+    await window.loadLocales();
 }
 
 const escape_msgid = function (msgid) {

src/Glpi/Application/View/Extension/FrontEndAssetsExtension.php

@@ -242,25 +242,31 @@ public function localesJs(): string
             $locales_domains[$plugin] = Plugin::getPluginFilesVersion($plugin);
         }
 
-        foreach ($locales_domains as $locale_domain => $locale_version) {
-            $locales_path = Html::getPrefixedUrl(
+        $locales_json = json_encode(array_combine(array_keys($locales_domains), array_map(static function ($domain, $version) {
+            return Html::getPrefixedUrl(
                 '/front/locale.php'
-                . '?domain=' . $locale_domain
-                . '&v=' . FrontEnd::getVersionCacheKey($locale_version)
+                . '?domain=' . $domain
+                . '&v=' . FrontEnd::getVersionCacheKey($version)
             );
-            $script = "
-                // Fetch locale JSON without jQuery to allow fetching before jQuery is loaded
-                function loadLocales() {
-                    const xhr = new XMLHttpRequest();
-                    xhr.open('GET', '" . \jsescape($locales_path) . "', false); // synchronous request
-                    xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
-                    xhr.send(null);
-                    if (xhr.status === 200) {
-                        i18n.loadJSON(JSON.parse(xhr.responseText), '" . \jsescape($locale_domain) . "');
-                    }
-                };
-            ";
-        }
+        }, array_keys($locales_domains), $locales_domains)));
+
+        $script = <<<JS
+            // Fetch locale JSON without jQuery to allow fetching before jQuery is loaded
+            async function loadLocales() {
+                const locales = $locales_json;
+                const promises = [];
+                for (const [domain, url] of Object.entries(locales)) {
+                    promises.push(window.fetch(url).then(response => {
+                        if (response.ok) {
+                            return response.json().then(data => {
+                                i18n.loadJSON(data, domain);
+                            });
+                        }
+                    }));
+                }
+                await Promise.all(promises);
+            }
+JS;
 
         return Html::scriptBlock($script);
     }