Performance: Batch backoffice media thumbnail URL requests to reduce N+1 API calls

[AndyButland]

Description

When rendering media in a collection view or picker grid, each umb-imaging-thumbnail component was making an individual HTTP request to /imaging/resize/urls for its resize URL — one per media item on the page (N+1 problem).

To resolve this I've introduced a client-side request batcher (imaging-request-batcher.ts) that collects all thumbnail URL requests arriving within the same event loop turn and combines them into a single batched API call, with chunking at 40 IDs to respect URL length limits.

No server-side changes were needed as the existing ResizeImagingController already accepts multiple IDs.

Testing

Automated

Unit tests have been added for the request batcher component.

Manual

• Ensure you have a media folder with a selection of images.
• Open browser DevTools → Network tab, filter by urls?
• Navigate to the media folder in the backoffice (either via the Media section tree or a media picker modal).
• Confirm you see 1 request to /imaging/resize/urls (with multiple id query params) rather than an individual request for each image.
• Navigate away and back to the same page of media, and verify there is no network call.

[Copilot]

Pull request overview

This PR addresses an N+1 network request pattern in the backoffice media thumbnail rendering by batching /imaging/resize/urls requests client-side, reducing many per-thumbnail calls into a single (chunked) call per event loop turn.

Changes:

• Updated UmbImagingRepository.requestResizedItems() to route cache-miss thumbnail URL lookups through a shared request batcher.
• Added a new imaging-request-batcher.ts utility to coalesce same-turn requests and chunk large batches (40 IDs).
• Added unit tests for the batcher behavior.

Reviewed changes

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

File	Description
src/Umbraco.Web.UI.Client/src/packages/media/imaging/imaging.repository.ts	Uses the batcher for uncached uniques and populates the in-memory crop cache from resolved results.
src/Umbraco.Web.UI.Client/src/packages/media/imaging/imaging-request-batcher.ts	Implements the batching + chunking mechanism and resolves/rejects per-unique promises.
src/Umbraco.Web.UI.Client/src/packages/media/imaging/imaging-request-batcher.test.ts	Adds tests validating batching, deduping, model separation, chunking, and error propagation.

[iOvergaard]

Update: Additional optimizations in follow-up commits

Beyond the original request batching, two further optimizations were made:

1. Removed blocking await this.#init — Replaced the consumeContext(...).asPromise() + await pattern with the @consumeContext decorator. The imaging store is now consumed opportunistically rather than blocking. This eliminated the async gap that was splitting Lit's render cycle into multiple passes, allowing all thumbnails to be collected into a single batched request.

2. Moved the URL cache into the batcher module — The batcher now owns a module-level URL cache, replacing the context-based UmbImagingStore for caching. This removes all context-request events from the thumbnail hot path (previously N events per N thumbnails). The repository is now a thin facade over the batcher with no context dependencies. UmbImagingStore is deprecated (removal in v19) and clearImagingCache() is exported for cache invalidation. UmbMediaDetailRepository uses it directly on save/delete instead of instantiating an imaging repository.

Items with no URL (non-image media like PDFs) are now cached as empty strings to prevent unnecessary re-fetching — matching the previous store behavior.