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 i18n = new VueI18n();
-  const messages = {};
+
-  locales.keys().forEach(key => {
+export default i18n;
-    const matched = key.match(/([A-Za-z0-9-_]+)\./i);
+
-    if (matched && matched.length > 1) {
+const loadedLanguages = [];
-      const locale = matched[1];
+
-      messages[locale] = locales(key);
+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
+}
+
+export function loadLanguageAsync(lang) {
+    // If the same language
+  if (i18n.locale === lang) {
+    return Promise.resolve(setI18nLanguage(lang))
+  }
+
+  // If the language was already loaded
+  if (loadedLanguages.includes(lang)) {
+    return Promise.resolve(setI18nLanguage(lang))
+  }
+
+  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)
     }
-  });
+  ) 
-  return messages;
 }
-
-function loadLocaleMessages() {
-  const locales = require.context("./locales/messages", true, /[A-Za-z0-9-_,\s]+\.json$/i);
-  return parseLocaleFiles(locales);
-}
-
-function loadDateTimeFormats() {
-  const locales = require.context("./locales/dateTimeFormats", true, /[A-Za-z0-9-_,\s]+\.json$/i);
-  return parseLocaleFiles(locales);
-}
-
-export default new VueI18n({
-  locale: "en-US",
-  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || "en-US",
-  messages: loadLocaleMessages(),
-  dateTimeFormats: loadDateTimeFormats(),
-});

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 { loadLanguageAsync } from "@/i18n"
-import Vuetify from "@/plugins/vuetify";
 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();
+  loadLanguageAsync(store.getters.getActiveLang).then(() => next());
-  next();
 });
 
 export { router };

frontend/src/store/modules/siteSettings.js

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