Add loading indicator to data type picker flow modal #21085

Copilot · 2025-12-08T13:10:33Z

Prerequisites

I have added steps to test this contribution in the description below

Description

The Data Type Picker Flow Modal fetches data from the server during filtering and pagination but provided no visual feedback during these operations, creating an unclear user experience.

Changes:

Added _isLoading state variable to track data fetching operations
Modified #getDataTypes() to set loading state with try-finally for guaranteed cleanup
Render <uui-loader> in centered container when loading is active
Loading indicator displays during:
- Search/filter operations
- Pagination ("Load more" button)
- Initial data load with filter query

Implementation:

async #getDataTypes() {
  this._isLoading = true;
  try {
    const { data } = await this.#collectionRepository.requestCollection({...});
    // Process data
  } finally {
    this._isLoading = false;
  }
}

#renderGrid() {
  if (this._isLoading) {
    return html`<div class="loader-container"><uui-loader></uui-loader></div>`;
  }
  return this.#currentFilterQuery ? this.#renderFilteredList() : this.#renderUIs();
}

Testing:

Navigate to Content Type editor in Umbraco backoffice
Add a new property to a content type
In the Data Type picker modal, enter text in the filter field
Observe loader appears while filtering
Click "Load more" button (if available)
Observe loader appears during pagination

Files changed:

data-type-picker-flow-modal.element.ts - Core implementation
data-type-picker-flow-modal.test.ts - Unit tests (new)

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

iojs.org
- Triggering command: /usr/bin/curl curl -q --fail --compressed -L -s REDACTED -o - /ufm/components/sdk-manifests/10.0.100/microsoft.net.workload.emscripten.net9/10.0.1�� ndor/bin/grep grep ess_�� uui-loader /home/REDACTED/work/Umbraco-CMS/Umbraco-CMS/src/Umbraco.Web.UI.Client/src/packages/templating/partt braco.Web.UI.Client/node_modules/.bin/sh nt.ts /templating/styl-v ep bash (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

The Data Type Picker Flow Modal (data-type-picker-flow-modal.element.ts) fetches data from the server when filtering and grouping data types but currently shows no loader or spinner while the data is being loaded. This can lead to a confusing user experience as users do not see any feedback during the loading state.

Task:

Add a visual loading indicator (such as <uui-loader>) to be displayed in the modal whenever data is being fetched from the server.

The loader should be rendered in the main content area of the modal until the relevant data is ready to display.

Make sure filtering and loading more paged data also triggers the loader appropriately.

Remove or hide the loader when data is loaded or if there is an error.

Add tests if possible.

File:

src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts

This pull request was created as a result of the following prompt from Copilot chat.

The Data Type Picker Flow Modal (data-type-picker-flow-modal.element.ts) fetches data from the server when filtering and grouping data types but currently shows no loader or spinner while the data is being loaded. This can lead to a confusing user experience as users do not see any feedback during the loading state.

Task:

Add a visual loading indicator (such as <uui-loader>) to be displayed in the modal whenever data is being fetched from the server.

The loader should be rendered in the main content area of the modal until the relevant data is ready to display.

Make sure filtering and loading more paged data also triggers the loader appropriately.

Remove or hide the loader when data is loaded or if there is an error.

Add tests if possible.

File:

src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

- 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 <6791648+nielslyngsoe@users.noreply.github.com>

- Added .loader-container CSS class - Removed inline styles from loader div - Improves maintainability and follows best practices Co-authored-by: nielslyngsoe <6791648+nielslyngsoe@users.noreply.github.com>

nielslyngsoe · 2025-12-08T14:15:28Z

Not sure why there is an update to the package-lock of the login app, but I think its okay. The rest looks good.

Copilot

Pull request overview

This pull request adds a visual loading indicator to the Data Type Picker Flow Modal to provide feedback during server data fetching operations. The modal fetches data during filtering, pagination, and initial load, but previously provided no visual feedback, resulting in a confusing user experience.

Key Changes

Added _isLoading state variable to track data fetching operations
Wrapped async data fetching in try-finally block to ensure loading state cleanup
Rendered <uui-loader> component in centered container during loading operations

Reviewed changes

Copilot reviewed 2 out of 3 changed files in this pull request and generated 3 comments.

File	Description
src/Umbraco.Web.UI.Login/package-lock.json	Unrelated dependency peer marker changes in Login UI package (should be reviewed separately)
src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.test.ts	New test file with basic element instantiation and a11y tests
src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts	Core implementation with loading state management and conditional loader rendering

Files not reviewed (1)

src/Umbraco.Web.UI.Login/package-lock.json: Language not supported

Copilot · 2025-12-08T14:18:51Z

...ient/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.test.ts

+	it('should have _isLoading state property', () => {
+		expect(element).to.have.property('_isLoading');


The test file checks for the existence of the _isLoading property, but this is a private property (indicated by the underscore prefix). Consider testing the public/observable behavior instead, such as checking if a loader element is rendered during data fetching operations, rather than testing internal implementation details.

Suggested change

it('should have _isLoading state property', () => {

expect(element).to.have.property('_isLoading');

it('should render a loader element when loading', async () => {

// Simulate loading state if necessary

element['isLoading'] = true; // or use a public method/property if available

await element.updateComplete;

const loader = element.shadowRoot?.querySelector('.loader, [data-test="loader"]');

expect(loader).to.exist;

Copilot · 2025-12-08T14:18:52Z

...ient/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.test.ts

+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);
+		});
+	}
+});


The test suite for the loading indicator is minimal and doesn't test the actual loading behavior. Consider adding tests that:

Mock the #collectionRepository.requestCollection method to return a promise

Verify that uui-loader is rendered while the promise is pending

Verify that the loader is removed when data loading completes or fails

Test that the loader appears during filter/search operations

Test that the loader appears during pagination ("Load more" button)

This would ensure the loading indicator works as expected in real-world scenarios.

Copilot

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

Initial plan

7121c9a

Copilot AI assigned Copilot and nielslyngsoe Dec 8, 2025

Copilot started work on behalf of nielslyngsoe December 8, 2025 13:10 View session

Copilot AI and others added 2 commits December 8, 2025 13:19

Refactor: Replace inline styles with CSS class for loader

39a3552

- Added .loader-container CSS class - Removed inline styles from loader div - Improves maintainability and follows best practices Co-authored-by: nielslyngsoe <6791648+nielslyngsoe@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Add visual loading indicator to the data type picker modal~~ Add loading indicator to data type picker flow modal Dec 8, 2025

Copilot AI requested a review from nielslyngsoe December 8, 2025 13:35

Copilot finished work on behalf of nielslyngsoe December 8, 2025 13:35

nielslyngsoe marked this pull request as ready for review December 8, 2025 14:15

Copilot AI review requested due to automatic review settings December 8, 2025 14:15

Copilot started reviewing on behalf of nielslyngsoe December 8, 2025 14:16 View session

Copilot AI reviewed Dec 8, 2025

View reviewed changes

madsrasmussen added the area/frontend label Dec 12, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add loading indicator to data type picker flow modal #21085

Add loading indicator to data type picker flow modal #21085

Copilot AI commented Dec 8, 2025 •

edited

Loading

Uh oh!

nielslyngsoe commented Dec 8, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Dec 8, 2025

Uh oh!

Copilot AI Dec 8, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		it('should have _isLoading state property', () => {
		expect(element).to.have.property('_isLoading');

-	it('should have _isLoading state property', () => {
-		expect(element).to.have.property('_isLoading');
+	it('should render a loader element when loading', async () => {
+		// Simulate loading state if necessary
+		element['isLoading'] = true; // or use a public method/property if available
+		await element.updateComplete;
+		const loader = element.shadowRoot?.querySelector('.loader, [data-test="loader"]');
+		expect(loader).to.exist;

Add loading indicator to data type picker flow modal #21085

Are you sure you want to change the base?

Add loading indicator to data type picker flow modal #21085

Conversation

Copilot AI commented Dec 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Prerequisites

Description

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

nielslyngsoe commented Dec 8, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Key Changes

Reviewed changes

Uh oh!

Copilot AI Dec 8, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 8, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Copilot AI commented Dec 8, 2025 •

edited

Loading