Document Create Modal: Add loading indicator to Create options (fix #20817)

src/Umbraco.Web.UI.Client/src/libs/context-api/consume/context-consume.decorator.ts

@@ -44,9 +44,7 @@ export interface UmbConsumeOptions<
  *
  * This decorator supports both modern "standard" decorators (Stage 3 TC39 proposal) and
  * legacy TypeScript experimental decorators for backward compatibility.
- *
  * @param {UmbConsumeOptions} options Configuration object containing context, callback, and subscribe options
- *
  * @example
  * ```ts
  * import {consumeContext} from '@umbraco-cms/backoffice/context-api';
@@ -94,6 +92,11 @@ export function consumeContext<
  *
  * Note: Standard decorators currently don't work with @state()/@property()
  * decorators, which is why we still need the legacy branch.
+ * @param protoOrTarget
+ * @param decoratorContext
+ * @param context
+ * @param callback
+ * @param subscribe
  */
 function setupStandardDecorator<BaseType extends UmbContextMinimal, ResultType extends BaseType>(
 	protoOrTarget: any,
@@ -146,6 +149,11 @@ function setupStandardDecorator<BaseType extends UmbContextMinimal, ResultType e
  * 1. addInitializer (if available, e.g., on LitElement classes)
  * 2. hostConnected wrapper (for UmbController classes)
  * 3. Warning (if neither is available)
+ * @param protoOrTarget
+ * @param propertyKey
+ * @param context
+ * @param callback
+ * @param subscribe
  */
 function setupLegacyDecorator<BaseType extends UmbContextMinimal, ResultType extends BaseType>(
 	protoOrTarget: any,

src/Umbraco.Web.UI.Client/src/libs/context-api/provide/context-provide.decorator.ts

@@ -28,9 +28,7 @@ export interface UmbProvideOptions<BaseType extends UmbContextMinimal, ResultTyp
  * To update the provided value dynamically, keep a state inside the provided context instance
  * and update that state as needed. The context instance itself should remain the same.
  * You can use any of the Umb{*}State classes.
- *
  * @param {UmbProvideOptions} options Configuration object containing the context token
- *
  * @example
  * ```ts
  * import {provideContext} from '@umbraco-cms/backoffice/context-api';
@@ -46,7 +44,6 @@ export interface UmbProvideOptions<BaseType extends UmbContextMinimal, ResultTyp
  *   workspaceContext = new UmbWorkspaceContext(this);
  * }
  * ```
- *
  * @example
  * ```ts
  * // For dynamic updates, store the state inside the context instance
@@ -63,7 +60,6 @@ export interface UmbProvideOptions<BaseType extends UmbContextMinimal, ResultTyp
  *   }
  * }
  * ```
- *
  * @returns {ProvideDecorator<InstanceType>} A property decorator function
  */
 export function provideContext<
@@ -98,6 +94,8 @@ export function provideContext<
  *
  * Note: Standard decorators currently don't work with @state()/@property()
  * decorators, which is why we still need the legacy branch.
+ * @param protoOrTarget
+ * @param context
  */
 function setupStandardDecorator<
 	BaseType extends UmbContextMinimal,
@@ -138,6 +136,9 @@ function setupStandardDecorator<
  * 1. addInitializer (if available, e.g., on LitElement classes)
  * 2. hostConnected wrapper (for UmbController classes)
  * 3. Warning (if neither is available)
+ * @param protoOrTarget
+ * @param propertyKey
+ * @param context
  */
 function setupLegacyDecorator<
 	BaseType extends UmbContextMinimal,

src/Umbraco.Web.UI.Client/src/libs/observable-api/states/array-state.ts

@@ -267,6 +267,7 @@ export class UmbArrayState<T, U = unknown> extends UmbDeepState<T[]> {
 	/**
 	 * @function replace
 	 * @param {Partial<T>} entires - data of entries to be replaced.
+	 * @param entries
 	 * @returns {UmbArrayState<T>} Reference to it self.
 	 * @description - Replaces one or more entries, requires the ArrayState to be constructed with a getUnique method.
 	 * @example <caption>Example append some data.</caption>

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/workspace/views/block-grid-type-workspace-view-areas.element.ts

@@ -22,7 +22,10 @@ export class UmbBlockGridTypeWorkspaceViewAreasElement extends UmbLitElement imp
 				await context?.propertyValueByAlias<undefined | string>('gridColumns'),
 				(value) => {
 					const dataTypeGridColumns = value ? parseInt(value, 10) : 12;
-					this._areaColumnsConfigurationObject = [{ alias: 'placeholder', value: dataTypeGridColumns }, { alias: 'min', value: 1 }];
+					this._areaColumnsConfigurationObject = [
+						{ alias: 'placeholder', value: dataTypeGridColumns },
+						{ alias: 'min', value: 1 },
+					];
 					this._areaConfigConfigurationObject = [{ alias: 'defaultAreaGridColumns', value: dataTypeGridColumns }];
 				},
 				'observeGridColumns',

src/Umbraco.Web.UI.Client/src/packages/block/block-single/property-editors/block-single-editor/Umbraco.SingleBlock.ts

@@ -1,8 +1,8 @@
-import type { ManifestPropertyEditorSchema } from '@umbraco-cms/backoffice/property-editor';
 import {
 	UMB_BLOCK_SINGLE_PROPERTY_EDITOR_SCHEMA_ALIAS,
 	UMB_BLOCK_SINGLE_PROPERTY_EDITOR_UI_ALIAS,
 } from './constants.js';
+import type { ManifestPropertyEditorSchema } from '@umbraco-cms/backoffice/property-editor';
 
 export const manifest: ManifestPropertyEditorSchema = {
 	type: 'propertyEditorSchema',

src/Umbraco.Web.UI.Client/src/packages/block/block-single/workspace/manifests.ts

@@ -1,6 +1,6 @@
+import { UMB_BLOCK_SINGLE_TYPE } from '../constants.js';
 import { manifests as workspaceViewManifests } from './views/manifests.js';
 import { UMB_BLOCK_SINGLE_TYPE_WORKSPACE_ALIAS } from './index.js';
-import { UMB_BLOCK_SINGLE_TYPE } from '../constants.js';
 
 export const manifests: Array<UmbExtensionManifest> = [
 	...workspaceViewManifests,

src/Umbraco.Web.UI.Client/src/packages/block/block-type/workspace/manifests.ts

@@ -1,8 +1,8 @@
 import { UMB_BLOCK_GRID_TYPE_WORKSPACE_ALIAS } from '../../block-grid/workspace/index.js';
 import { UMB_BLOCK_LIST_TYPE_WORKSPACE_ALIAS } from '../../block-list/workspace/index.js';
 import { UMB_BLOCK_RTE_TYPE_WORKSPACE_ALIAS } from '../../block-rte/workspace/index.js';
-import { UMB_WORKSPACE_CONDITION_ALIAS, UmbSubmitWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
 import { UMB_BLOCK_SINGLE_TYPE_WORKSPACE_ALIAS } from '../../block-single/index.js';
+import { UMB_WORKSPACE_CONDITION_ALIAS, UmbSubmitWorkspaceAction } from '@umbraco-cms/backoffice/workspace';
 
 export const manifests: Array<UmbExtensionManifest> = [
 	{

src/Umbraco.Web.UI.Client/src/packages/content/content-type/workspace/views/design/content-type-design-editor-tab.element.ts

@@ -6,9 +6,9 @@ import type {
 } from '../../../types.js';
 import { UmbContentTypeContainerStructureHelper } from '../../../structure/index.js';
 import type { UmbContentTypeWorkspaceViewEditGroupElement } from './content-type-design-editor-group.element.js';
+import { UMB_CONTENT_TYPE_DESIGN_EDITOR_CONTEXT } from './content-type-design-editor.context-token.js';
 import { css, customElement, html, nothing, property, repeat, state } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import { UMB_CONTENT_TYPE_DESIGN_EDITOR_CONTEXT } from './content-type-design-editor.context-token.js';
 import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router';
 import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
 import { UMB_WORKSPACE_MODAL } from '@umbraco-cms/backoffice/workspace';

src/Umbraco.Web.UI.Client/src/packages/core/components/split-panel/split-panel.element.ts

@@ -91,17 +91,17 @@ export class UmbSplitPanelElement extends UmbLitElement {
 	}
 
 	#setPosition(pos: number) {
-    const { width } = this.mainElement.getBoundingClientRect();
-    const localPos = clamp(pos, 0, width);
-    const percentagePos = (localPos / width) * 100;
-    this.position = percentagePos + '%';
-    
-	// Update ARIA value for divider
-    const formatted = percentagePos.toFixed(0);
-    const ariaText = this.localize?.term('general_dividerPosition', [formatted]) ?? `Divider at ${formatted}%`;
-
-    this.dividerTouchAreaElement.setAttribute('aria-valuetext', ariaText);
-}
+		const { width } = this.mainElement.getBoundingClientRect();
+		const localPos = clamp(pos, 0, width);
+		const percentagePos = (localPos / width) * 100;
+		this.position = percentagePos + '%';
+
+		// Update ARIA value for divider
+		const formatted = percentagePos.toFixed(0);
+		const ariaText = this.localize?.term('general_dividerPosition', [formatted]) ?? `Divider at ${formatted}%`;
+
+		this.dividerTouchAreaElement.setAttribute('aria-valuetext', ariaText);
+	}
 
 	#updateSplit() {
 		// If lock is none

src/Umbraco.Web.UI.Client/src/packages/core/entity-sign/kinds/icon/entity-sign-icon.element.ts

@@ -1,7 +1,7 @@
+import type { UmbEntitySignElement } from '../../types.js';
 import type { ManifestEntitySignIconKind } from './types.js';
 import { css, customElement, html, nothing, property } from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import type { UmbEntitySignElement } from '../../types.js';
 
 @customElement('umb-entity-sign-icon')
 export class UmbEntitySignIconElement extends UmbLitElement implements UmbEntitySignElement {

src/Umbraco.Web.UI.Client/src/packages/core/icon-registry/icon-picker-modal/icon-picker-modal.element.ts

@@ -87,18 +87,16 @@ export class UmbIconPickerModalElement extends UmbModalBaseElement<UmbIconPicker
 						value=${ifDefined(this.value.color)}
 						label=${this.localize.term('defaultdialogs_colorSwitcher')}
 						@change=${this.#onColorChange}>
-						${
-							this._colorList.map(
-								(color) => html`
-									<uui-color-swatch
-										label=${this.localize.term('colors_' + toCamelCase(color.alias))}
-										title=${this.localize.term('colors_' + toCamelCase(color.alias))}
-										value=${color.alias}
-										style="--uui-swatch-color: var(${color.varName})">
-									</uui-color-swatch>
-								`,
-							)
-						}
+						${this._colorList.map(
+							(color) => html`
+								<uui-color-swatch
+									label=${this.localize.term('colors_' + toCamelCase(color.alias))}
+									title=${this.localize.term('colors_' + toCamelCase(color.alias))}
+									value=${color.alias}
+									style="--uui-swatch-color: var(${color.varName})">
+								</uui-color-swatch>
+							`,
+						)}
 					</uui-color-swatches>
 					<hr />
 					<uui-scroll-container id="icons">

src/Umbraco.Web.UI.Client/src/packages/core/property-editor-data-source/collection/data/types.ts

@@ -9,12 +9,10 @@ export type UmbLanguageCollectionDataSource = UmbCollectionDataSource<
 	UmbPropertyEditorDataSourceCollectionFilterModel
 >;
 
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface UmbPropertyEditorDataSourceCollectionItemModel extends UmbCollectionItemModel {
 	unique: string;
 }
 
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
 export interface UmbPropertyEditorDataSourceCollectionFilterModel extends UmbCollectionFilterModel {
 	dataSourceTypes?: Array<string>;
 }

src/Umbraco.Web.UI.Client/src/packages/core/tree/components/tree-load-prev-button.element.ts

@@ -1,5 +1,5 @@
-import { css, customElement } from '@umbraco-cms/backoffice/external/lit';
 import { UmbTreeLoadMoreButtonElement } from './tree-load-more-button.element.js';
+import { css, customElement } from '@umbraco-cms/backoffice/external/lit';
 
 @customElement('umb-tree-load-prev-button')
 export class UmbTreeLoadPrevButtonElement extends UmbTreeLoadMoreButtonElement {

src/Umbraco.Web.UI.Client/src/packages/core/tree/tree.context.interface.ts

@@ -1,11 +1,11 @@
 import type { ManifestTree, UmbTreeItemModel, UmbTreeRootModel, UmbTreeStartNode } from './types.js';
-import type { Observable } from '@umbraco-cms/backoffice/observable-api';
-import type { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
 import type { UmbTreeExpansionManager } from './expansion-manager/index.js';
 import type { UmbTreeExpansionModel } from './expansion-manager/types.js';
 import type { UmbTreeItemActiveManager } from './active-manager/tree-active-manager.js';
 import type { UmbTreeRepository } from './data/tree-repository.interface.js';
 import type { UmbTreeRootItemsRequestArgs } from './data/types.js';
+import type { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
+import type { Observable } from '@umbraco-cms/backoffice/observable-api';
 import type {
 	UmbPaginationManager,
 	UmbSelectionManager,

src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-actions/create/document-create-options-modal.element.ts

@@ -43,6 +43,9 @@ export class UmbDocumentCreateOptionsModalElement extends UmbModalBaseElement<
 	@state()
 	private _availableBlueprints: Array<UmbDocumentBlueprintItemBaseModel> = [];
 
+	@state()
+	private _loading = true;
+
 	override async firstUpdated() {
 		const parentUnique = this.data?.parent.unique;
 		const documentTypeUnique = this.data?.documentType?.unique || null;
@@ -61,6 +64,7 @@ export class UmbDocumentCreateOptionsModalElement extends UmbModalBaseElement<
 			// TODO: implement pagination, or get 1000?
 			this._allowedDocumentTypes = data.items;
 		}
+		this._loading = false;
 	}
 
 	async #retrieveHeadline(parentUnique: string) {
@@ -166,6 +170,9 @@ export class UmbDocumentCreateOptionsModalElement extends UmbModalBaseElement<
 	}
 
 	#renderDocumentTypes() {
+		if (this._loading) {
+			return html`<div id="loader"><uui-loader></uui-loader></div>`;
+		}
 		return when(
 			this._allowedDocumentTypes.length === 0,
 			() => this.#renderNoDocumentTypes(),
@@ -219,6 +226,12 @@ export class UmbDocumentCreateOptionsModalElement extends UmbModalBaseElement<
 			#edit-permissions {
 				margin-top: var(--uui-size-6);
 			}
+
+			#loader {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
 		`,
 	];
 }

src/Umbraco.Web.UI.Client/src/packages/documents/documents/entity-bulk-actions/move-to/manifests.ts

@@ -1,10 +1,10 @@
-import { UMB_ENTITY_IS_NOT_TRASHED_CONDITION_ALIAS } from '@umbraco-cms/backoffice/recycle-bin';
 import { UMB_DOCUMENT_COLLECTION_ALIAS } from '../../collection/constants.js';
 import { UMB_DOCUMENT_ENTITY_TYPE } from '../../entity.js';
 import { UMB_DOCUMENT_TREE_ALIAS } from '../../tree/manifests.js';
 import { UMB_USER_PERMISSION_DOCUMENT_MOVE } from '../../user-permissions/document/constants.js';
 import { UMB_BULK_MOVE_DOCUMENT_REPOSITORY_ALIAS } from './repository/constants.js';
 import { manifests as repositoryManifests } from './repository/manifests.js';
+import { UMB_ENTITY_IS_NOT_TRASHED_CONDITION_ALIAS } from '@umbraco-cms/backoffice/recycle-bin';
 import { UMB_COLLECTION_ALIAS_CONDITION } from '@umbraco-cms/backoffice/collection';
 
 export const manifests: Array<UmbExtensionManifest> = [

src/Umbraco.Web.UI.Client/src/packages/documents/documents/item/document-item-data-resolver.ts

@@ -17,9 +17,18 @@ import type { UmbItemDataResolver } from '@umbraco-cms/backoffice/entity-item';
 
 type UmbDocumentItemDataResolverModel = Omit<UmbDocumentItemModel, 'parent' | 'hasChildren'>;
 
+/**
+ *
+ * @param variants
+ */
 function isVariantsInvariant(variants: Array<{ culture: string | null }>): boolean {
 	return variants?.[0]?.culture === null;
 }
+/**
+ *
+ * @param variants
+ * @param culture
+ */
 function findVariant<T extends { culture: string | null }>(variants: Array<T>, culture: string): T | undefined {
 	return variants.find((x) => x.culture === culture);
 }

src/Umbraco.Web.UI.Client/src/packages/media/media/entity-actions/create/media-create-options-modal.element.ts

@@ -22,6 +22,9 @@ export class UmbMediaCreateOptionsModalElement extends UmbModalBaseElement<
 	@state()
 	private _headline: string = this.localize.term('general_create');
 
+	@state()
+	private _loading = true;
+
 	override async firstUpdated() {
 		const mediaUnique = this.data?.parent.unique;
 		const mediaTypeUnique = this.data?.mediaType?.unique || null;
@@ -40,6 +43,7 @@ export class UmbMediaCreateOptionsModalElement extends UmbModalBaseElement<
 			// TODO: implement pagination, or get 1000?
 			this._allowedMediaTypes = data.items;
 		}
+		this._loading = false;
 	}
 
 	async #retrieveHeadline(unique: string) {
@@ -64,11 +68,13 @@ export class UmbMediaCreateOptionsModalElement extends UmbModalBaseElement<
 	override render() {
 		return html`
 			<uui-dialog-layout headline=${this._headline ?? ''}>
-				${when(
-					this._allowedMediaTypes.length === 0,
-					() => this.#renderNotAllowed(),
-					() => this.#renderAllowedMediaTypes(),
-				)}
+				${this._loading
+					? html`<div id="loader"><uui-loader></uui-loader></div>`
+					: when(
+							this._allowedMediaTypes.length === 0,
+							() => this.#renderNotAllowed(),
+							() => this.#renderAllowedMediaTypes(),
+						)}
 				<uui-button
 					slot="actions"
 					id="cancel"
@@ -117,6 +123,12 @@ export class UmbMediaCreateOptionsModalElement extends UmbModalBaseElement<
 			#edit-permissions {
 				margin-top: var(--uui-size-6);
 			}
+
+			#loader {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
 		`,
 	];
 }

src/Umbraco.Web.UI.Client/src/packages/media/media/recycle-bin/menu/manifests.ts

@@ -1,6 +1,6 @@
-import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_MEDIA_MENU_ALIAS, UMB_MEDIA_RECYCLE_BIN_TREE_ALIAS, UMB_MEDIA_WORKSPACE_ALIAS } from '../../constants.js';
 import { UMB_MEDIA_RECYCLE_BIN_MENU_ITEM_ALIAS } from './constants.js';
+import { UMB_WORKSPACE_CONDITION_ALIAS } from '@umbraco-cms/backoffice/workspace';
 import { UMB_ENTITY_IS_TRASHED_CONDITION_ALIAS } from '@umbraco-cms/backoffice/recycle-bin';
 
 export const manifests: Array<UmbExtensionManifest> = [

src/Umbraco.Web.UI.Client/src/packages/preview/preview-apps/preview-device.element.ts

@@ -1,6 +1,15 @@
 import { UMB_PREVIEW_CONTEXT } from '../context/preview.context-token.js';
 import type { UmbPopoverToggleEvent } from './types.js';
-import { css, customElement, html, ifDefined, property, query, repeat, state } from '@umbraco-cms/backoffice/external/lit';
+import {
+	css,
+	customElement,
+	html,
+	ifDefined,
+	property,
+	query,
+	repeat,
+	state,
+} from '@umbraco-cms/backoffice/external/lit';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
 import type { UUIPopoverContainerElement } from '@umbraco-cms/backoffice/external/uui';
 

src/Umbraco.Web.UI.Client/src/packages/preview/preview-apps/preview-environments.element.ts

@@ -1,10 +1,10 @@
 import { UmbPreviewRepository } from '../repository/preview.repository.js';
 import { UMB_PREVIEW_CONTEXT } from '../context/preview.context-token.js';
+import type { UmbPopoverToggleEvent } from './types.js';
 import { css, customElement, html, nothing, repeat, state } from '@umbraco-cms/backoffice/external/lit';
 import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
 import { umbPeekError } from '@umbraco-cms/backoffice/notification';
 import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
-import type { UmbPopoverToggleEvent } from './types.js';
 
 type UmbPreviewEnvironmentItem = {
 	alias: string;