From c6af8bdafe3985a4a444ddd3b5b000ebb12d557b Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 24 Feb 2024 13:36:33 -0800
Subject: [PATCH] docs(image-loader): add "Dynamic image source" example

---
 docs/src/pages/components/ImageLoader.svx     |  8 +++++-
 .../ImageLoader/DynamicImageLoader.svelte     | 25 +++++++++++++++++++
 2 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 docs/src/pages/framed/ImageLoader/DynamicImageLoader.svelte

diff --git a/docs/src/pages/components/ImageLoader.svx b/docs/src/pages/components/ImageLoader.svx
index bf5f0717..f332849c 100644
--- a/docs/src/pages/components/ImageLoader.svx
+++ b/docs/src/pages/components/ImageLoader.svx
@@ -43,4 +43,10 @@ Set `fadeIn` to `true` to fade in the image if successfully loaded.
 
 In this example, a component reference is obtained to programmatically trigger the `loadImage` method.
 
-<FileSource src="/framed/ImageLoader/ProgrammaticImageLoader" />
\ No newline at end of file
+<FileSource src="/framed/ImageLoader/ProgrammaticImageLoader" />
+
+## Dynamic image source
+
+The same `ImageLoader` instance can be used to load different images.
+
+<FileSource src="/framed/ImageLoader/DynamicImageLoader" />
diff --git a/docs/src/pages/framed/ImageLoader/DynamicImageLoader.svelte b/docs/src/pages/framed/ImageLoader/DynamicImageLoader.svelte
new file mode 100644
index 00000000..134bd3b6
--- /dev/null
+++ b/docs/src/pages/framed/ImageLoader/DynamicImageLoader.svelte
@@ -0,0 +1,25 @@
+<script>
+  import { ImageLoader, Button } from "carbon-components-svelte";
+
+  const images = [
+    "https://upload.wikimedia.org/wikipedia/commons/1/1b/Svelte_Logo.svg",
+    "https://upload.wikimedia.org/wikipedia/commons/b/b9/Carbon-design-system-logo.png",
+  ];
+
+  let index = 0;
+
+  $: src = images[index];
+</script>
+
+<Button
+  kind="ghost"
+  on:click="{() => {
+    index = index === 0 ? 1 : 0;
+  }}"
+>
+  Toggle image
+</Button>
+
+<div style:margin-top="1rem" style:width="100%" style:max-width="120px">
+  <ImageLoader ratio="1x1" fadeIn src="{src}" alt="{src}" />
+</div>