<script>
    import { ImageLoader, Button, InlineLoading } from "carbon-components-svelte";
    import Preview from "../../components/Preview.svelte";

    let key = 0;
</script>

The `ImageLoader` component provides a robust way to load images with built-in
loading and error states. It uses the [Image API](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image)
to handle image loading programmatically. The component supports aspect ratios,
fade-in animations, and custom loading/error states.

## Default

Load an image with the default configuration. The component handles the loading
process automatically.

<ImageLoader src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg" />

## Slots

Customize the loading and error states using named slots. This example shows how
to display a loading indicator and error message.

<ImageLoader src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg">
    <svelte:fragment slot="loading">
        <InlineLoading />
    </svelte:fragment>
    <svelte:fragment slot="error">
        An error occurred.
    </svelte:fragment>
</ImageLoader>

## With aspect ratio

Maintain consistent image dimensions using aspect ratios. The component uses
[AspectRatio](/components/AspectRatio) to constrain the image.

Supported aspect ratios include `"2x1"`, `"2x3"`, `"16x9"`, `"4x3"`, `"1x1"`,
`"3x4"`, `"3x2"`, `"9x16"` and `"1x2"`.
  
<ImageLoader ratio="16x9" src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg" />

## Fade in

Enable a smooth fade-in animation when the image loads successfully. This provides
a better user experience for image loading.

<Button kind="ghost" on:click="{() => { key++;}}">Reload image</Button>
{#key key}<ImageLoader fadeIn ratio="16x9" src="https://upload.wikimedia.org/wikipedia/commons/5/51/IBM_logo.svg" />{/key}

## Programmatic usage

Control image loading programmatically using component references. This example
demonstrates how to trigger image loading manually.

<FileSource src="/framed/ImageLoader/ProgrammaticImageLoader" />

## Dynamic image source

Update the image source dynamically using the same `ImageLoader` instance. This
allows for smooth transitions between different images.

<FileSource src="/framed/ImageLoader/DynamicImageLoader" />
