fix: fix race condition in settings and langs

app/static/js/app.js

@@ -40,13 +40,16 @@ document.addEventListener('DOMContentLoaded', function(){
             frontendTimeout: 500
         },
         mounted: function() {
-            var self = this;
+            const self = this;
-            var requestSettings = new XMLHttpRequest();
-            requestSettings.open('GET', BaseUrl + '/frontend/settings', true);
 
-            requestSettings.onload = function() {
+            const settingsRequest = new XMLHttpRequest();
+            settingsRequest.open("GET", BaseUrl + "/frontend/settings", true);
+
+            const langsRequest = new XMLHttpRequest();
+            langsRequest.open("GET", BaseUrl + "/languages", true);
+
+            settingsRequest.onload = function() {
                 if (this.status >= 200 && this.status < 400) {
-                    // Success!
                     self.settings = JSON.parse(this.response);
                     self.sourceLang = self.settings.language.source.code;
                     self.targetLang = self.settings.language.target.code;
@@ -55,64 +58,32 @@ document.addEventListener('DOMContentLoaded', function(){
                     self.supportedFilesFormat = self.settings.supportedFilesFormat;
                     self.filesTranslation = self.settings.filesTranslation;
                     self.frontendTimeout = self.settings.frontendTimeout;
+
+                    if (langsRequest.response) {
+                        handleLangsResponse(self, langsRequest);
+                    } else {
+                        langsRequest.onload = function() {
+                            handleLangsResponse(self, this);
+                        }
+                    }
                 } else {
                     self.error = "Cannot load /frontend/settings";
                     self.loading = false;
                 }
             };
 
-            requestSettings.onerror = function() {
+            settingsRequest.onerror = function() {
                 self.error = "Error while calling /frontend/settings";
                 self.loading = false;
             };
 
-            requestSettings.send();
+            langsRequest.onerror = function() {
-
-            var requestLanguages = new XMLHttpRequest();
-            requestLanguages.open('GET', BaseUrl + '/languages', true);
-
-            requestLanguages.onload = function() {
-                if (this.status >= 200 && this.status < 400) {
-                    // Success!
-                    self.langs = JSON.parse(this.response);
-                    self.langs.push({ name: 'Auto Detect (Experimental)', code: 'auto' })
-                    if (self.langs.length === 0){
-                        self.loading = false;
-                        self.error = "No languages available. Did you install the models correctly?"
-                        return;
-                    }
-
-                    const sourceLanguage = self.langs.find(l => l.code === self.getQueryParam('source'))
-                    const isSourceAuto = !sourceLanguage && self.getQueryParam('source') === "auto"
-                    const targetLanguage = self.langs.find(l => l.code === self.getQueryParam('target'))
-
-                    if (sourceLanguage || isSourceAuto) {
-                        self.sourceLang = isSourceAuto ? "auto" : sourceLanguage.code
-                    }
-
-                    if (targetLanguage) {
-                        self.targetLang = targetLanguage.code
-                    }
-
-                    const defaultText = self.getQueryParam('q')
-
-                    if(defaultText) {
-                        self.inputText = decodeURI(defaultText)
-                    }
-
-                    self.loading = false;
-                } else {
-                    self.error = "Cannot load /languages";
-                    self.loading = false;
-                }
-            };
-
-            requestLanguages.onerror = function() {
                 self.error = "Error while calling /languages";
                 self.loading = false;
             };
 
-            requestLanguages.send();
+            settingsRequest.send();
+            langsRequest.send();
         },
         updated: function(){
             M.FormSelect.init(this.$refs.sourceLangDropdown);
@@ -137,27 +108,11 @@ document.addEventListener('DOMContentLoaded', function(){
             // but properly display checkmarks on supported browsers.
             // Also change the <select> width value depending on the <option> length
             if (this.$refs.sourceLangDropdown) {
-                for (var i = 0; i < this.$refs.sourceLangDropdown.children.length; i++){
+                updateSelectedAttribute(this.$refs.sourceLangDropdown, this.sourceLang);
-                    var el = this.$refs.sourceLangDropdown.children[i];
-                    if (el.value === this.sourceLang){
-                        el.setAttribute('selected', '');
-                        this.$refs.sourceLangDropdown.style.width = getTextWidth(el.text) + 24 + 'px';
-                    }else{
-                        el.removeAttribute('selected');
-                    }
-                }
             }
 
             if (this.$refs.targetLangDropdown) {
-                for (var i = 0; i < this.$refs.targetLangDropdown.children.length; i++){
+                updateSelectedAttribute(this.$refs.targetLangDropdown, this.targetLang);
-                    var el = this.$refs.targetLangDropdown.children[i];
-                    if (el.value === this.targetLang){
-                        el.setAttribute('selected', '');
-                        this.$refs.targetLangDropdown.style.width = getTextWidth(el.text) + 24 + 'px';
-                    }else{
-                        el.removeAttribute('selected');
-                    }
-                }
             }
         },
         computed: {
@@ -422,9 +377,62 @@ document.addEventListener('DOMContentLoaded', function(){
             }
         }
     });
-
 });
 
+/**
+ * @param {object} self
+ * @param {XMLHttpRequest} response
+ */
+function handleLangsResponse(self, response) {
+    if (response.status >= 200 && response.status < 400) {
+        self.langs = JSON.parse(response.response);
+
+        if (self.langs.length === 0){
+            self.loading = false;
+            self.error = "No languages available. Did you install the models correctly?"
+            return;
+        }
+
+        self.langs.push({ name: "Auto Detect (Experimental)", code: "auto" })
+
+        const sourceLanguage = self.langs.find(l => l.code === self.getQueryParam("source"))
+        const targetLanguage = self.langs.find(l => l.code === self.getQueryParam("target"))
+
+        if (sourceLanguage) {
+            self.sourceLang = sourceLanguage.code
+        }
+
+        if (targetLanguage) {
+            self.targetLang = targetLanguage.code
+        }
+
+        const defaultText = self.getQueryParam("q")
+
+        if (defaultText) {
+            self.inputText = decodeURI(defaultText)
+        }
+    } else {
+        self.error = "Cannot load /languages";
+    }
+
+    self.loading = false;
+}
+
+/**
+ * @param {object} langDropdown
+ * @param {string} lang
+ */
+function updateSelectedAttribute(langDropdown, lang) {
+    for (const child of langDropdown.children) {
+        if (child.value === lang){
+            child.setAttribute('selected', '');
+            langDropdown.style.width = getTextWidth(child.text) + 24 + 'px';
+        } else{
+            child.removeAttribute('selected');
+        }
+    }
+}
+
 function getTextWidth(text) {
     var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
     var ctx = canvas.getContext("2d");