Dynamically load non-fallback languages.

src/card.ts

@@ -37,7 +37,7 @@ import {
   MEDIA_PLAYER_SUPPORT_BROWSE_MEDIA,
   REPO_URL,
 } from './const.js';
-import { getLanguage, localize } from './localize/localize.js';
+import { getLanguage, loadLanguages, localize } from './localize/localize.js';
 import cardStyle from './scss/card.scss';
 import {
   Actions,
@@ -206,7 +206,8 @@ export class FrigateCard extends LitElement {
   protected _boundMouseHandler = throttle(this._mouseHandler.bind(this), 1 * 1000);
 
   // Whether the card has been successfully initialized.
-  protected _initialized = false;
+  protected _loadedHAElements = false;
+  protected _loadedLanguages = false;
 
   protected _triggers: Map<string, Date> = new Map();
   protected _untriggerTimerID: number | null = null;
@@ -1101,11 +1102,12 @@ export class FrigateCard extends LitElement {
    * Called before each update.
    */
   protected willUpdate(changedProps: PropertyValues): void {
-    // Side load the necessary elements if not already initialized.
-    if (!this._initialized) {
+    // Side load the necessary elements if not already initialized (do not need
+    // to block for the loading to complete).
+    if (!this._loadedHAElements) {
       sideLoadHomeAssistantElements().then((success) => {
         if (success) {
-          this._initialized = true;
+          this._loadedHAElements = true;
         }
       });
     }
@@ -1244,6 +1246,15 @@ export class FrigateCard extends LitElement {
    * @returns `true` if the element should be updated.
    */
   protected shouldUpdate(changedProps: PropertyValues): boolean {
+    // Load the relevant languages. Cannot do anything until then.
+    if (!this._loadedLanguages) {
+      loadLanguages().then(() => {
+        this._loadedLanguages = true;
+        this.requestUpdate();
+      });
+      return false;
+    }
+
     const oldHass = changedProps.get('_hass') as HomeAssistant | undefined;
     let shouldUpdate = !oldHass || changedProps.size != 1;
 

src/localize/localize.ts

@@ -1,14 +1,16 @@
 import * as en from './languages/en.json';
-import * as pt_BR from './languages/pt-BR.json';
-import * as it from './languages/it.json';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const languages: Record<string, any> = {
+  // English as always loaded as it's the fallback language that will be used
+  // when translations are not found or before they are loaded (via
+  // loadLanguages()).
   en: en,
-  pt_BR: pt_BR,
-  it: it,
-};
+}
 
+/**
+ * Get the configured language.
+ */
 export function getLanguage(): string {
   const canonicalizeLanguage = (language?: string | null): string | null => {
     if (!language) {
@@ -39,14 +41,32 @@ export function getLanguage(): string {
   return lang || 'en';
 }
 
+/**
+ * Load required languages.
+ */
+export const loadLanguages = async (): Promise<void> => {
+  const lang = getLanguage();
+  if (lang === 'it') {
+    languages['it'] = await import('./languages/it.json');
+  } else if (lang === 'pt_BR') {
+    languages['pt_BR'] = await import('./languages/pt-BR.json');
+  }
+}
+
+/**
+ * Get a localized version of a given string key.
+ * @param string The key.
+ * @param search An optional search key to be used with 'replace'.
+ * @param replace An optional replacement text to be used with 'search'.
+ * @returns 
+ */
 export function localize(string: string, search = '', replace = ''): string {
   const lang = getLanguage();
-  let translated: string;
+  let translated = '';
 
   try {
     translated = string.split('.').reduce((o, i) => o[i], languages[lang]);
-  } catch (e) {
-    translated = string.split('.').reduce((o, i) => o[i], languages['en']);
+  } catch (_) {
   }
 
   if (!translated) {