feat: adaptive progressive image loading for photo viewer (#26636)

* feat(web): adaptive progressive image loading for photo viewer

Replace ImageManager with a new AdaptiveImageLoader that progressively
loads images through quality tiers (thumbnail → preview → original).

New components and utilities:
- AdaptiveImage: layered image renderer with thumbhash, thumbnail,
  preview, and original layers with visibility managed by load state
- AdaptiveImageLoader: state machine driving the quality progression
  with per-quality callbacks and error handling
- ImageLayer/Image: low-level image elements with load/error lifecycle
- PreloadManager: preloads adjacent assets for instant navigation
- AlphaBackground/DelayedLoadingSpinner: loading state UI

Zoom is handled via a derived CSS transform applied to the content
wrapper in AdaptiveImage, with the zoom library (zoomTarget: null)
only tracking state without manipulating the DOM directly.

Also adds scaleToCover to container-utils and getAssetUrls to utils.

* fix: don't partially render images in firefox

* add passive loading indicator to asset-viewer

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>
This commit is contained in:
Min Idzelis
2026-03-11 10:48:46 -04:00
committed by GitHub
parent 27f69b39b2
commit 8764a1894b
25 changed files with 1340 additions and 416 deletions
@@ -0,0 +1,20 @@
<script lang="ts">
import { LoadingSpinner } from '@immich/ui';
</script>
<div class="delayed-spinner absolute flex h-full items-center justify-center">
<LoadingSpinner />
</div>
<style>
@keyframes delayedVisibility {
to {
visibility: visible;
}
}
.delayed-spinner {
visibility: hidden;
animation: 0s linear 0.4s forwards delayedVisibility;
}
</style>