Add loading indicator to data-type-picker-flow-modal

- Added _isLoading state variable
- Updated #getDataTypes() to set loading state with try-finally
- Added uui-loader component in #renderGrid() when loading
- Created test file with basic tests
- Fixed linter warnings

Co-authored-by: nielslyngsoe <[email protected]>

Author: Copilot

src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts

@@ -44,6 +44,9 @@ export class UmbDataTypePickerFlowModalElement extends UmbModalBaseElement<
 	@state()
 	private _dataTypePickerModalRouteBuilder?: UmbModalRouteBuilder;
 
+	@state()
+	private _isLoading = false;
+
 	pagination = new UmbPaginationManager();
 
 	#collectionRepository;
@@ -162,20 +165,25 @@ export class UmbDataTypePickerFlowModalElement extends UmbModalBaseElement<
 	}
 
 	async #getDataTypes() {
-		this.pagination.setCurrentPageNumber(this._currentPage);
-
-		const { data } = await this.#collectionRepository.requestCollection({
-			skip: this.pagination.getSkip(),
-			take: this.pagination.getPageSize(),
-			name: this.#currentFilterQuery,
-		});
+		this._isLoading = true;
+		try {
+			this.pagination.setCurrentPageNumber(this._currentPage);
+
+			const { data } = await this.#collectionRepository.requestCollection({
+				skip: this.pagination.getSkip(),
+				take: this.pagination.getPageSize(),
+				name: this.#currentFilterQuery,
+			});
 
-		this.pagination.setTotalItems(data?.total ?? 0);
+			this.pagination.setTotalItems(data?.total ?? 0);
 
-		if (this.pagination.getCurrentPageNumber() > 1) {
-			this.#dataTypes = [...this.#dataTypes, ...(data?.items ?? [])];
-		} else {
-			this.#dataTypes = data?.items ?? [];
+			if (this.pagination.getCurrentPageNumber() > 1) {
+				this.#dataTypes = [...this.#dataTypes, ...(data?.items ?? [])];
+			} else {
+				this.#dataTypes = data?.items ?? [];
+			}
+		} finally {
+			this._isLoading = false;
 		}
 	}
 
@@ -260,6 +268,12 @@ export class UmbDataTypePickerFlowModalElement extends UmbModalBaseElement<
 	}
 
 	#renderGrid() {
+		if (this._isLoading) {
+			return html`<div
+				style="display: flex; justify-content: center; align-items: center; padding: var(--uui-size-space-6);">
+				<uui-loader></uui-loader>
+			</div>`;
+		}
 		return this.#currentFilterQuery ? this.#renderFilteredList() : this.#renderUIs();
 	}
 

src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.test.ts

@@ -0,0 +1,25 @@
+import { UmbDataTypePickerFlowModalElement } from './data-type-picker-flow-modal.element.js';
+import { expect, fixture, html } from '@open-wc/testing';
+import { type UmbTestRunnerWindow, defaultA11yConfig } from '@umbraco-cms/internal/test-utils';
+
+describe('UmbDataTypePickerFlowModalElement', () => {
+	let element: UmbDataTypePickerFlowModalElement;
+
+	beforeEach(async () => {
+		element = await fixture(html` <umb-data-type-picker-flow-modal></umb-data-type-picker-flow-modal> `);
+	});
+
+	it('is defined with its own instance', () => {
+		expect(element).to.be.instanceOf(UmbDataTypePickerFlowModalElement);
+	});
+
+	it('should have _isLoading state property', () => {
+		expect(element).to.have.property('_isLoading');
+	});
+
+	if ((window as UmbTestRunnerWindow).__UMBRACO_TEST_RUN_A11Y_TEST) {
+		it('passes the a11y audit', async () => {
+			await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
+		});
+	}
+});