Lazy load translations (#561)

* Lazy load translations

* Lazy load dateTimeFormats

frontend/src/i18n.js

@@ -1,33 +1,44 @@
 import Vue from "vue";
 import VueI18n from "vue-i18n";
+import Vuetify from "@/plugins/vuetify";
+import axios from 'axios';
 
 Vue.use(VueI18n);
 
-function parseLocaleFiles(locales) {
-  const messages = {};
-  locales.keys().forEach(key => {
-    const matched = key.match(/([A-Za-z0-9-_]+)\./i);
-    if (matched && matched.length > 1) {
-      const locale = matched[1];
-      messages[locale] = locales(key);
-    }
-  });
-  return messages;
+const i18n = new VueI18n();
+
+export default i18n;
+
+const loadedLanguages = [];
+
+function setI18nLanguage (lang) {
+  i18n.locale = lang;
+  Vuetify.framework.lang.current = lang;
+  axios.defaults.headers.common['Accept-Language'] = lang
+  document.querySelector('html').setAttribute('lang', lang)
+  return lang
 }
 
-function loadLocaleMessages() {
-  const locales = require.context("./locales/messages", true, /[A-Za-z0-9-_,\s]+\.json$/i);
-  return parseLocaleFiles(locales);
+export function loadLanguageAsync(lang) {
+    // If the same language
+  if (i18n.locale === lang) {
+    return Promise.resolve(setI18nLanguage(lang))
   }
 
-function loadDateTimeFormats() {
-  const locales = require.context("./locales/dateTimeFormats", true, /[A-Za-z0-9-_,\s]+\.json$/i);
-  return parseLocaleFiles(locales);
+  // If the language was already loaded
+  if (loadedLanguages.includes(lang)) {
+    return Promise.resolve(setI18nLanguage(lang))
   }
 
-export default new VueI18n({
-  locale: "en-US",
-  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || "en-US",
-  messages: loadLocaleMessages(),
-  dateTimeFormats: loadDateTimeFormats(),
-});
+  const messages = import(`./locales/messages/${lang}.json`);
+  const dateTimeFormats = import(`./locales/dateTimeFormats/${lang}.json`);
+  
+  return Promise.all([messages, dateTimeFormats]).then(
+    values  => {
+      i18n.setLocaleMessage(lang, values[0].default)
+      i18n.setDateTimeFormat(lang, values[1].default)
+      loadedLanguages.push(lang)
+      return setI18nLanguage(lang)
+    }
+  ) 
+}

frontend/src/routes/index.js

@@ -6,8 +6,7 @@ import { mealRoutes } from "./meal";
 import { generalRoutes } from "./general";
 import { store } from "@/store";
 import VueRouter from "vue-router";
-import VueI18n from "@/i18n";
-import Vuetify from "@/plugins/vuetify";
+import { loadLanguageAsync } from "@/i18n"
 import Vue from "vue";
 import i18n from "@/i18n.js";
 
@@ -45,14 +44,8 @@ router.afterEach(to => {
   });
 });
 
-function loadLocale() {
-  VueI18n.locale = store.getters.getActiveLang;
-  Vuetify.framework.lang.current = store.getters.getActiveLang;
-}
-
 router.beforeEach((__, _, next) => {
-  loadLocale();
-  next();
+  loadLanguageAsync(store.getters.getActiveLang).then(() => next());
 });
 
 export { router };

frontend/src/store/modules/siteSettings.js

@@ -1,6 +1,5 @@
 import { api } from "@/api";
-import VueI18n from "@/i18n";
-import Vuetify from "@/plugins/vuetify";
+import { loadLanguageAsync } from "@/i18n"
 
 const state = {
   siteSettings: {
@@ -16,8 +15,7 @@ const state = {
 const mutations = {
   setSettings(state, payload) {
     state.siteSettings = payload;
-    VueI18n.locale = payload.language;
-    Vuetify.framework.lang.current = payload.language;
+    loadLanguageAsync(payload.language);
   },
   setCustomPages(state, payload) {
     state.customPages = payload;