helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-14 17:36:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

fix(web): viewport reactivity, off-screen thumbhashes being rendered (#15435)

Browse source 
* viewport optimizations

* fade in

* async bitmap

* fast path for smaller date groups

---------

Co-authored-by: Alex <alex.tran1502@gmail.com>
This commit is contained in:
Mert 2025-02-21 07:38:12 +03:00 • committed by GitHub
parent ac36effb45
commit 52f21fb331
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 183 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

4
web/src/lib/components/photos-page/asset-date-group.svelte
View file

@ -38,7 +38,7 @@
$: dateGroups = bucket.dateGroups;
const {
DATEGROUP: { INTERSECTION_ROOT_TOP, INTERSECTION_ROOT_BOTTOM },
DATEGROUP: { INTERSECTION_ROOT_TOP, INTERSECTION_ROOT_BOTTOM, SMALL_GROUP_THRESHOLD },
} = TUNABLES;
/* TODO figure out a way to calculate this*/
const TITLE_HEIGHT = 51;
@ -179,6 +179,7 @@
>
{#each dateGroup.assets as asset, index (asset.id)}
{@const box = dateGroup.geometry.boxes[index]}
{@const isSmallGroup = dateGroup.assets.length <= SMALL_GROUP_THRESHOLD}
<!-- update ASSET_GRID_PADDING-->
<div
use:intersectionObserver={{
@ -217,6 +218,7 @@
disabled={$assetStore.albumAssets.has(asset.id)}
thumbnailWidth={box.width}
thumbnailHeight={box.height}
eagerThumbhash={isSmallGroup}
/>
</div>
{/each}