baobeld/benjaminpalko
1
0
Fork 0
Code Pull requests Packages 2 Activity Actions

transition

Browse source
This commit is contained in:
Benjamin Palko 2026-01-24 09:09:57 -05:00
parent 0872972858
commit 68c5fc73f4
1 changed files with 12 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/lib/components/Image.svelte
View file

@ -3,6 +3,7 @@
import clsx from 'clsx';
import { onMount } from 'svelte';
import type { ClassValue } from 'svelte/elements';
import { fade } from 'svelte/transition';
import { twMerge } from 'tailwind-merge';
interface Props {
@ -36,11 +37,20 @@
{#if loading}
<div class={twMerge('skeleton rounded-none', clsx(className))}></div>
{:else if failed}
<div class={twMerge('skeleton text-base-content relative rounded-none', clsx(className))}>
<div
class={twMerge('skeleton text-base-content relative rounded-none', clsx(className))}
transition:fade={{ duration: 250 }}
>
<ImageOff
class="absolute top-[50%] left-[50%] h-1/4 w-1/4 translate-x-[-50%] translate-y-[-50%] opacity-20"
/>
</div>
{:else}
<img class={clsx(className)} {src} {alt} onload={() => (loading = false)} />
<img
class={clsx(className)}
{src}
{alt}
onload={() => (loading = false)}
transition:fade={{ duration: 250 }}
/>
{/if}