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