[i18n] Load "en" translations parallely

config/context_processors.py

@@ -4,9 +4,16 @@
 
 
 def frontend_settings(request):
+    """
+    Hard coding this for now
+    but will be taken from users model
+    and cookies later on
+    """
+    preferred_language = 'en'
     frontend_settings = {
         'development_mode': settings.MATHESAR_MODE == 'DEVELOPMENT',
-        'manifest_data': get_manifest_data(),
+        'manifest_data': get_manifest_data(preferred_language),
+        'preferred_language': preferred_language,
         'live_demo_mode': getattr(settings, 'MATHESAR_LIVE_DEMO', False),
         'live_demo_username': getattr(settings, 'MATHESAR_LIVE_DEMO_USERNAME', None),
         'live_demo_password': getattr(settings, 'MATHESAR_LIVE_DEMO_PASSWORD', None),

mathesar/templates/mathesar/index.html

@@ -4,9 +4,11 @@
 {% block title %}Home{% endblock %}
 
 {% block styles %}
-  {% if not development_mode %} {% for css_file in manifest_data.module_css %}
-    <link rel="stylesheet" href="{% static css_file %}" />
-  {% endfor %} {% endif %}
+  {% if not development_mode %} 
+    {% for css_file in manifest_data.module_css %}
+      <link rel="stylesheet" href="{% static css_file %}" />
+    {% endfor %} 
+  {% endif %}
 {% endblock %}
 
 {% block scripts %}
@@ -17,6 +19,17 @@
     {% endfor %}
   {% endif %}
 
+  <script type="module">
+    var isDevelopmentMode = {{ development_mode|yesno:"true,false" }}
+    var src = isDevelopmentMode ? "{{ client_dev_url }}/src/i18n/{{ preferred_language }}/index.ts" : "{% static manifest_data.module_translations_file %}"
+    import(src).then(translations => {
+      window.translations = {
+        lang: "{{ preferred_language }}",
+        translationStrings: JSON.stringify(translations.default)
+      }
+    })
+  </script>
+
   {% if development_mode %}
     <script type="module" src="{{ client_dev_url }}/@vite/client"></script>
     <script type="module" src="{{ client_dev_url }}/src/main.ts"></script>
@@ -52,11 +65,20 @@
     ></script>
     <script
       nomodule
-      id="vite-legacy-entry"
+      id="vite-legacy-js-slot"
       data-src="{% static manifest_data.legacy_js %}"
     >
       System.import(
-        document.getElementById("vite-legacy-entry").getAttribute("data-src")
+        document.getElementById("vite-legacy-js-slot").getAttribute("data-src")
+      );
+    </script>
+    <script
+      nomodule
+      id="vite-legacy-translations-slot"
+      data-src="{% static manifest_data.legacy_translations_file %}"
+    >
+      System.import(
+        document.getElementById("vite-legacy-translations-slot").getAttribute("data-src")
       );
     </script>
   {% endif %}

mathesar/utils/frontend.py

@@ -4,7 +4,7 @@
 from django.core.cache import cache
 
 
-def get_manifest_data():
+def get_manifest_data(preferred_language):
     # We don't need the manifest data for local development.
     if settings.MATHESAR_MODE == 'DEVELOPMENT':
         return {}
@@ -18,14 +18,27 @@ def get_manifest_data():
     with open(settings.MATHESAR_MANIFEST_LOCATION, 'r') as manifest_file:
         raw_data = json.loads(manifest_file.read())
 
+    translations_file_path = get_translations_file_path(preferred_language)
+
     module_data = raw_data['src/main.ts']
     manifest_data['module_css'] = [filename for filename in module_data['css']]
     manifest_data['module_js'] = module_data['file']
 
+    # Purposefully letting it fail if the translations file for that lang is not in the bundle
+    manifest_data['module_translations_file'] = raw_data[translations_file_path["module"]]["file"]
+
     legacy_data = raw_data['src/main-legacy.ts']
     manifest_data['legacy_polyfill_js'] = raw_data['vite/legacy-polyfills-legacy']['file']
     manifest_data['legacy_js'] = legacy_data['file']
+    manifest_data['legacy_translations_file'] = raw_data[translations_file_path["legacy"]]["file"]
 
     # Cache data for 1 hour
     cache.set('manifest_data', manifest_data, 60 * 60)
     return manifest_data
+
+
+def get_translations_file_path(preferred_language):
+    return {
+        "module": f'src/i18n/{preferred_language}/index.ts',
+        "legacy": f'src/i18n/{preferred_language}/index-legacy.ts'
+    }

mathesar_ui/src/App.svelte

@@ -19,21 +19,28 @@
   import { modal } from './stores/modal';
   import { setReleasesStoreInContext } from './stores/releases';
   import ModalRecordSelector from './systems/record-selector/ModalRecordSelector.svelte';
-  import { loadLocaleAsync } from './i18n/i18n-load';
   import { setLocale } from './i18n/i18n-svelte';
+  import type { Locales } from './i18n/i18n-types';
+  import { loadTranslationsIntoMemory } from './i18n/i18n-load';
 
-  /**
-   * Later the translations file will be loaded
-   * in parallel to the FE's first chunk
-   */
   let isTranslationsLoaded = false;
-  (() => {
-    void loadLocaleAsync('en').then(() => {
-      setLocale('en');
+  const checkTranslationsInterval = setInterval(() => {
+    // eslint-disable-next-line prefer-destructuring
+    const translations:
+      | { lang: Locales; translationStrings: string }
+      | undefined =
+      // @ts-expect-error added by index.html
+      window.translations;
+    if (translations) {
+      loadTranslationsIntoMemory(
+        translations.lang,
+        JSON.parse(translations.translationStrings),
+      );
+      setLocale(translations.lang);
       isTranslationsLoaded = true;
-      return true;
-    });
-  })();
+      clearInterval(checkTranslationsInterval);
+    }
+  }, 100);
 
   const commonData = preloadCommonData();
   if (commonData?.user) {

mathesar_ui/src/i18n/i18n-load.ts

@@ -30,3 +30,11 @@ export async function loadLocaleAsync(locale: Locales): Promise<void> {
   updateTranslationsDictionary(locale, await importLocaleAsync(locale));
   loadFormatters(locale);
 }
+
+export function loadTranslationsIntoMemory(
+  locale: Locales,
+  translations: Translations,
+) {
+  updateTranslationsDictionary(locale, translations);
+  loadFormatters(locale);
+}