Media Picker: Remove duplicate loaders in media cards. (#20793)

* Removed isLoding condition from the rich media input and let the thumbnail handle the loader.

* Removed unused import.

* change loader and adjust lit property configuration

* update reflect configuration

---------

Co-authored-by: Niels Lyngsø <niels.lyngso@gmail.com>

src/Umbraco.Web.UI.Client/src/packages/media/imaging/components/imaging-thumbnail.element.ts

@@ -12,8 +12,8 @@ export class UmbImagingThumbnailElement extends UmbLitElement {
 	 * The unique identifier for the media item.
 	 * @description This is also known as the media key and is used to fetch the resource.
 	 */
-	@property()
-	unique = '';
+	@property({ type: String })
+	unique?: string;
 
 	/**
 	 * The width of the thumbnail in pixels.
@@ -34,19 +34,19 @@ export class UmbImagingThumbnailElement extends UmbLitElement {
 	 * @description The mode determines how the image is cropped.
 	 * @enum {UmbImagingCropMode}
 	 */
-	@property()
+	@property({ type: String })
 	mode: UmbImagingCropMode = UmbImagingCropMode.MIN;
 
 	/**
 	 * The alt text for the thumbnail.
 	 */
-	@property()
+	@property({ type: String })
 	alt = '';
 
 	/**
 	 * The fallback icon for the thumbnail.
 	 */
-	@property()
+	@property({ type: String })
 	icon = 'icon-picture';
 
 	/**
@@ -54,11 +54,17 @@ export class UmbImagingThumbnailElement extends UmbLitElement {
 	 * @enum {'lazy' | 'eager'}
 	 * @default 'lazy'
 	 */
-	@property()
+	@property({ type: String })
 	loading: (typeof HTMLImageElement)['prototype']['loading'] = 'lazy';
 
+	/**
+	 * External loading state (e.g., when parent is waiting for metadata)
+	 */
+	@property({ type: Boolean, reflect: false, attribute: 'external-loading' })
+	externalLoading = false;
+
 	@state()
-	private _isLoading = true;
+	private _isLoading = false;
 
 	@state()
 	private _thumbnailUrl = '';
@@ -69,7 +75,7 @@ export class UmbImagingThumbnailElement extends UmbLitElement {
 
 	override render() {
 		return when(
-			this._isLoading,
+			this.externalLoading || this._isLoading,
 			() => this.#renderLoading(),
 			() => this.#renderThumbnail(),
 		);
@@ -114,7 +120,7 @@ export class UmbImagingThumbnailElement extends UmbLitElement {
 	}
 
 	#renderLoading() {
-		return html`<div id="loader"><uui-loader></uui-loader></div>`;
+		return html`<uui-loader-circle id="loader"></uui-loader-circle>`;
 	}
 
 	#renderThumbnail() {
@@ -154,11 +160,8 @@ export class UmbImagingThumbnailElement extends UmbLitElement {
 			}
 
 			#loader {
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				height: 100%;
-				width: 100%;
+				font-size: 2em;
+				margin-bottom: 1em;
 			}
 
 			#figure {

src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts

@@ -4,7 +4,7 @@ import { UMB_MEDIA_ITEM_REPOSITORY_ALIAS } from '../../repository/constants.js';
 import { UmbMediaPickerInputContext } from '../input-media/input-media.context.js';
 import { UmbFileDropzoneItemStatus } from '@umbraco-cms/backoffice/dropzone';
 import type { UmbDropzoneChangeEvent } from '@umbraco-cms/backoffice/dropzone';
-import { css, customElement, html, nothing, property, repeat, state, when } from '@umbraco-cms/backoffice/external/lit';
+import { css, customElement, html, nothing, property, repeat, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbId } from '@umbraco-cms/backoffice/id';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
@@ -409,18 +409,15 @@ export class UmbInputRichMediaElement extends UmbFormControlMixin<
 	#renderItem(item: UmbRichMediaCardModel) {
 		if (!item.unique) return nothing;
 		const href = this.readonly ? undefined : this._routeBuilder?.({ key: item.unique });
+
 		return html`
 			<uui-card-media id=${item.unique} name=${item.name} .href=${href} ?readonly=${this.readonly}>
-				${when(
-					item.isLoading,
-					() => html`<uui-loader-circle></uui-loader-circle>`,
-					() => html`
-						<umb-imaging-thumbnail
-							unique=${item.media}
-							alt=${item.name}
-							icon=${item.icon ?? 'icon-picture'}></umb-imaging-thumbnail>
-					`,
-				)}
+				<umb-imaging-thumbnail
+					.unique=${item.media}
+					.alt=${item.name}
+					.icon=${item.icon ?? 'icon-picture'}
+					.externalLoading=${item.isLoading ?? false}></umb-imaging-thumbnail>
+
 				${this.#renderIsTrashed(item)} ${this.#renderActions(item)}
 			</uui-card-media>
 		`;