Fixed: Ensure translations are fetched before loading app

(cherry picked from commit ad2721dc55f3233e4c299babe5744418bc530418)

Closes #2670
Closes #2674
Closes #2679

frontend/src/Utilities/String/translate.js

@@ -1,30 +1,36 @@
 import createAjaxRequest from 'Utilities/createAjaxRequest';
 
 function getTranslations() {
-  let localization = null;
-  const ajaxOptions = {
-    async: false,
+  return createAjaxRequest({
+    global: false,
     dataType: 'json',
-    url: '/localization',
-    success: function(data) {
-      localization = data.Strings;
-    }
-  };
-
-  createAjaxRequest(ajaxOptions);
-
-  return localization;
+    url: '/localization'
+  }).request;
 }
 
-const translations = getTranslations();
+let translations = {};
+
+export function fetchTranslations() {
+  return new Promise(async(resolve) => {
+    try {
+      const data = await getTranslations();
+      translations = data.Strings;
+
+      resolve(true);
+    } catch (error) {
+      resolve(false);
+    }
+  });
+}
+
+export default function translate(key, args) {
+  const translation = translations[key] || key;
 
-export default function translate(key, args = '') {
   if (args) {
-    const translatedKey = translate(key);
-    return translatedKey.replace(/\{(\d+)\}/g, (match, index) => {
+    return translation.replace(/\{(\d+)\}/g, (match, index) => {
       return args[index];
     });
   }
 
-  return translations[key] || key;
+  return translation;
 }