beenull/immich
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Added 2-stage loading for album's thumbnail

Browse source
This commit is contained in:
Alex Tran 2022-07-26 22:06:06 -05:00
parent 03457f5d32
commit 59c1ea3097
No known key found for this signature in database
GPG key ID: E4954BC787B85C8A
1 changed files with 8 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
web/src/lib/components/album-page/album-card.svelte
View file

@ -10,12 +10,12 @@
let imageData: string = '/no-thumbnail.png';
const dispatch = createEventDispatcher();
const loadImageData = async (thubmnailId: string | null) => {
const loadHighQualityThumbnail = async (thubmnailId: string | null) => {
if (thubmnailId == null) {
return '/no-thumbnail.png';
}
const { data } = await api.assetApi.getAssetThumbnail(thubmnailId!, ThumbnailFormat.Webp, {
const { data } = await api.assetApi.getAssetThumbnail(thubmnailId!, ThumbnailFormat.Jpeg, {
responseType: 'blob'
});
if (data instanceof Blob) {
@ -50,15 +50,14 @@
</div>
<div class={`h-[275px] w-[275px] z-[-1]`}>
{#await loadImageData(album.albumThumbnailAssetId)}
<div
class={`bg-immich-primary/10 w-full h-full flex place-items-center place-content-center rounded-xl`}
>
...
</div>
{#await loadHighQualityThumbnail(album.albumThumbnailAssetId)}
<img
src={`/api/asset/thumbnail/${album.albumThumbnailAssetId}?format=${ThumbnailFormat.Webp}`}
alt={album.id}
class={`object-cover w-full h-full transition-all z-0 rounded-xl duration-300 hover:shadow-lg`}
/>
{:then imageData}
<img
in:fade={{ duration: 250 }}
src={imageData}
alt={album.id}
class={`object-cover w-full h-full transition-all z-0 rounded-xl duration-300 hover:shadow-lg`}