Collection: prevent multiple load calls within a very short time

src/Umbraco.Web.UI.Client/src/packages/core/collection/default/collection-default.context.ts

@@ -15,7 +15,7 @@ import { UmbArrayState, UmbBasicState, UmbNumberState, UmbObjectState } from '@u
 import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
 import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
 import { UmbExtensionApiInitializer } from '@umbraco-cms/backoffice/extension-api';
-import { UmbSelectionManager, UmbPaginationManager, UmbDeprecation } from '@umbraco-cms/backoffice/utils';
+import { UmbSelectionManager, UmbPaginationManager, UmbDeprecation, debounce } from '@umbraco-cms/backoffice/utils';
 import type { ManifestRepository } from '@umbraco-cms/backoffice/extension-registry';
 import type { UmbApi } from '@umbraco-cms/backoffice/extension-api';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
@@ -121,11 +121,11 @@ export class UmbDefaultCollectionContext<
 			})
 			.onReject(() => {
 				// TODO: Maybe this can be removed?
-				this.requestCollection();
+				this._requestCollection();
 			})
 			.onSubmit(() => {
 				// TODO: Maybe this can be removed?
-				this.requestCollection();
+				this._requestCollection();
 			})
 			.observeRouteBuilder((routeBuilder) => {
 				this.#workspacePathBuilder.setValue(routeBuilder);
@@ -248,16 +248,30 @@ export class UmbDefaultCollectionContext<
 		return this.manifest?.meta.noItemsLabel ?? this.#config?.noItemsLabel ?? '#collection_noItemsTitle';
 	}
 
+	/* debouncing the load collection method because multiple filters can be set at the same time
+	that will trigger multiple load calls with different filters args */
+	public loadCollection = debounce(() => this._requestCollection(), 100);
+
 	/**
 	 * Requests the collection from the repository.
-	 * @returns {*}
+	 * @returns {Promise<void>}
+	 * @deprecated Deprecated since v.17.0.0. Use `loadCollection` instead.
 	 * @memberof UmbCollectionContext
 	 */
 	public async requestCollection() {
+		new UmbDeprecation({
+			removeInVersion: '19.0.0',
+			deprecated: 'requestCollection',
+			solution: 'Use .loadCollection method instead',
+		}).warn();
+
+		return this._requestCollection();
+	}
+
+	protected async _requestCollection() {
 		await this._init;
 
 		if (!this._configured) this._configure();
-
 		if (!this._repository) throw new Error(`Missing repository for ${this._manifest}`);
 
 		this._loading.setValue(true);
@@ -281,7 +295,7 @@ export class UmbDefaultCollectionContext<
 	 */
 	public setFilter(filter: Partial<FilterModelType>) {
 		this._filter.setValue({ ...this._filter.getValue(), ...filter });
-		this.requestCollection();
+		this.loadCollection();
 	}
 
 	public updateFilter(filter: Partial<FilterModelType>) {
@@ -312,7 +326,7 @@ export class UmbDefaultCollectionContext<
 		const items = this._items.getValue();
 		const hasItem = items.some((item) => item.unique === event.getUnique());
 		if (hasItem) {
-			this.requestCollection();
+			this._requestCollection();
 		}
 	};
 
@@ -324,7 +338,7 @@ export class UmbDefaultCollectionContext<
 		const entityType = entityContext.getEntityType();
 
 		if (unique === event.getUnique() && entityType === event.getEntityType()) {
-			this.requestCollection();
+			this._requestCollection();
 		}
 	};
 

src/Umbraco.Web.UI.Client/src/packages/core/collection/default/collection-default.element.ts

@@ -45,7 +45,7 @@ export class UmbCollectionDefaultElement extends UmbLitElement {
 			this.#observeCollectionRoutes();
 			this.#observeTotalItems();
 			this.#getEmptyStateLabel();
-			await this.#collectionContext?.requestCollection();
+			this.#collectionContext?.loadCollection();
 			this._isDoneLoading = true;
 		});
 	}

src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/document-collection.context.ts

@@ -4,6 +4,7 @@ import { UmbDefaultCollectionContext } from '@umbraco-cms/backoffice/collection'
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UMB_VARIANT_CONTEXT } from '@umbraco-cms/backoffice/variant';
 import { UmbStringState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbDeprecation } from '@umbraco-cms/backoffice/utils';
 
 export class UmbDocumentCollectionContext extends UmbDefaultCollectionContext<
 	UmbDocumentCollectionItemModel,
@@ -35,9 +36,25 @@ export class UmbDocumentCollectionContext extends UmbDefaultCollectionContext<
 		);
 	}
 
-	public override async requestCollection() {
+	/**
+	 * Requests the collection from the repository.
+	 * @returns {Promise<void>}
+	 * @deprecated Deprecated since v.17.0.0. Use `loadCollection` instead.
+	 * @memberof UmbDocumentCollectionContext
+	 */
+	public override async requestCollection(): Promise<void> {
+		new UmbDeprecation({
+			removeInVersion: '19.0.0',
+			deprecated: 'requestCollection',
+			solution: 'Use .loadCollection method instead',
+		}).warn();
+
+		return this._requestCollection();
+	}
+
+	protected override async _requestCollection() {
 		await this.observe(this.#displayCultureObservable)?.asPromise();
-		await super.requestCollection();
+		await super._requestCollection();
 	}
 }
 

src/Umbraco.Web.UI.Client/src/packages/media/media/collection/media-collection.context.ts

@@ -5,6 +5,7 @@ import type { UmbFileDropzoneItemStatus } from '@umbraco-cms/backoffice/dropzone
 import { UmbDefaultCollectionContext } from '@umbraco-cms/backoffice/collection';
 import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
 import { UmbArrayState } from '@umbraco-cms/backoffice/observable-api';
+import { UmbDeprecation } from '@umbraco-cms/backoffice/utils';
 export class UmbMediaCollectionContext extends UmbDefaultCollectionContext<
 	UmbMediaCollectionItemModel,
 	UmbMediaCollectionFilterModel
@@ -51,9 +52,20 @@ export class UmbMediaCollectionContext extends UmbDefaultCollectionContext<
 	/**
 	 * Requests the collection from the repository.
 	 * @returns {Promise<void>}
-	 * @memberof UmbCollectionContext
+	 * @deprecated Deprecated since v.17.0.0. Use `loadCollection` instead.
+	 * @memberof UmbMediaCollectionContext
 	 */
-	public override async requestCollection() {
+	public override async requestCollection(): Promise<void> {
+		new UmbDeprecation({
+			removeInVersion: '19.0.0',
+			deprecated: 'requestCollection',
+			solution: 'Use .loadCollection method instead',
+		}).warn();
+
+		return this._requestCollection();
+	}
+
+	protected override async _requestCollection() {
 		await this._init;
 
 		if (!this._configured) this._configure();

src/Umbraco.Web.UI.Client/src/packages/media/media/collection/media-collection.element.ts

@@ -62,7 +62,6 @@ export class UmbMediaCollectionElement extends UmbCollectionDefaultElement {
 	async #onComplete(event: Event) {
 		event.preventDefault();
 		this._progress = -1;
-		this.#collectionContext?.requestCollection();
 
 		const eventContext = await this.getContext(UMB_ACTION_EVENT_CONTEXT);
 		if (!eventContext) {