From 4b0d4a369d4b68dc61bcc83713b018c21b42bd9d Mon Sep 17 00:00:00 2001
From: Duncan Uszkay <Duncan.Uszkay@D2L.com>
Date: Tue, 7 Apr 2026 16:09:54 -0400
Subject: [PATCH 01/14] Replace loading with dataState

---
 components/backdrop/backdrop-loading.js | 23 +++++++++++------------
 components/table/demo/table-test.js     | 20 ++++++++++++--------
 components/table/table-wrapper.js       | 12 ++++++------
 3 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/components/backdrop/backdrop-loading.js b/components/backdrop/backdrop-loading.js
index 529463cd038..10503a55573 100644
--- a/components/backdrop/backdrop-loading.js
+++ b/components/backdrop/backdrop-loading.js
@@ -21,10 +21,13 @@ class LoadingBackdrop extends LitElement {
 	static get properties() {
 		return {
 			/**
-			 * Used to control whether the loading backdrop is shown
-			 * @type {boolean}
+			 * The state of data in the element being overlaid. Set to 'clean' when the data represents the user's latest selections, 'dirty' when the data does not represent the user's latest selections, and 'loading' if the data is being actively refreshed
+			 * @type {'clean'|'dirty'|'loading'}
 			 */
-			shown: { type: Boolean },
+			dataState: {
+				reflect: true,
+				type: String
+			},
 			/**
 			 * Used to identify content that the backdrop should make inert
 			 * @type {boolean}
@@ -87,7 +90,7 @@ class LoadingBackdrop extends LitElement {
 
 	constructor() {
 		super();
-		this.shown = false;
+		this.dataState = 'clean';
 		this._state = 'hidden';
 		this._spinnerTop = LOADING_SPINNER_MINIMUM_BUFFER;
 	}
@@ -108,17 +111,13 @@ class LoadingBackdrop extends LitElement {
 			}
 		}
 
-		if (changedProperties.has('shown') && (
-			(reduceMotion && this._state === 'shown') || (!reduceMotion && this._state === 'showing')
-		)) {
-			this.#centerLoadingSpinner();
-		}
 	}
 	willUpdate(changedProperties) {
-		if (changedProperties.has('shown')) {
-			if (this.shown) {
+		if (changedProperties.has('dataState') && changedProperties.get('dataState') !== undefined) {
+			if (changedProperties.get('dataState') === 'clean' && this.dataState !== 'clean') {
 				this.#show();
-			} else if (changedProperties.get('shown') !== undefined) {
+
+			} else if (changedProperties.get('dataState') !== 'clean' && this.dataState === 'clean') {
 				this.#fade();
 			}
 		}
diff --git a/components/table/demo/table-test.js b/components/table/demo/table-test.js
index 7014884e4d3..614a3ef4447 100644
--- a/components/table/demo/table-test.js
+++ b/components/table/demo/table-test.js
@@ -14,6 +14,8 @@ import '../../selection/selection-action.js';
 import '../../selection/selection-action-dropdown.js';
 import '../../selection/selection-action-menu-item.js';
 import '../../selection/selection-input.js';
+import '../../inputs/input-radio.js';
+import '../../inputs/input-radio-group.js';
 
 import { css, html, nothing } from 'lit';
 import { tableStyles, TableWrapper } from '../table-wrapper.js';
@@ -81,6 +83,7 @@ class TestTable extends DemoPassthroughMixin(TableWrapper, 'd2l-table-wrapper')
 		this._data = data();
 		this._sortField = undefined;
 		this._sortDesc = false;
+		this.dataState = 'clean';
 	}
 
 	render() {
@@ -97,11 +100,11 @@ class TestTable extends DemoPassthroughMixin(TableWrapper, 'd2l-table-wrapper')
 						icon="tier1:${this.stickyHeaders ? 'check' : 'close-default'}"
 						@d2l-selection-action-click="${this._toggleStickyHeaders}"
 					></d2l-selection-action>
-					<d2l-selection-action
-						text="Loading"
-						icon="tier1:${this.loading ? 'check' : 'close-default'}"
-						@d2l-selection-action-click="${this._toggleLoading}"
-					></d2l-selection-action>
+					<d2l-input-radio-group label="dataState" name="Data State" @change=${this._handleDataStateChange}>
+						<d2l-input-radio label="Clean" value="clean" ?checked=${this.dataState === 'clean'}></d2l-input-radio>
+						<d2l-input-radio label="Dirty" value="dirty" ?checked=${this.dataState === 'dirty'}></d2l-input-radio>
+						<d2l-input-radio label="Loading" value="loading" ?checked=${this.dataState === 'loading'}></d2l-input-radio>
+					</d2l-input-radio-group>
 				</d2l-table-controls>
 
 				<table class="d2l-table">
@@ -167,6 +170,10 @@ class TestTable extends DemoPassthroughMixin(TableWrapper, 'd2l-table-wrapper')
 		`;
 	}
 
+	_handleDataStateChange(e) {
+		this.dataState = e.detail.value;
+	}
+
 	async _handlePagerLoadMore(e) {
 		const pageSize = e.target.pageSize;
 		await new Promise(resolve => setTimeout(resolve, 1000));
@@ -256,9 +263,6 @@ class TestTable extends DemoPassthroughMixin(TableWrapper, 'd2l-table-wrapper')
 		this.requestUpdate();
 	}
 
-	_toggleLoading() {
-		this.loading = !this.loading;
-	}
 	_toggleStickyControls() {
 		this.stickyControls = !this.stickyControls;
 	}
diff --git a/components/table/table-wrapper.js b/components/table/table-wrapper.js
index e227b989f36..7f80efa7266 100644
--- a/components/table/table-wrapper.js
+++ b/components/table/table-wrapper.js
@@ -311,12 +311,12 @@ export class TableWrapper extends PageableMixin(SelectionMixin(LitElement)) {
 				type: Boolean,
 			},
 			/**
-			 * Whether or not to display a loading backdrop. Set this property when the content in the table is being refreshed.
-			 * @type {boolean}
+			 * The state of data in the table. Set to 'clean' when the data represents the user's latest selections, 'dirty' when the data does not represent the user's latest selections, and 'loading' if the data is being actively refreshed
+			 * @type {'clean'|'dirty'|'loading'}
 			 */
-			loading: {
+			dataState: {
 				reflect: true,
-				type: Boolean
+				type: String
 			},
 		};
 	}
@@ -388,7 +388,7 @@ export class TableWrapper extends PageableMixin(SelectionMixin(LitElement)) {
 		this._tableIntersectionObserver = null;
 		this._tableMutationObserver = null;
 		this._tableScrollers = {};
-		this.loading = false;
+		this.dataState = 'clean';
 
 		this._excludeStickyColumnsFromScrollCalculations = getFlag('GAUD-9530-exclude-sticky-columns-from-scroll-calculations', false);
 	}
@@ -422,7 +422,7 @@ export class TableWrapper extends PageableMixin(SelectionMixin(LitElement)) {
 		const slot = html`
 			<div style="position:relative">
 				<slot id="table-slot" @slotchange="${this._handleSlotChange}"></slot>
-				<d2l-backdrop-loading for="table-slot" ?shown=${this.loading}></d2l-backdrop-loading>
+				<d2l-backdrop-loading for="table-slot" dataState=${this.dataState}></d2l-backdrop-loading>
 			</div>
 		`;
 		const useScrollWrapper = this.stickyHeadersScrollWrapper || !this.stickyHeaders;

From b428c260659307b3bd1abb7512c0080be7c3b268 Mon Sep 17 00:00:00 2001
From: Duncan Uszkay <Duncan.Uszkay@D2L.com>
Date: Tue, 7 Apr 2026 16:12:50 -0400
Subject: [PATCH 02/14] Add loading state between shown and hidden

---
 components/backdrop/backdrop-loading.js | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/components/backdrop/backdrop-loading.js b/components/backdrop/backdrop-loading.js
index 10503a55573..ccc0cf9c6f0 100644
--- a/components/backdrop/backdrop-loading.js
+++ b/components/backdrop/backdrop-loading.js
@@ -51,6 +51,7 @@ class LoadingBackdrop extends LitElement {
 			}
 			:host([_state="showing"]),
 			:host([_state="shown"]),
+			:host([_state="loading"]),
 			:host([_state="hiding"]) {
 				display: flex;
 			}
@@ -64,16 +65,16 @@ class LoadingBackdrop extends LitElement {
 				transition: opacity ${FADE_DURATION_MS}ms ease-in;
 				width: 100%;
 			}
-			:host([_state="shown"]) .backdrop {
+			:host([_state="shown"]) .backdrop, :host([_state="loading"]) .backdrop {
 				opacity: 0.7;
 			}
 
 			d2l-loading-spinner {
 				opacity: 0;
 				position: absolute;
-				transition: opacity ${FADE_DURATION_MS}ms ease-in ${SPINNER_DELAY_MS}ms;
+				transition: opacity ${FADE_DURATION_MS}ms ease-in;
 			}
-			:host([_state="shown"]) d2l-loading-spinner {
+			:host([_state="loading"]) d2l-loading-spinner {
 				opacity: 1;
 			}
 
@@ -120,6 +121,10 @@ class LoadingBackdrop extends LitElement {
 			} else if (changedProperties.get('dataState') !== 'clean' && this.dataState === 'clean') {
 				this.#fade();
 			}
+
+			if (this.dataState === 'loading') {
+				this.#showLoadingSpinner();
+			}
 		}
 	}
 
@@ -149,7 +154,7 @@ class LoadingBackdrop extends LitElement {
 
 	#fade() {
 		let hideImmediately = reduceMotion || this._state === 'showing';
-		if (this._state === 'shown') {
+		if (this._state === 'shown' || this._state === 'loading') {
 			const currentOpacity = getComputedStyle(this.shadowRoot.querySelector('.backdrop')).opacity;
 			hideImmediately ||= (currentOpacity === '0');
 		}
@@ -194,6 +199,9 @@ class LoadingBackdrop extends LitElement {
 
 		containingBlock.setAttribute('inert', 'inert');
 	}
+	#showLoadingSpinner() {
+		this._state = 'loading';
+	}
 
 }
 

From 947a2f423c58d79387fb498efec99f7e594de378 Mon Sep 17 00:00:00 2001
From: Duncan Uszkay <Duncan.Uszkay@D2L.com>
Date: Tue, 7 Apr 2026 16:21:34 -0400
Subject: [PATCH 03/14] Add dirty state dialog

---
 components/backdrop/backdrop-loading.js | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/components/backdrop/backdrop-loading.js b/components/backdrop/backdrop-loading.js
index ccc0cf9c6f0..3b5bc1e8ee7 100644
--- a/components/backdrop/backdrop-loading.js
+++ b/components/backdrop/backdrop-loading.js
@@ -1,5 +1,7 @@
 import '../colors/colors.js';
 import '../loading-spinner/loading-spinner.js';
+import '../empty-state/empty-state-action-button.js';
+import '../empty-state/empty-state-simple.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { getComposedChildren, getComposedParent } from '../../helpers/dom.js';
 import { styleMap } from 'lit/directives/style-map.js';
@@ -79,10 +81,27 @@ class LoadingBackdrop extends LitElement {
 			}
 
 			:host([_state="hiding"]) .d2l-backdrop,
+			:host([_state="hiding"]) d2l-empty-state-simple,
+			:host([_state="loading"]) d2l-empty-state-simple,
 			:host([_state="hiding"]) d2l-loading-spinner {
 				transition: opacity ${FADE_DURATION_MS}ms ease-out;
 			}
 
+			d2l-empty-state-simple {
+				background-color: var(--d2l-table-controls-background-color, white);
+				top: 0;
+				opacity: 0;
+				height: fit-content;
+				justify-content: center;
+				position: relative;
+				z-index: 1000;
+				transition: opacity ${FADE_DURATION_MS}ms ease-in;
+			}
+
+			:host([_state="shown"]) d2l-empty-state-simple {
+				opacity: 1;
+			}
+
 			@media (prefers-reduced-motion: reduce) {
 				* { transition: none; }
 			}
@@ -101,6 +120,9 @@ class LoadingBackdrop extends LitElement {
 		return html`
 			<div class="backdrop" @transitionend="${this.#handleTransitionEnd}" @transitioncancel="${this.#hide}"></div>
 			<d2l-loading-spinner style=${styleMap({ top: `${this._spinnerTop}px` })} size="${LOADING_SPINNER_SIZE}"></d2l-loading-spinner>
+			<d2l-empty-state-simple style=${styleMap({ top: `${this._dirtyDialogTop}px` })} description="${this.localize('components.backdrop-loading.dirtyDialogDescription')}">
+				<d2l-empty-state-action-button @d2l-empty-state-action=${this.#handleApplyButton} text="${this.localize('components.backdrop-loading.dirtyDialogAction')}"></d2l-empty-state-action-button>
+			</div>
 		`;
 	}
 	updated(changedProperties) {
@@ -178,6 +200,9 @@ class LoadingBackdrop extends LitElement {
 
 		return targetedChildren.length === 0 ? parent : targetedChildren[0];
 	}
+	#handleApplyButton() {
+		this.dispatchEvent(new CustomEvent('d2l-apply-button-click', { bubbles: true, composed: true }));
+	}
 	#handleTransitionEnd() {
 		if (this._state === 'hiding') {
 			this.#hide();

From e0f9b17978c8d2d88cf0396f1566961d311e285d Mon Sep 17 00:00:00 2001
From: Duncan Uszkay <Duncan.Uszkay@D2L.com>
Date: Tue, 7 Apr 2026 16:22:36 -0400
Subject: [PATCH 04/14] Center and adjust timings

---
 components/backdrop/backdrop-loading.js | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/components/backdrop/backdrop-loading.js b/components/backdrop/backdrop-loading.js
index 3b5bc1e8ee7..a8a90165a11 100644
--- a/components/backdrop/backdrop-loading.js
+++ b/components/backdrop/backdrop-loading.js
@@ -6,9 +6,7 @@ import { css, html, LitElement, nothing } from 'lit';
 import { getComposedChildren, getComposedParent } from '../../helpers/dom.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-const BACKDROP_DELAY_MS = 800;
 const FADE_DURATION_MS = 500;
-const SPINNER_DELAY_MS = FADE_DURATION_MS;
 
 const LOADING_SPINNER_MINIMUM_BUFFER = 100;
 const LOADING_SPINNER_SIZE = 50;
@@ -113,12 +111,13 @@ class LoadingBackdrop extends LitElement {
 		this.dataState = 'clean';
 		this._state = 'hidden';
 		this._spinnerTop = LOADING_SPINNER_MINIMUM_BUFFER;
+		this._dirtyDialogTop = LOADING_SPINNER_MINIMUM_BUFFER;
 	}
 
 	render() {
 		if (this._state === 'hidden') return nothing;
 		return html`
-			<div class="backdrop" @transitionend="${this.#handleTransitionEnd}" @transitioncancel="${this.#hide}"></div>
+			<div class="backdrop" @transitionend="${this.#handleTransitionEnd}" @transitioncancel="${this.#handleTransitionEnd}"></div>
 			<d2l-loading-spinner style=${styleMap({ top: `${this._spinnerTop}px` })} size="${LOADING_SPINNER_SIZE}"></d2l-loading-spinner>
 			<d2l-empty-state-simple style=${styleMap({ top: `${this._dirtyDialogTop}px` })} description="${this.localize('components.backdrop-loading.dirtyDialogDescription')}">
 				<d2l-empty-state-action-button @d2l-empty-state-action=${this.#handleApplyButton} text="${this.localize('components.backdrop-loading.dirtyDialogAction')}"></d2l-empty-state-action-button>
@@ -126,11 +125,15 @@ class LoadingBackdrop extends LitElement {
 		`;
 	}
 	updated(changedProperties) {
+		if (changedProperties.has('dataState') && (
+			(reduceMotion && this._state === 'shown') || (!reduceMotion && this._state === 'showing') || (!reduceMotion && this._state === 'loading')
+		)) {
+			this.#centerLoadingSpinner();
+		}
+
 		if (changedProperties.has('_state')) {
 			if (this._state === 'showing') {
-				setTimeout(() => {
-					if (this._state === 'showing') this._state = 'shown';
-				}, BACKDROP_DELAY_MS);
+				this._state = 'shown';
 			}
 		}
 
@@ -170,8 +173,11 @@ class LoadingBackdrop extends LitElement {
 		// Adjust for the size of the spinner
 		const spinnerSizeOffset = LOADING_SPINNER_SIZE / 2;
 
-		const newPosition = centeringOffset + topOffset - spinnerSizeOffset;
-		this._spinnerTop = Math.max(LOADING_SPINNER_MINIMUM_BUFFER, newPosition);
+		// Adjust for the size of the dirty dialog
+		const dirtyDialogSizeOffset = this.shadowRoot.querySelector('d2l-empty-state-simple').getBoundingClientRect().height / 2;
+
+		this._spinnerTop = Math.max(LOADING_SPINNER_MINIMUM_BUFFER, centeringOffset + topOffset - spinnerSizeOffset);
+		this._dirtyDialogTop = Math.max(LOADING_SPINNER_MINIMUM_BUFFER, centeringOffset + topOffset - dirtyDialogSizeOffset);
 	}
 
 	#fade() {

From afac333d917c414a50ae45f9850116d5e2247dfc Mon Sep 17 00:00:00 2001
From: Duncan Uszkay <Duncan.Uszkay@D2L.com>
Date: Tue, 7 Apr 2026 16:24:17 -0400
Subject: [PATCH 05/14] Add translations

---
 components/backdrop/backdrop-loading.js | 3 ++-
 lang/ar.js                              | 2 ++
 lang/cy.js                              | 2 ++
 lang/da.js                              | 2 ++
 lang/de.js                              | 2 ++
 lang/en-gb.js                           | 2 ++
 lang/en.js                              | 2 ++
 lang/es-es.js                           | 2 ++
 lang/es.js                              | 2 ++
 lang/fr-fr.js                           | 2 ++
 lang/fr.js                              | 2 ++
 lang/haw.js                             | 2 ++
 lang/hi.js                              | 2 ++
 lang/ja.js                              | 2 ++
 lang/ko.js                              | 2 ++
 lang/mi.js                              | 2 ++
 lang/nl.js                              | 2 ++
 lang/pt.js                              | 2 ++
 lang/sv.js                              | 2 ++
 lang/th.js                              | 2 ++
 lang/tr.js                              | 2 ++
 lang/vi.js                              | 2 ++
 lang/zh-cn.js                           | 2 ++
 lang/zh-tw.js                           | 2 ++
 24 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/components/backdrop/backdrop-loading.js b/components/backdrop/backdrop-loading.js
index a8a90165a11..ae748093583 100644
--- a/components/backdrop/backdrop-loading.js
+++ b/components/backdrop/backdrop-loading.js
@@ -4,6 +4,7 @@ import '../empty-state/empty-state-action-button.js';
 import '../empty-state/empty-state-simple.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { getComposedChildren, getComposedParent } from '../../helpers/dom.js';
+import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 const FADE_DURATION_MS = 500;
@@ -16,7 +17,7 @@ const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
 /**
  * A component for displaying a semi-transparent backdrop and a loading spinner over the containing element
  */
-class LoadingBackdrop extends LitElement {
+class LoadingBackdrop extends LocalizeCoreElement(LitElement) {
 
 	static get properties() {
 		return {
diff --git a/lang/ar.js b/lang/ar.js
index ffaed766f93..e7cad123baf 100644
--- a/lang/ar.js
+++ b/lang/ar.js
@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "إغلاق التنبيه",
+	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
+	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.breadcrumbs.breadcrumb": "شريط التنقل",
 	"components.button-add.addItem": "إضافة عنصر",
 	"components.button-copy.copied": "تم النسخ!",
diff --git a/lang/cy.js b/lang/cy.js
index 8d8b352dba9..5ab8b6bd6c6 100644
--- a/lang/cy.js
+++ b/lang/cy.js
@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "Cau Hysbysiad",
+	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
+	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.breadcrumbs.breadcrumb": "Briwsionyn Bara",
 	"components.button-add.addItem": "Ychwanegu Eitem",
 	"components.button-copy.copied": "Wedi’i gopïo!",
diff --git a/lang/da.js b/lang/da.js
index 42250ed0b3b..869cda127ab 100644
--- a/lang/da.js
+++ b/lang/da.js
@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "Luk besked",
+	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
+	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.breadcrumbs.breadcrumb": "Brødkrumme",
 	"components.button-add.addItem": "Tilføj element",
 	"components.button-copy.copied": "Kopieret!",
diff --git a/lang/de.js b/lang/de.js
index db621dc22c4..867ff9a2308 100644
--- a/lang/de.js
+++ b/lang/de.js
@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "Benachrichtigung schließen",
+	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
+	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.breadcrumbs.breadcrumb": "Brotkrümelnavigation",
 	"components.button-add.addItem": "Element hinzufügen",
 	"components.button-copy.copied": "Kopiert.",
diff --git a/lang/en-gb.js b/lang/en-gb.js
index be463d06843..9bf9e21a389 100644
--- a/lang/en-gb.js
+++ b/lang/en-gb.js
@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "Close Alert",
+	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
+	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.breadcrumbs.breadcrumb": "Breadcrumb",
 	"components.button-add.addItem": "Add Item",
 	"components.button-copy.copied": "Copied!",
diff --git a/lang/en.js b/lang/en.js
index 44c51d3fe35..f5557d6f676 100644
--- a/lang/en.js
+++ b/lang/en.js
@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "Close Alert",
+	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
+	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.breadcrumbs.breadcrumb": "Breadcrumb",
 	"components.button-add.addItem": "Add Item",
 	"components.button-copy.copied": "Copied!",
diff --git a/lang/es-es.js b/lang/es-es.js
index f6575bdc7bf..499f82e3629 100644
--- a/lang/es-es.js
+++ b/lang/es-es.js
@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "Cerrar alerta",
+	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
+	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.breadcrumbs.breadcrumb": "Ruta de navegación",
 	"components.button-add.addItem": "Agregar elemento",
 	"components.button-copy.copied": "¡Copiado!",
diff --git a/lang/es.js b/lang/es.js
index 607eb93ba04..6d965e5612a 100644
--- a/lang/es.js
+++ b/lang/es.js
@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "Cerrar alerta",
+	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
+	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.breadcrumbs.breadcrumb": "Ruta de navegación",
 	"components.button-add.addItem": "Agregar elemento",
 	"components.button-copy.copied": "Copiado.",
diff --git a/lang/fr-fr.js b/lang/fr-fr.js
index edc05276f9b..b9be7b3e75d 100644
--- a/lang/fr-fr.js
+++ b/lang/fr-fr.js
@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "Fermer l’alerte",
+	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
+	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.breadcrumbs.breadcrumb": "Chemin de navigation",
 	"components.button-add.addItem": "Ajouter un élément",
 	"components.button-copy.copied": "Copie effectuée !",
diff --git a/lang/fr.js b/lang/fr.js
index 242b2ed961e..1e95d4e3291 100644
--- a/lang/fr.js
+++ b/lang/fr.js
@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "Fermer l’alerte",
+	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
+	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.breadcrumbs.breadcrumb": "Chemin de navigation",
 	"components.button-add.addItem": "Ajouter un élément",
 	"components.button-copy.copied": "Copié!",
diff --git a/lang/haw.js b/lang/haw.js
index 0fd75f4264f..863a860b74c 100644
--- a/lang/haw.js
+++ b/lang/haw.js
@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "Pani i ka makaʻala",
+	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
+	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.breadcrumbs.breadcrumb": "Palapalapala",
 	"components.button-add.addItem": "Pākuʻi Mea",
 	"components.button-copy.copied": "Kope ʻia!",
diff --git a/lang/hi.js b/lang/hi.js
index 5864bd4e1ce..12cd368bd4e 100644
--- a/lang/hi.js
+++ b/lang/hi.js
@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "अलर्ट बंद करें",
+	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
+	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.breadcrumbs.breadcrumb": "ब्रेडक्रंब",
 	"components.button-add.addItem": "आइटम जोड़ें",
 	"components.button-copy.copied": "कॉपी किया गया!",
diff --git a/lang/ja.js b/lang/ja.js
index 5d5d790b81f..bc6e13c3fef 100644
--- a/lang/ja.js
+++ b/lang/ja.js
@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "アラートを閉じる",
+	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
+	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.breadcrumbs.breadcrumb": "階層",
 	"components.button-add.addItem": "項目の追加",
 	"components.button-copy.copied": "コピーできました。",
diff --git a/lang/ko.js b/lang/ko.js
index 9914b07a792..4c4396691a5 100644
--- a/lang/ko.js
+++ b/lang/ko.js
@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "경보 닫기",
+	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
+	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.breadcrumbs.breadcrumb": "이동 경로",
 	"components.button-add.addItem": "항목 추가",
 	"components.button-copy.copied": "복사 완료!",
diff --git a/lang/mi.js b/lang/mi.js
index 9e89365803b..2b2ca5d3ceb 100644
--- a/lang/mi.js
+++ b/lang/mi.js
@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "Kati Matohi",
+	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
+	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.breadcrumbs.breadcrumb": "Pānui",
 	"components.button-add.addItem": "Tāpiri Tūemi",
 	"components.button-copy.copied": "Kua tāruatia!",
diff --git a/lang/nl.js b/lang/nl.js
index 805369c33c5..faa5b9f75ad 100644
--- a/lang/nl.js
+++ b/lang/nl.js
@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "Waarschuwing sluiten",
+	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
+	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.breadcrumbs.breadcrumb": "Kruimelpad",
 	"components.button-add.addItem": "Item toevoegen",
 	"components.button-copy.copied": "Gekopieerd!",
diff --git a/lang/pt.js b/lang/pt.js
index f92853448f6..da493e0e903 100644
--- a/lang/pt.js
+++ b/lang/pt.js
@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "Fechar alerta",
+	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
+	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.breadcrumbs.breadcrumb": "Auxiliar de navegação",
 	"components.button-add.addItem": "Adicionar item",
 	"components.button-copy.copied": "Copiado!",
diff --git a/lang/sv.js b/lang/sv.js
index 7068b0ee8a0..843aa985dba 100644
--- a/lang/sv.js
+++ b/lang/sv.js
@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "Stängningsvarning",
+	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
+	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.breadcrumbs.breadcrumb": "Sökväg",
 	"components.button-add.addItem": "Lägg till objekt",
 	"components.button-copy.copied": "Kopierat!",
diff --git a/lang/th.js b/lang/th.js
index e917217bccd..5dd0f0d2294 100644
--- a/lang/th.js
+++ b/lang/th.js
@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "ปิดการแจ้งเตือน",
+	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
+	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.breadcrumbs.breadcrumb": "แถบนำทาง",
 	"components.button-add.addItem": "เพิ่มรายการ",
 	"components.button-copy.copied": "คัดลอกแล้ว!",
diff --git a/lang/tr.js b/lang/tr.js
index 19efc483626..fc421ba7667 100644
--- a/lang/tr.js
+++ b/lang/tr.js
@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "Kapatma Uyarısı",
+	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
+	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.breadcrumbs.breadcrumb": "İçerik Haritası",
 	"components.button-add.addItem": "Öğe Ekle",
 	"components.button-copy.copied": "Kopyalandı!",
diff --git a/lang/vi.js b/lang/vi.js
index 21629e708fa..3a139582d75 100644
--- a/lang/vi.js
+++ b/lang/vi.js
@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "Đóng Cảnh Báo",
+	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
+	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.breadcrumbs.breadcrumb": "Đường dẫn",
 	"components.button-add.addItem": "Thêm mục",
 	"components.button-copy.copied": "Đã sao chép!",
diff --git a/lang/zh-cn.js b/lang/zh-cn.js
index 4b9bea5beb9..2c5cbb53e31 100644
--- a/lang/zh-cn.js
+++ b/lang/zh-cn.js
@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "关闭提醒",
+	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
+	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.breadcrumbs.breadcrumb": "痕迹导航",
 	"components.button-add.addItem": "添加项目",
 	"components.button-copy.copied": "已复制！",
diff --git a/lang/zh-tw.js b/lang/zh-tw.js
index a48941b1424..8e6a5acb042 100644
--- a/lang/zh-tw.js
+++ b/lang/zh-tw.js
@@ -1,5 +1,7 @@
 export default {
 	"components.alert.close": "關閉警示",
+	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
+	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.breadcrumbs.breadcrumb": "導覽路徑",
 	"components.button-add.addItem": "新增項目",
 	"components.button-copy.copied": "複製成功！",

From 1703061caab0e49fef6238d109f675a9a140a73d Mon Sep 17 00:00:00 2001
From: Duncan Uszkay <Duncan.Uszkay@D2L.com>
Date: Tue, 7 Apr 2026 16:28:10 -0400
Subject: [PATCH 06/14] Support transitioning between loading and shown

---
 components/backdrop/backdrop-loading.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/backdrop/backdrop-loading.js b/components/backdrop/backdrop-loading.js
index ae748093583..b392a5b39f0 100644
--- a/components/backdrop/backdrop-loading.js
+++ b/components/backdrop/backdrop-loading.js
@@ -146,6 +146,8 @@ class LoadingBackdrop extends LocalizeCoreElement(LitElement) {
 
 			} else if (changedProperties.get('dataState') !== 'clean' && this.dataState === 'clean') {
 				this.#fade();
+			} else if (changedProperties.get('dataState') === 'loading' && this.dataState === 'dirty') {
+				this._state = 'shown';
 			}
 
 			if (this.dataState === 'loading') {

From b2903cfa49b9d624363885a3ed0c1c022f76dc4d Mon Sep 17 00:00:00 2001
From: Duncan Uszkay <Duncan.Uszkay@D2L.com>
Date: Wed, 8 Apr 2026 10:57:13 -0400
Subject: [PATCH 07/14] Update backdrop vdiffs

---
 components/backdrop/test/backdrop-loading.vdiff.js | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/components/backdrop/test/backdrop-loading.vdiff.js b/components/backdrop/test/backdrop-loading.vdiff.js
index 597cdc1ec92..6e7075493ec 100644
--- a/components/backdrop/test/backdrop-loading.vdiff.js
+++ b/components/backdrop/test/backdrop-loading.vdiff.js
@@ -11,14 +11,20 @@ const template = html`
 `;
 
 describe('backdrop-loading', () => {
-	it('not shown', async() => {
+	it('clean', async() => {
 		const elem = await fixture(template);
 		await expect(elem).to.be.golden();
 	});
 
-	it('shown', async() => {
+	it('dirty', async() => {
 		const elem = await fixture(template);
-		elem.querySelector('d2l-backdrop-loading').shown = true;
+		elem.querySelector('d2l-backdrop-loading').dataState = 'dirty';
+		await expect(elem).to.be.golden();
+	});
+
+	it('loading', async() => {
+		const elem = await fixture(template);
+		elem.querySelector('d2l-backdrop-loading').dataState = 'loading';
 		await expect(elem).to.be.golden();
 	});
 });

From 76f14188f35a689820ea264a975b409b8d0471bc Mon Sep 17 00:00:00 2001
From: Duncan Uszkay <Duncan.Uszkay@D2L.com>
Date: Wed, 8 Apr 2026 11:33:34 -0400
Subject: [PATCH 08/14] Fix a bug relating to re-centering on clicking apply

---
 components/backdrop/backdrop-loading.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/components/backdrop/backdrop-loading.js b/components/backdrop/backdrop-loading.js
index b392a5b39f0..270855b2179 100644
--- a/components/backdrop/backdrop-loading.js
+++ b/components/backdrop/backdrop-loading.js
@@ -126,9 +126,14 @@ class LoadingBackdrop extends LocalizeCoreElement(LitElement) {
 		`;
 	}
 	updated(changedProperties) {
-		if (changedProperties.has('dataState') && (
-			(reduceMotion && this._state === 'shown') || (!reduceMotion && this._state === 'showing') || (!reduceMotion && this._state === 'loading')
-		)) {
+		if (changedProperties.has('dataState') &&
+			changedProperties.get('dataState') === 'clean' &&
+			(
+				(reduceMotion && this._state === 'shown') ||
+					(!reduceMotion && this._state === 'showing') ||
+					(!reduceMotion && this._state === 'loading')
+			)
+		) {
 			this.#centerLoadingSpinner();
 		}
 

From 1d1bf116d0c19652cd02a9ba596753b5e3996cc6 Mon Sep 17 00:00:00 2001
From: Duncan Uszkay <Duncan.Uszkay@D2L.com>
Date: Wed, 8 Apr 2026 11:34:07 -0400
Subject: [PATCH 09/14] Adjust centering parameters

---
 components/backdrop/backdrop-loading.js | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/components/backdrop/backdrop-loading.js b/components/backdrop/backdrop-loading.js
index 270855b2179..1ba7c7d7a42 100644
--- a/components/backdrop/backdrop-loading.js
+++ b/components/backdrop/backdrop-loading.js
@@ -9,7 +9,6 @@ import { styleMap } from 'lit/directives/style-map.js';
 
 const FADE_DURATION_MS = 500;
 
-const LOADING_SPINNER_MINIMUM_BUFFER = 100;
 const LOADING_SPINNER_SIZE = 50;
 
 const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
@@ -111,8 +110,8 @@ class LoadingBackdrop extends LocalizeCoreElement(LitElement) {
 		super();
 		this.dataState = 'clean';
 		this._state = 'hidden';
-		this._spinnerTop = LOADING_SPINNER_MINIMUM_BUFFER;
-		this._dirtyDialogTop = LOADING_SPINNER_MINIMUM_BUFFER;
+		this._spinnerTop = 0;
+		this._dirtyDialogTop = 0;
 	}
 
 	render() {
@@ -161,7 +160,7 @@ class LoadingBackdrop extends LocalizeCoreElement(LitElement) {
 		}
 	}
 
-	#centerLoadingSpinner() {
+	async #centerLoadingSpinner() {
 		if (this._state === 'hidden') { return; }
 
 		const loadingSpinner = this.shadowRoot.querySelector('d2l-loading-spinner');
@@ -173,7 +172,7 @@ class LoadingBackdrop extends LocalizeCoreElement(LitElement) {
 		const upperVisibleBound = Math.max(0, boundingRect.top);
 		const lowerVisibleBound = Math.min(window.innerHeight, boundingRect.bottom);
 		const visibleHeight = lowerVisibleBound - upperVisibleBound;
-		const centeringOffset = visibleHeight / 2;
+		const centeringOffset = (visibleHeight / 4);
 
 		// Calculate if an offset is required to move to the top of the viewport before centering
 		const topOffset = Math.max(0, -boundingRect.top); // measures the distance below the top of the viewport, which is negative if the element starts above the viewport
@@ -182,10 +181,12 @@ class LoadingBackdrop extends LocalizeCoreElement(LitElement) {
 		const spinnerSizeOffset = LOADING_SPINNER_SIZE / 2;
 
 		// Adjust for the size of the dirty dialog
+		await this.shadowRoot.querySelector('d2l-empty-state-simple').getUpdateComplete();
+		await this.shadowRoot.querySelector('d2l-empty-state-action-button').getUpdateComplete();
 		const dirtyDialogSizeOffset = this.shadowRoot.querySelector('d2l-empty-state-simple').getBoundingClientRect().height / 2;
 
-		this._spinnerTop = Math.max(LOADING_SPINNER_MINIMUM_BUFFER, centeringOffset + topOffset - spinnerSizeOffset);
-		this._dirtyDialogTop = Math.max(LOADING_SPINNER_MINIMUM_BUFFER, centeringOffset + topOffset - dirtyDialogSizeOffset);
+		this._spinnerTop = centeringOffset + topOffset - spinnerSizeOffset;
+		this._dirtyDialogTop = centeringOffset + topOffset - dirtyDialogSizeOffset;
 	}
 
 	#fade() {

From 8b57f61f67f4a8d5f93512c5a853f341e9a96bde Mon Sep 17 00:00:00 2001
From: Duncan Uszkay <Duncan.Uszkay@D2L.com>
Date: Wed, 8 Apr 2026 12:51:31 -0400
Subject: [PATCH 10/14] Clean up the demo table radio controls

---
 components/table/demo/table-test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/table/demo/table-test.js b/components/table/demo/table-test.js
index 614a3ef4447..acd122540ba 100644
--- a/components/table/demo/table-test.js
+++ b/components/table/demo/table-test.js
@@ -100,7 +100,7 @@ class TestTable extends DemoPassthroughMixin(TableWrapper, 'd2l-table-wrapper')
 						icon="tier1:${this.stickyHeaders ? 'check' : 'close-default'}"
 						@d2l-selection-action-click="${this._toggleStickyHeaders}"
 					></d2l-selection-action>
-					<d2l-input-radio-group label="dataState" name="Data State" @change=${this._handleDataStateChange}>
+					<d2l-input-radio-group style="align-content:center" label="Date State" horizontal label-hidden name="dataState" @change=${this._handleDataStateChange}>
 						<d2l-input-radio label="Clean" value="clean" ?checked=${this.dataState === 'clean'}></d2l-input-radio>
 						<d2l-input-radio label="Dirty" value="dirty" ?checked=${this.dataState === 'dirty'}></d2l-input-radio>
 						<d2l-input-radio label="Loading" value="loading" ?checked=${this.dataState === 'loading'}></d2l-input-radio>

From 9cac4737dbbe997d32e94c7f093d05e20e35cc4d Mon Sep 17 00:00:00 2001
From: Duncan Uszkay <Duncan.Uszkay@D2L.com>
Date: Wed, 8 Apr 2026 13:00:18 -0400
Subject: [PATCH 11/14] Bugfix for reduce motion centering

---
 components/backdrop/backdrop-loading.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/backdrop/backdrop-loading.js b/components/backdrop/backdrop-loading.js
index 1ba7c7d7a42..f21ba901bc2 100644
--- a/components/backdrop/backdrop-loading.js
+++ b/components/backdrop/backdrop-loading.js
@@ -130,7 +130,7 @@ class LoadingBackdrop extends LocalizeCoreElement(LitElement) {
 			(
 				(reduceMotion && this._state === 'shown') ||
 					(!reduceMotion && this._state === 'showing') ||
-					(!reduceMotion && this._state === 'loading')
+					(this._state === 'loading')
 			)
 		) {
 			this.#centerLoadingSpinner();

From 5e9287cbc8b8cc01feb6bd3b6088bdae3abf9d04 Mon Sep 17 00:00:00 2001
From: Duncan Uszkay <Duncan.Uszkay@D2L.com>
Date: Wed, 8 Apr 2026 15:32:31 -0400
Subject: [PATCH 12/14] [WIP] Announce state changes

---
 components/backdrop/backdrop-loading.js | 86 +++++++++++++++++--------
 lang/ar.js                              |  3 +
 lang/cy.js                              |  3 +
 lang/da.js                              |  3 +
 lang/de.js                              |  3 +
 lang/en-gb.js                           |  3 +
 lang/en.js                              |  3 +
 lang/es-es.js                           |  3 +
 lang/es.js                              |  3 +
 lang/fr-fr.js                           |  3 +
 lang/fr.js                              |  3 +
 lang/haw.js                             |  3 +
 lang/hi.js                              |  3 +
 lang/ja.js                              |  3 +
 lang/ko.js                              |  3 +
 lang/mi.js                              |  3 +
 lang/nl.js                              |  3 +
 lang/pt.js                              |  3 +
 lang/sv.js                              |  3 +
 lang/th.js                              |  3 +
 lang/tr.js                              |  3 +
 lang/vi.js                              |  3 +
 lang/zh-cn.js                           |  3 +
 lang/zh-tw.js                           |  3 +
 24 files changed, 127 insertions(+), 28 deletions(-)

diff --git a/components/backdrop/backdrop-loading.js b/components/backdrop/backdrop-loading.js
index f21ba901bc2..427d4fe521d 100644
--- a/components/backdrop/backdrop-loading.js
+++ b/components/backdrop/backdrop-loading.js
@@ -2,12 +2,15 @@ import '../colors/colors.js';
 import '../loading-spinner/loading-spinner.js';
 import '../empty-state/empty-state-action-button.js';
 import '../empty-state/empty-state-simple.js';
+import '../offscreen/offscreen.js';
 import { css, html, LitElement, nothing } from 'lit';
 import { getComposedChildren, getComposedParent } from '../../helpers/dom.js';
 import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
 const FADE_DURATION_MS = 500;
+const LOADING_ANNOUNCEMENT_DELAY = 1000;
+const DIRTY_ANNOUNCEMENT_DELAY = 1000;
 
 const LOADING_SPINNER_SIZE = 50;
 
@@ -34,13 +37,14 @@ class LoadingBackdrop extends LocalizeCoreElement(LitElement) {
 			 */
 			for: { type: String },
 			_state: { type: String, reflect: true },
-			_spinnerTop: { state: true }
+			_spinnerTop: { state: true },
+			_ariaContent: { state: true }
 		};
 	}
 
 	static get styles() {
 		return css`
-			:host {
+			#visible {
 				display: none;
 				height: 100%;
 				justify-content: center;
@@ -49,10 +53,10 @@ class LoadingBackdrop extends LocalizeCoreElement(LitElement) {
 				width: 100%;
 				z-index: 999;
 			}
-			:host([_state="showing"]),
-			:host([_state="shown"]),
-			:host([_state="loading"]),
-			:host([_state="hiding"]) {
+			:host([_state="showing"]) #visible,
+			:host([_state="shown"]) #visible,
+			:host([_state="loading"]) #visible,
+			:host([_state="hiding"]) #visible {
 				display: flex;
 			}
 
@@ -112,16 +116,21 @@ class LoadingBackdrop extends LocalizeCoreElement(LitElement) {
 		this._state = 'hidden';
 		this._spinnerTop = 0;
 		this._dirtyDialogTop = 0;
+		this._ariaContent = '';
 	}
 
 	render() {
-		if (this._state === 'hidden') return nothing;
 		return html`
-			<div class="backdrop" @transitionend="${this.#handleTransitionEnd}" @transitioncancel="${this.#handleTransitionEnd}"></div>
-			<d2l-loading-spinner style=${styleMap({ top: `${this._spinnerTop}px` })} size="${LOADING_SPINNER_SIZE}"></d2l-loading-spinner>
-			<d2l-empty-state-simple style=${styleMap({ top: `${this._dirtyDialogTop}px` })} description="${this.localize('components.backdrop-loading.dirtyDialogDescription')}">
-				<d2l-empty-state-action-button @d2l-empty-state-action=${this.#handleApplyButton} text="${this.localize('components.backdrop-loading.dirtyDialogAction')}"></d2l-empty-state-action-button>
-			</div>
+			${this._state === 'hidden' ? nothing :
+					html`<div id="visible">
+						<div class="backdrop" @transitionend="${this.#handleTransitionEnd}" @transitioncancel="${this.#handleTransitionEnd}"></div>
+						<d2l-loading-spinner style=${styleMap({ top: `${this._spinnerTop}px` })} size="${LOADING_SPINNER_SIZE}"></d2l-loading-spinner>
+						<d2l-empty-state-simple style=${styleMap({ top: `${this._dirtyDialogTop}px` })} description="${this.localize('components.backdrop-loading.dirtyDialogDescription')}">
+							<d2l-empty-state-action-button @d2l-empty-state-action=${this.#handleApplyButton} text="${this.localize('components.backdrop-loading.dirtyDialogAction')}"></d2l-empty-state-action-button>
+						</d2l-empty-state-simple>
+					</div>`
+			}
+			<d2l-offscreen aria-live="polite">${this._ariaContent}</d2l-offscreen>
 		`;
 	}
 	updated(changedProperties) {
@@ -141,22 +150,34 @@ class LoadingBackdrop extends LocalizeCoreElement(LitElement) {
 				this._state = 'shown';
 			}
 		}
-
 	}
 	willUpdate(changedProperties) {
 		if (changedProperties.has('dataState') && changedProperties.get('dataState') !== undefined) {
-			if (changedProperties.get('dataState') === 'clean' && this.dataState !== 'clean') {
-				this.#show();
+			this.#clearLiveArea();
+
+			const oldState = changedProperties.get('dataState');
+			const newState = this.dataState;
+
+			// Calculate announcements
+			if (newState === 'loading') {
+				this.#setLiveArea(this.localize('components.backdrop-loading.loadingAnnouncement'), { delay: LOADING_ANNOUNCEMENT_DELAY });
+			} else if (newState === 'dirty') {
+				this.#setLiveArea(this.localize('components.backdrop-loading.dirtyAnnouncement'), { delay: DIRTY_ANNOUNCEMENT_DELAY });
+			} else if (oldState === 'loading' && newState === 'clean') {
+				this.#setLiveArea(this.localize('components.backdrop-loading.loadingCompleteAnnouncement'));
+			}
 
-			} else if (changedProperties.get('dataState') !== 'clean' && this.dataState === 'clean') {
+			// Update backdrop
+			if (oldState === 'clean') {
+				this.#show();
+			} else if (newState === 'clean') {
 				this.#fade();
-			} else if (changedProperties.get('dataState') === 'loading' && this.dataState === 'dirty') {
+			} else if (oldState === 'loading' && newState === 'dirty') {
 				this._state = 'shown';
 			}
 
-			if (this.dataState === 'loading') {
-				this.#showLoadingSpinner();
-			}
+			// Update loading spinner
+			if (newState === 'loading') this._state = 'loading';
 		}
 	}
 
@@ -166,7 +187,7 @@ class LoadingBackdrop extends LocalizeCoreElement(LitElement) {
 		const loadingSpinner = this.shadowRoot.querySelector('d2l-loading-spinner');
 		if (!loadingSpinner) { return; }
 
-		const boundingRect = this.getBoundingClientRect();
+		const boundingRect = this.shadowRoot.querySelector('#visible').getBoundingClientRect();
 
 		// Calculate the centerpoint of the visible portion of the element
 		const upperVisibleBound = Math.max(0, boundingRect.top);
@@ -182,18 +203,28 @@ class LoadingBackdrop extends LocalizeCoreElement(LitElement) {
 
 		// Adjust for the size of the dirty dialog
 		await this.shadowRoot.querySelector('d2l-empty-state-simple').getUpdateComplete();
-		await this.shadowRoot.querySelector('d2l-empty-state-action-button').getUpdateComplete();
+		await this.shadowRoot.querySelector('d2l-empty-state-action-button')?.getUpdateComplete();
 		const dirtyDialogSizeOffset = this.shadowRoot.querySelector('d2l-empty-state-simple').getBoundingClientRect().height / 2;
 
 		this._spinnerTop = centeringOffset + topOffset - spinnerSizeOffset;
 		this._dirtyDialogTop = centeringOffset + topOffset - dirtyDialogSizeOffset;
 	}
 
+	#clearLiveArea() {
+		this._ariaContent = '';
+
+		if (this.announcementTimeout) {
+			clearTimeout(this.announcementTimeout);
+		}
+
+		this.announcementTimeout = null;
+	}
+
 	#fade() {
 		let hideImmediately = reduceMotion || this._state === 'showing';
 		if (this._state === 'shown' || this._state === 'loading') {
-			const currentOpacity = getComputedStyle(this.shadowRoot.querySelector('.backdrop')).opacity;
-			hideImmediately ||= (currentOpacity === '0');
+			const backdrop = this.shadowRoot.querySelector('.backdrop');
+			hideImmediately ||= backdrop && getComputedStyle(backdrop).opacity === '0';
 		}
 
 		if (hideImmediately) {
@@ -230,6 +261,9 @@ class LoadingBackdrop extends LocalizeCoreElement(LitElement) {
 
 		if (containingBlock.dataset.initiallyInert !== '1') containingBlock.removeAttribute('inert');
 	}
+	#setLiveArea(content, { delay } = {}) {
+		this.announcementTimeout = setTimeout(() => this._ariaContent = content, delay || 0);
+	}
 	#show() {
 		this._state = reduceMotion ? 'shown' : 'showing';
 
@@ -239,10 +273,6 @@ class LoadingBackdrop extends LocalizeCoreElement(LitElement) {
 
 		containingBlock.setAttribute('inert', 'inert');
 	}
-	#showLoadingSpinner() {
-		this._state = 'loading';
-	}
-
 }
 
 customElements.define('d2l-backdrop-loading', LoadingBackdrop);
diff --git a/lang/ar.js b/lang/ar.js
index e7cad123baf..f6995f66a84 100644
--- a/lang/ar.js
+++ b/lang/ar.js
@@ -2,6 +2,9 @@ export default {
 	"components.alert.close": "إغلاق التنبيه",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "شريط التنقل",
 	"components.button-add.addItem": "إضافة عنصر",
 	"components.button-copy.copied": "تم النسخ!",
diff --git a/lang/cy.js b/lang/cy.js
index 5ab8b6bd6c6..e380e7ca0ae 100644
--- a/lang/cy.js
+++ b/lang/cy.js
@@ -2,6 +2,9 @@ export default {
 	"components.alert.close": "Cau Hysbysiad",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "Briwsionyn Bara",
 	"components.button-add.addItem": "Ychwanegu Eitem",
 	"components.button-copy.copied": "Wedi’i gopïo!",
diff --git a/lang/da.js b/lang/da.js
index 869cda127ab..86bdbaa7669 100644
--- a/lang/da.js
+++ b/lang/da.js
@@ -2,6 +2,9 @@ export default {
 	"components.alert.close": "Luk besked",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "Brødkrumme",
 	"components.button-add.addItem": "Tilføj element",
 	"components.button-copy.copied": "Kopieret!",
diff --git a/lang/de.js b/lang/de.js
index 867ff9a2308..c14cffd6a6d 100644
--- a/lang/de.js
+++ b/lang/de.js
@@ -2,6 +2,9 @@ export default {
 	"components.alert.close": "Benachrichtigung schließen",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "Brotkrümelnavigation",
 	"components.button-add.addItem": "Element hinzufügen",
 	"components.button-copy.copied": "Kopiert.",
diff --git a/lang/en-gb.js b/lang/en-gb.js
index 9bf9e21a389..f39d69bee82 100644
--- a/lang/en-gb.js
+++ b/lang/en-gb.js
@@ -2,6 +2,9 @@ export default {
 	"components.alert.close": "Close Alert",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "Breadcrumb",
 	"components.button-add.addItem": "Add Item",
 	"components.button-copy.copied": "Copied!",
diff --git a/lang/en.js b/lang/en.js
index f5557d6f676..eea45fee95f 100644
--- a/lang/en.js
+++ b/lang/en.js
@@ -2,6 +2,9 @@ export default {
 	"components.alert.close": "Close Alert",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "Breadcrumb",
 	"components.button-add.addItem": "Add Item",
 	"components.button-copy.copied": "Copied!",
diff --git a/lang/es-es.js b/lang/es-es.js
index 499f82e3629..68991113900 100644
--- a/lang/es-es.js
+++ b/lang/es-es.js
@@ -2,6 +2,9 @@ export default {
 	"components.alert.close": "Cerrar alerta",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "Ruta de navegación",
 	"components.button-add.addItem": "Agregar elemento",
 	"components.button-copy.copied": "¡Copiado!",
diff --git a/lang/es.js b/lang/es.js
index 6d965e5612a..b1c80dc5864 100644
--- a/lang/es.js
+++ b/lang/es.js
@@ -2,6 +2,9 @@ export default {
 	"components.alert.close": "Cerrar alerta",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "Ruta de navegación",
 	"components.button-add.addItem": "Agregar elemento",
 	"components.button-copy.copied": "Copiado.",
diff --git a/lang/fr-fr.js b/lang/fr-fr.js
index b9be7b3e75d..e52f64c9831 100644
--- a/lang/fr-fr.js
+++ b/lang/fr-fr.js
@@ -2,6 +2,9 @@ export default {
 	"components.alert.close": "Fermer l’alerte",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "Chemin de navigation",
 	"components.button-add.addItem": "Ajouter un élément",
 	"components.button-copy.copied": "Copie effectuée !",
diff --git a/lang/fr.js b/lang/fr.js
index 1e95d4e3291..9a88632330b 100644
--- a/lang/fr.js
+++ b/lang/fr.js
@@ -2,6 +2,9 @@ export default {
 	"components.alert.close": "Fermer l’alerte",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "Chemin de navigation",
 	"components.button-add.addItem": "Ajouter un élément",
 	"components.button-copy.copied": "Copié!",
diff --git a/lang/haw.js b/lang/haw.js
index 863a860b74c..686b9505592 100644
--- a/lang/haw.js
+++ b/lang/haw.js
@@ -2,6 +2,9 @@ export default {
 	"components.alert.close": "Pani i ka makaʻala",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "Palapalapala",
 	"components.button-add.addItem": "Pākuʻi Mea",
 	"components.button-copy.copied": "Kope ʻia!",
diff --git a/lang/hi.js b/lang/hi.js
index 12cd368bd4e..e80ff4b50b4 100644
--- a/lang/hi.js
+++ b/lang/hi.js
@@ -2,6 +2,9 @@ export default {
 	"components.alert.close": "अलर्ट बंद करें",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "ब्रेडक्रंब",
 	"components.button-add.addItem": "आइटम जोड़ें",
 	"components.button-copy.copied": "कॉपी किया गया!",
diff --git a/lang/ja.js b/lang/ja.js
index bc6e13c3fef..f28cdfea558 100644
--- a/lang/ja.js
+++ b/lang/ja.js
@@ -2,6 +2,9 @@ export default {
 	"components.alert.close": "アラートを閉じる",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "階層",
 	"components.button-add.addItem": "項目の追加",
 	"components.button-copy.copied": "コピーできました。",
diff --git a/lang/ko.js b/lang/ko.js
index 4c4396691a5..15e3cf51228 100644
--- a/lang/ko.js
+++ b/lang/ko.js
@@ -2,6 +2,9 @@ export default {
 	"components.alert.close": "경보 닫기",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "이동 경로",
 	"components.button-add.addItem": "항목 추가",
 	"components.button-copy.copied": "복사 완료!",
diff --git a/lang/mi.js b/lang/mi.js
index 2b2ca5d3ceb..c6112977e0d 100644
--- a/lang/mi.js
+++ b/lang/mi.js
@@ -2,6 +2,9 @@ export default {
 	"components.alert.close": "Kati Matohi",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "Pānui",
 	"components.button-add.addItem": "Tāpiri Tūemi",
 	"components.button-copy.copied": "Kua tāruatia!",
diff --git a/lang/nl.js b/lang/nl.js
index faa5b9f75ad..4baff2ed7ff 100644
--- a/lang/nl.js
+++ b/lang/nl.js
@@ -2,6 +2,9 @@ export default {
 	"components.alert.close": "Waarschuwing sluiten",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "Kruimelpad",
 	"components.button-add.addItem": "Item toevoegen",
 	"components.button-copy.copied": "Gekopieerd!",
diff --git a/lang/pt.js b/lang/pt.js
index da493e0e903..e19429ce3cc 100644
--- a/lang/pt.js
+++ b/lang/pt.js
@@ -2,6 +2,9 @@ export default {
 	"components.alert.close": "Fechar alerta",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "Auxiliar de navegação",
 	"components.button-add.addItem": "Adicionar item",
 	"components.button-copy.copied": "Copiado!",
diff --git a/lang/sv.js b/lang/sv.js
index 843aa985dba..9e5709b3739 100644
--- a/lang/sv.js
+++ b/lang/sv.js
@@ -2,6 +2,9 @@ export default {
 	"components.alert.close": "Stängningsvarning",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "Sökväg",
 	"components.button-add.addItem": "Lägg till objekt",
 	"components.button-copy.copied": "Kopierat!",
diff --git a/lang/th.js b/lang/th.js
index 5dd0f0d2294..93809636e81 100644
--- a/lang/th.js
+++ b/lang/th.js
@@ -2,6 +2,9 @@ export default {
 	"components.alert.close": "ปิดการแจ้งเตือน",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "แถบนำทาง",
 	"components.button-add.addItem": "เพิ่มรายการ",
 	"components.button-copy.copied": "คัดลอกแล้ว!",
diff --git a/lang/tr.js b/lang/tr.js
index fc421ba7667..4aaae1a3320 100644
--- a/lang/tr.js
+++ b/lang/tr.js
@@ -2,6 +2,9 @@ export default {
 	"components.alert.close": "Kapatma Uyarısı",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "İçerik Haritası",
 	"components.button-add.addItem": "Öğe Ekle",
 	"components.button-copy.copied": "Kopyalandı!",
diff --git a/lang/vi.js b/lang/vi.js
index 3a139582d75..b161eddb156 100644
--- a/lang/vi.js
+++ b/lang/vi.js
@@ -2,6 +2,9 @@ export default {
 	"components.alert.close": "Đóng Cảnh Báo",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "Đường dẫn",
 	"components.button-add.addItem": "Thêm mục",
 	"components.button-copy.copied": "Đã sao chép!",
diff --git a/lang/zh-cn.js b/lang/zh-cn.js
index 2c5cbb53e31..05d3b6bb091 100644
--- a/lang/zh-cn.js
+++ b/lang/zh-cn.js
@@ -2,6 +2,9 @@ export default {
 	"components.alert.close": "关闭提醒",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "痕迹导航",
 	"components.button-add.addItem": "添加项目",
 	"components.button-copy.copied": "已复制！",
diff --git a/lang/zh-tw.js b/lang/zh-tw.js
index 8e6a5acb042..a4547cf3801 100644
--- a/lang/zh-tw.js
+++ b/lang/zh-tw.js
@@ -2,6 +2,9 @@ export default {
 	"components.alert.close": "關閉警示",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
+	"components.backdrop-loading.loadingAnnouncement": "Loading.",
+	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "導覽路徑",
 	"components.button-add.addItem": "新增項目",
 	"components.button-copy.copied": "複製成功！",

From 33466165df0067398326bc1455ba267333beb1b2 Mon Sep 17 00:00:00 2001
From: Duncan Uszkay <Duncan.Uszkay@D2L.com>
Date: Thu, 9 Apr 2026 15:06:01 -0400
Subject: [PATCH 13/14] Fix loading animation issue

---
 components/backdrop/backdrop-loading.js | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/components/backdrop/backdrop-loading.js b/components/backdrop/backdrop-loading.js
index 427d4fe521d..6e00cb46963 100644
--- a/components/backdrop/backdrop-loading.js
+++ b/components/backdrop/backdrop-loading.js
@@ -55,7 +55,6 @@ class LoadingBackdrop extends LocalizeCoreElement(LitElement) {
 			}
 			:host([_state="showing"]) #visible,
 			:host([_state="shown"]) #visible,
-			:host([_state="loading"]) #visible,
 			:host([_state="hiding"]) #visible {
 				display: flex;
 			}
@@ -69,7 +68,7 @@ class LoadingBackdrop extends LocalizeCoreElement(LitElement) {
 				transition: opacity ${FADE_DURATION_MS}ms ease-in;
 				width: 100%;
 			}
-			:host([_state="shown"]) .backdrop, :host([_state="loading"]) .backdrop {
+			:host([_state="shown"]) .backdrop {
 				opacity: 0.7;
 			}
 
@@ -78,13 +77,13 @@ class LoadingBackdrop extends LocalizeCoreElement(LitElement) {
 				position: absolute;
 				transition: opacity ${FADE_DURATION_MS}ms ease-in;
 			}
-			:host([_state="loading"]) d2l-loading-spinner {
+			:host([_state="shown"][dataState="loading"]) d2l-loading-spinner {
 				opacity: 1;
 			}
 
 			:host([_state="hiding"]) .d2l-backdrop,
 			:host([_state="hiding"]) d2l-empty-state-simple,
-			:host([_state="loading"]) d2l-empty-state-simple,
+			:host([dataState="loading"]) d2l-empty-state-simple,
 			:host([_state="hiding"]) d2l-loading-spinner {
 				transition: opacity ${FADE_DURATION_MS}ms ease-out;
 			}
@@ -100,7 +99,7 @@ class LoadingBackdrop extends LocalizeCoreElement(LitElement) {
 				transition: opacity ${FADE_DURATION_MS}ms ease-in;
 			}
 
-			:host([_state="shown"]) d2l-empty-state-simple {
+			:host([_state="shown"][dataState="dirty"]) d2l-empty-state-simple {
 				opacity: 1;
 			}
 
@@ -139,7 +138,7 @@ class LoadingBackdrop extends LocalizeCoreElement(LitElement) {
 			(
 				(reduceMotion && this._state === 'shown') ||
 					(!reduceMotion && this._state === 'showing') ||
-					(this._state === 'loading')
+					(this.dataState === 'loading')
 			)
 		) {
 			this.#centerLoadingSpinner();
@@ -175,9 +174,6 @@ class LoadingBackdrop extends LocalizeCoreElement(LitElement) {
 			} else if (oldState === 'loading' && newState === 'dirty') {
 				this._state = 'shown';
 			}
-
-			// Update loading spinner
-			if (newState === 'loading') this._state = 'loading';
 		}
 	}
 

From 4788989cd3b42aad47127f92d63d6007578e6b53 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 9 Apr 2026 19:07:32 +0000
Subject: [PATCH 14/14] Updating translations - Sort

---
 lang/ar.js    | 2 +-
 lang/cy.js    | 2 +-
 lang/da.js    | 2 +-
 lang/de.js    | 2 +-
 lang/en-gb.js | 2 +-
 lang/en.js    | 2 +-
 lang/es-es.js | 2 +-
 lang/es.js    | 2 +-
 lang/fr-fr.js | 2 +-
 lang/fr.js    | 2 +-
 lang/haw.js   | 2 +-
 lang/hi.js    | 2 +-
 lang/ja.js    | 2 +-
 lang/ko.js    | 2 +-
 lang/mi.js    | 2 +-
 lang/nl.js    | 2 +-
 lang/pt.js    | 2 +-
 lang/sv.js    | 2 +-
 lang/th.js    | 2 +-
 lang/tr.js    | 2 +-
 lang/vi.js    | 2 +-
 lang/zh-cn.js | 2 +-
 lang/zh-tw.js | 2 +-
 23 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/lang/ar.js b/lang/ar.js
index f6995f66a84..219838e7831 100644
--- a/lang/ar.js
+++ b/lang/ar.js
@@ -1,10 +1,10 @@
 export default {
 	"components.alert.close": "إغلاق التنبيه",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.backdrop-loading.loadingAnnouncement": "Loading.",
 	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
-	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "شريط التنقل",
 	"components.button-add.addItem": "إضافة عنصر",
 	"components.button-copy.copied": "تم النسخ!",
diff --git a/lang/cy.js b/lang/cy.js
index e380e7ca0ae..c0dc7d815bf 100644
--- a/lang/cy.js
+++ b/lang/cy.js
@@ -1,10 +1,10 @@
 export default {
 	"components.alert.close": "Cau Hysbysiad",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.backdrop-loading.loadingAnnouncement": "Loading.",
 	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
-	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "Briwsionyn Bara",
 	"components.button-add.addItem": "Ychwanegu Eitem",
 	"components.button-copy.copied": "Wedi’i gopïo!",
diff --git a/lang/da.js b/lang/da.js
index 86bdbaa7669..8e70b3cbbf7 100644
--- a/lang/da.js
+++ b/lang/da.js
@@ -1,10 +1,10 @@
 export default {
 	"components.alert.close": "Luk besked",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.backdrop-loading.loadingAnnouncement": "Loading.",
 	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
-	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "Brødkrumme",
 	"components.button-add.addItem": "Tilføj element",
 	"components.button-copy.copied": "Kopieret!",
diff --git a/lang/de.js b/lang/de.js
index c14cffd6a6d..4825e0e197c 100644
--- a/lang/de.js
+++ b/lang/de.js
@@ -1,10 +1,10 @@
 export default {
 	"components.alert.close": "Benachrichtigung schließen",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.backdrop-loading.loadingAnnouncement": "Loading.",
 	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
-	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "Brotkrümelnavigation",
 	"components.button-add.addItem": "Element hinzufügen",
 	"components.button-copy.copied": "Kopiert.",
diff --git a/lang/en-gb.js b/lang/en-gb.js
index f39d69bee82..2a41fe1b282 100644
--- a/lang/en-gb.js
+++ b/lang/en-gb.js
@@ -1,10 +1,10 @@
 export default {
 	"components.alert.close": "Close Alert",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.backdrop-loading.loadingAnnouncement": "Loading.",
 	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
-	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "Breadcrumb",
 	"components.button-add.addItem": "Add Item",
 	"components.button-copy.copied": "Copied!",
diff --git a/lang/en.js b/lang/en.js
index eea45fee95f..c1f5389d59d 100644
--- a/lang/en.js
+++ b/lang/en.js
@@ -1,10 +1,10 @@
 export default {
 	"components.alert.close": "Close Alert",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.backdrop-loading.loadingAnnouncement": "Loading.",
 	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
-	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "Breadcrumb",
 	"components.button-add.addItem": "Add Item",
 	"components.button-copy.copied": "Copied!",
diff --git a/lang/es-es.js b/lang/es-es.js
index 68991113900..97cc50969e4 100644
--- a/lang/es-es.js
+++ b/lang/es-es.js
@@ -1,10 +1,10 @@
 export default {
 	"components.alert.close": "Cerrar alerta",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.backdrop-loading.loadingAnnouncement": "Loading.",
 	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
-	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "Ruta de navegación",
 	"components.button-add.addItem": "Agregar elemento",
 	"components.button-copy.copied": "¡Copiado!",
diff --git a/lang/es.js b/lang/es.js
index b1c80dc5864..4d27e5e5b97 100644
--- a/lang/es.js
+++ b/lang/es.js
@@ -1,10 +1,10 @@
 export default {
 	"components.alert.close": "Cerrar alerta",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.backdrop-loading.loadingAnnouncement": "Loading.",
 	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
-	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "Ruta de navegación",
 	"components.button-add.addItem": "Agregar elemento",
 	"components.button-copy.copied": "Copiado.",
diff --git a/lang/fr-fr.js b/lang/fr-fr.js
index e52f64c9831..ddd231b3ca6 100644
--- a/lang/fr-fr.js
+++ b/lang/fr-fr.js
@@ -1,10 +1,10 @@
 export default {
 	"components.alert.close": "Fermer l’alerte",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.backdrop-loading.loadingAnnouncement": "Loading.",
 	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
-	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "Chemin de navigation",
 	"components.button-add.addItem": "Ajouter un élément",
 	"components.button-copy.copied": "Copie effectuée !",
diff --git a/lang/fr.js b/lang/fr.js
index 9a88632330b..9bd64781816 100644
--- a/lang/fr.js
+++ b/lang/fr.js
@@ -1,10 +1,10 @@
 export default {
 	"components.alert.close": "Fermer l’alerte",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.backdrop-loading.loadingAnnouncement": "Loading.",
 	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
-	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "Chemin de navigation",
 	"components.button-add.addItem": "Ajouter un élément",
 	"components.button-copy.copied": "Copié!",
diff --git a/lang/haw.js b/lang/haw.js
index 686b9505592..e7a3c5cba68 100644
--- a/lang/haw.js
+++ b/lang/haw.js
@@ -1,10 +1,10 @@
 export default {
 	"components.alert.close": "Pani i ka makaʻala",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.backdrop-loading.loadingAnnouncement": "Loading.",
 	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
-	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "Palapalapala",
 	"components.button-add.addItem": "Pākuʻi Mea",
 	"components.button-copy.copied": "Kope ʻia!",
diff --git a/lang/hi.js b/lang/hi.js
index e80ff4b50b4..92529d93bd7 100644
--- a/lang/hi.js
+++ b/lang/hi.js
@@ -1,10 +1,10 @@
 export default {
 	"components.alert.close": "अलर्ट बंद करें",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.backdrop-loading.loadingAnnouncement": "Loading.",
 	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
-	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "ब्रेडक्रंब",
 	"components.button-add.addItem": "आइटम जोड़ें",
 	"components.button-copy.copied": "कॉपी किया गया!",
diff --git a/lang/ja.js b/lang/ja.js
index f28cdfea558..b09bb1fc589 100644
--- a/lang/ja.js
+++ b/lang/ja.js
@@ -1,10 +1,10 @@
 export default {
 	"components.alert.close": "アラートを閉じる",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.backdrop-loading.loadingAnnouncement": "Loading.",
 	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
-	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "階層",
 	"components.button-add.addItem": "項目の追加",
 	"components.button-copy.copied": "コピーできました。",
diff --git a/lang/ko.js b/lang/ko.js
index 15e3cf51228..f2a1eb7b356 100644
--- a/lang/ko.js
+++ b/lang/ko.js
@@ -1,10 +1,10 @@
 export default {
 	"components.alert.close": "경보 닫기",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.backdrop-loading.loadingAnnouncement": "Loading.",
 	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
-	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "이동 경로",
 	"components.button-add.addItem": "항목 추가",
 	"components.button-copy.copied": "복사 완료!",
diff --git a/lang/mi.js b/lang/mi.js
index c6112977e0d..6a68be10dc4 100644
--- a/lang/mi.js
+++ b/lang/mi.js
@@ -1,10 +1,10 @@
 export default {
 	"components.alert.close": "Kati Matohi",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.backdrop-loading.loadingAnnouncement": "Loading.",
 	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
-	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "Pānui",
 	"components.button-add.addItem": "Tāpiri Tūemi",
 	"components.button-copy.copied": "Kua tāruatia!",
diff --git a/lang/nl.js b/lang/nl.js
index 4baff2ed7ff..0fe900e9d5b 100644
--- a/lang/nl.js
+++ b/lang/nl.js
@@ -1,10 +1,10 @@
 export default {
 	"components.alert.close": "Waarschuwing sluiten",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.backdrop-loading.loadingAnnouncement": "Loading.",
 	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
-	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "Kruimelpad",
 	"components.button-add.addItem": "Item toevoegen",
 	"components.button-copy.copied": "Gekopieerd!",
diff --git a/lang/pt.js b/lang/pt.js
index e19429ce3cc..ccc4a77d4c4 100644
--- a/lang/pt.js
+++ b/lang/pt.js
@@ -1,10 +1,10 @@
 export default {
 	"components.alert.close": "Fechar alerta",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.backdrop-loading.loadingAnnouncement": "Loading.",
 	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
-	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "Auxiliar de navegação",
 	"components.button-add.addItem": "Adicionar item",
 	"components.button-copy.copied": "Copiado!",
diff --git a/lang/sv.js b/lang/sv.js
index 9e5709b3739..a44fd3af886 100644
--- a/lang/sv.js
+++ b/lang/sv.js
@@ -1,10 +1,10 @@
 export default {
 	"components.alert.close": "Stängningsvarning",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.backdrop-loading.loadingAnnouncement": "Loading.",
 	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
-	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "Sökväg",
 	"components.button-add.addItem": "Lägg till objekt",
 	"components.button-copy.copied": "Kopierat!",
diff --git a/lang/th.js b/lang/th.js
index 93809636e81..3e3af7c1904 100644
--- a/lang/th.js
+++ b/lang/th.js
@@ -1,10 +1,10 @@
 export default {
 	"components.alert.close": "ปิดการแจ้งเตือน",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.backdrop-loading.loadingAnnouncement": "Loading.",
 	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
-	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "แถบนำทาง",
 	"components.button-add.addItem": "เพิ่มรายการ",
 	"components.button-copy.copied": "คัดลอกแล้ว!",
diff --git a/lang/tr.js b/lang/tr.js
index 4aaae1a3320..b82e61c203d 100644
--- a/lang/tr.js
+++ b/lang/tr.js
@@ -1,10 +1,10 @@
 export default {
 	"components.alert.close": "Kapatma Uyarısı",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.backdrop-loading.loadingAnnouncement": "Loading.",
 	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
-	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "İçerik Haritası",
 	"components.button-add.addItem": "Öğe Ekle",
 	"components.button-copy.copied": "Kopyalandı!",
diff --git a/lang/vi.js b/lang/vi.js
index b161eddb156..c1884bde2e9 100644
--- a/lang/vi.js
+++ b/lang/vi.js
@@ -1,10 +1,10 @@
 export default {
 	"components.alert.close": "Đóng Cảnh Báo",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.backdrop-loading.loadingAnnouncement": "Loading.",
 	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
-	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "Đường dẫn",
 	"components.button-add.addItem": "Thêm mục",
 	"components.button-copy.copied": "Đã sao chép!",
diff --git a/lang/zh-cn.js b/lang/zh-cn.js
index 05d3b6bb091..42ee489e905 100644
--- a/lang/zh-cn.js
+++ b/lang/zh-cn.js
@@ -1,10 +1,10 @@
 export default {
 	"components.alert.close": "关闭提醒",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.backdrop-loading.loadingAnnouncement": "Loading.",
 	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
-	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "痕迹导航",
 	"components.button-add.addItem": "添加项目",
 	"components.button-copy.copied": "已复制！",
diff --git a/lang/zh-tw.js b/lang/zh-tw.js
index a4547cf3801..3ee0e556a8e 100644
--- a/lang/zh-tw.js
+++ b/lang/zh-tw.js
@@ -1,10 +1,10 @@
 export default {
 	"components.alert.close": "關閉警示",
+	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.backdrop-loading.dirtyDialogAction": "Apply Filters.",
 	"components.backdrop-loading.dirtyDialogDescription": "Filters have been changed.",
 	"components.backdrop-loading.loadingAnnouncement": "Loading.",
 	"components.backdrop-loading.loadingCompleteAnnouncement": "Loading Complete.",
-	"components.backdrop-loading.dirtyAnnouncement": "Filters have been changed. Click to Apply Filters.",
 	"components.breadcrumbs.breadcrumb": "導覽路徑",
 	"components.button-add.addItem": "新增項目",
 	"components.button-copy.copied": "複製成功！",