diff --git a/components/backdrop/backdrop-loading.js b/components/backdrop/backdrop-loading.js
index 529463cd038..6e00cb46963 100644
--- a/components/backdrop/backdrop-loading.js
+++ b/components/backdrop/backdrop-loading.js
@@ -1,14 +1,17 @@
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 BACKDROP_DELAY_MS = 800;
const FADE_DURATION_MS = 500;
-const SPINNER_DELAY_MS = FADE_DURATION_MS;
+const LOADING_ANNOUNCEMENT_DELAY = 1000;
+const DIRTY_ANNOUNCEMENT_DELAY = 1000;
-const LOADING_SPINNER_MINIMUM_BUFFER = 100;
const LOADING_SPINNER_SIZE = 50;
const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
@@ -16,28 +19,32 @@ 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 {
/**
- * 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}
*/
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;
@@ -46,9 +53,9 @@ class LoadingBackdrop extends LitElement {
width: 100%;
z-index: 999;
}
- :host([_state="showing"]),
- :host([_state="shown"]),
- :host([_state="hiding"]) {
+ :host([_state="showing"]) #visible,
+ :host([_state="shown"]) #visible,
+ :host([_state="hiding"]) #visible {
display: flex;
}
@@ -68,17 +75,34 @@ class LoadingBackdrop extends LitElement {
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="shown"][dataState="loading"]) d2l-loading-spinner {
opacity: 1;
}
:host([_state="hiding"]) .d2l-backdrop,
+ :host([_state="hiding"]) 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;
}
+ 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"][dataState="dirty"]) d2l-empty-state-simple {
+ opacity: 1;
+ }
+
@media (prefers-reduced-motion: reduce) {
* { transition: none; }
}
@@ -87,56 +111,85 @@ class LoadingBackdrop extends LitElement {
constructor() {
super();
- this.shown = false;
+ this.dataState = 'clean';
this._state = 'hidden';
- this._spinnerTop = LOADING_SPINNER_MINIMUM_BUFFER;
+ this._spinnerTop = 0;
+ this._dirtyDialogTop = 0;
+ this._ariaContent = '';
}
render() {
- if (this._state === 'hidden') return nothing;
return html`
-
-
+ ${this._state === 'hidden' ? nothing :
+ html``
+ }
+ ${this._ariaContent}
`;
}
updated(changedProperties) {
+ if (changedProperties.has('dataState') &&
+ changedProperties.get('dataState') === 'clean' &&
+ (
+ (reduceMotion && this._state === 'shown') ||
+ (!reduceMotion && this._state === 'showing') ||
+ (this.dataState === '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';
}
}
-
- 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) {
+ 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'));
+ }
+
+ // Update backdrop
+ if (oldState === 'clean') {
this.#show();
- } else if (changedProperties.get('shown') !== undefined) {
+ } else if (newState === 'clean') {
this.#fade();
+ } else if (oldState === 'loading' && newState === 'dirty') {
+ this._state = 'shown';
}
}
}
- #centerLoadingSpinner() {
+ async #centerLoadingSpinner() {
if (this._state === 'hidden') { return; }
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);
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
@@ -144,15 +197,30 @@ 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
+ 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 = 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') {
- const currentOpacity = getComputedStyle(this.shadowRoot.querySelector('.backdrop')).opacity;
- hideImmediately ||= (currentOpacity === '0');
+ if (this._state === 'shown' || this._state === 'loading') {
+ const backdrop = this.shadowRoot.querySelector('.backdrop');
+ hideImmediately ||= backdrop && getComputedStyle(backdrop).opacity === '0';
}
if (hideImmediately) {
@@ -174,6 +242,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();
@@ -186,6 +257,9 @@ class LoadingBackdrop extends 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';
@@ -195,7 +269,6 @@ class LoadingBackdrop extends LitElement {
containingBlock.setAttribute('inert', 'inert');
}
-
}
customElements.define('d2l-backdrop-loading', LoadingBackdrop);
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();
});
});
diff --git a/components/table/demo/table-test.js b/components/table/demo/table-test.js
index 7014884e4d3..acd122540ba 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}"
>
-
+
+
+
+
+
@@ -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`
-
+
`;
const useScrollWrapper = this.stickyHeadersScrollWrapper || !this.stickyHeaders;
diff --git a/lang/ar.js b/lang/ar.js
index ffaed766f93..219838e7831 100644
--- a/lang/ar.js
+++ b/lang/ar.js
@@ -1,5 +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.breadcrumbs.breadcrumb": "شريط التنقل",
"components.button-add.addItem": "إضافة عنصر",
"components.button-copy.copied": "تم النسخ!",
diff --git a/lang/cy.js b/lang/cy.js
index 8d8b352dba9..c0dc7d815bf 100644
--- a/lang/cy.js
+++ b/lang/cy.js
@@ -1,5 +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.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..8e70b3cbbf7 100644
--- a/lang/da.js
+++ b/lang/da.js
@@ -1,5 +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.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..4825e0e197c 100644
--- a/lang/de.js
+++ b/lang/de.js
@@ -1,5 +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.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..2a41fe1b282 100644
--- a/lang/en-gb.js
+++ b/lang/en-gb.js
@@ -1,5 +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.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..c1f5389d59d 100644
--- a/lang/en.js
+++ b/lang/en.js
@@ -1,5 +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.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..97cc50969e4 100644
--- a/lang/es-es.js
+++ b/lang/es-es.js
@@ -1,5 +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.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..4d27e5e5b97 100644
--- a/lang/es.js
+++ b/lang/es.js
@@ -1,5 +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.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..ddd231b3ca6 100644
--- a/lang/fr-fr.js
+++ b/lang/fr-fr.js
@@ -1,5 +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.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..9bd64781816 100644
--- a/lang/fr.js
+++ b/lang/fr.js
@@ -1,5 +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.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..e7a3c5cba68 100644
--- a/lang/haw.js
+++ b/lang/haw.js
@@ -1,5 +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.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..92529d93bd7 100644
--- a/lang/hi.js
+++ b/lang/hi.js
@@ -1,5 +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.breadcrumbs.breadcrumb": "ब्रेडक्रंब",
"components.button-add.addItem": "आइटम जोड़ें",
"components.button-copy.copied": "कॉपी किया गया!",
diff --git a/lang/ja.js b/lang/ja.js
index 5d5d790b81f..b09bb1fc589 100644
--- a/lang/ja.js
+++ b/lang/ja.js
@@ -1,5 +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.breadcrumbs.breadcrumb": "階層",
"components.button-add.addItem": "項目の追加",
"components.button-copy.copied": "コピーできました。",
diff --git a/lang/ko.js b/lang/ko.js
index 9914b07a792..f2a1eb7b356 100644
--- a/lang/ko.js
+++ b/lang/ko.js
@@ -1,5 +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.breadcrumbs.breadcrumb": "이동 경로",
"components.button-add.addItem": "항목 추가",
"components.button-copy.copied": "복사 완료!",
diff --git a/lang/mi.js b/lang/mi.js
index 9e89365803b..6a68be10dc4 100644
--- a/lang/mi.js
+++ b/lang/mi.js
@@ -1,5 +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.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..0fe900e9d5b 100644
--- a/lang/nl.js
+++ b/lang/nl.js
@@ -1,5 +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.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..ccc4a77d4c4 100644
--- a/lang/pt.js
+++ b/lang/pt.js
@@ -1,5 +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.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..a44fd3af886 100644
--- a/lang/sv.js
+++ b/lang/sv.js
@@ -1,5 +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.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..3e3af7c1904 100644
--- a/lang/th.js
+++ b/lang/th.js
@@ -1,5 +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.breadcrumbs.breadcrumb": "แถบนำทาง",
"components.button-add.addItem": "เพิ่มรายการ",
"components.button-copy.copied": "คัดลอกแล้ว!",
diff --git a/lang/tr.js b/lang/tr.js
index 19efc483626..b82e61c203d 100644
--- a/lang/tr.js
+++ b/lang/tr.js
@@ -1,5 +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.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..c1884bde2e9 100644
--- a/lang/vi.js
+++ b/lang/vi.js
@@ -1,5 +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.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..42ee489e905 100644
--- a/lang/zh-cn.js
+++ b/lang/zh-cn.js
@@ -1,5 +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.breadcrumbs.breadcrumb": "痕迹导航",
"components.button-add.addItem": "添加项目",
"components.button-copy.copied": "已复制!",
diff --git a/lang/zh-tw.js b/lang/zh-tw.js
index a48941b1424..3ee0e556a8e 100644
--- a/lang/zh-tw.js
+++ b/lang/zh-tw.js
@@ -1,5 +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.breadcrumbs.breadcrumb": "導覽路徑",
"components.button-add.addItem": "新增項目",
"components.button-copy.copied": "複製成功!",