yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Engiber Lozada
2025-11-13 20:38:32 +01:00
committed by GitHub
parent 617d301479
commit bbd30363a2
2 changed files with 25 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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