ensure the default language has been loaded before listening on user language

src/Umbraco.Web.UI.Client/src/apps/app/app.element.ts

@@ -82,13 +82,20 @@ export class UmbAppElement extends UmbLitElement {
 	}
 
 	#listenForLanguageChange(authContext: UmbAuthContext) {
-		this.observe(
-			authContext.languageIsoCode,
-			(currentLanguageIsoCode) => {
-				umbTranslationRegistry.loadLanguage(currentLanguageIsoCode);
-			},
-			'languageIsoCode'
-		);
+		// This will wait for the default language to be loaded before attempting to load the current user language
+		// just in case the user language is not the default language.
+		// We **need** to do this because the default language (typically en-us) holds all the fallback keys for all the other languages.
+		// This way we can ensure that the document language is always loaded first and subsequently registered as the fallback language.
+		umbTranslationRegistry.isDefaultLoaded.subscribe((isDefaultLoaded) => {
+			if (!isDefaultLoaded) return;
+			this.observe(
+				authContext.languageIsoCode,
+				(currentLanguageIsoCode) => {
+					umbTranslationRegistry.loadLanguage(currentLanguageIsoCode);
+				},
+				'languageIsoCode'
+			);
+		});
 	}
 
 	async #setup() {

src/Umbraco.Web.UI.Client/src/packages/core/localization/registry/translation.registry.ts

@@ -7,7 +7,7 @@ import {
 } from '@umbraco-cms/backoffice/localization-api';
 import { hasDefaultExport, loadExtension } from '@umbraco-cms/backoffice/extension-api';
 import { UmbBackofficeExtensionRegistry, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
-import { Subject, combineLatest, map, distinctUntilChanged, filter } from '@umbraco-cms/backoffice/external/rxjs';
+import { BehaviorSubject, Subject, combineLatest, map, distinctUntilChanged, filter, startWith } from '@umbraco-cms/backoffice/external/rxjs';
 
 export class UmbTranslationRegistry {
 	/**
@@ -17,6 +17,10 @@ export class UmbTranslationRegistry {
 		return translations;
 	}
 
+	get isDefaultLoaded() {
+		return this.#isDefaultLoaded.asObservable();
+	}
+
 	#currentLanguage = new Subject<string>();
 
 	constructor(extensionRegistry: UmbBackofficeExtensionRegistry) {
@@ -83,6 +87,11 @@ export class UmbTranslationRegistry {
 					document.documentElement.dir = newDir;
 				}
 			}
+
+			if (!this.#isDefaultLoaded.value) {
+				this.#isDefaultLoaded.next(true);
+				this.#isDefaultLoaded.complete();
+			}
 		});
 	}