From d7add290d9f930e9325058c3bdc73e922da95d52 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Thu, 22 Oct 2020 10:59:27 -0700
Subject: [PATCH] docs(inline-loading): add UX example

---
 docs/src/pages/components/InlineLoading.svx   |  6 ++-
 .../InlineLoading/InlineLoadingUx.svelte      | 50 +++++++++++++++++++
 2 files changed, 55 insertions(+), 1 deletion(-)
 create mode 100644 docs/src/pages/framed/InlineLoading/InlineLoadingUx.svelte

diff --git a/docs/src/pages/components/InlineLoading.svx b/docs/src/pages/components/InlineLoading.svx
index e4dbe5d4..549748d4 100644
--- a/docs/src/pages/components/InlineLoading.svx
+++ b/docs/src/pages/components/InlineLoading.svx
@@ -16,4 +16,8 @@
 <InlineLoading status="active" />
 <InlineLoading status="inactive" />
 <InlineLoading status="finished" />
-<InlineLoading status="error" />
\ No newline at end of file
+<InlineLoading status="error" />
+
+### UX example
+
+<FileSource src="/framed/InlineLoading/InlineLoadingUx" />
\ No newline at end of file
diff --git a/docs/src/pages/framed/InlineLoading/InlineLoadingUx.svelte b/docs/src/pages/framed/InlineLoading/InlineLoadingUx.svelte
new file mode 100644
index 00000000..8ab77f83
--- /dev/null
+++ b/docs/src/pages/framed/InlineLoading/InlineLoadingUx.svelte
@@ -0,0 +1,50 @@
+<script>
+  import { Button, ButtonSet, InlineLoading } from "carbon-components-svelte";
+  import { onDestroy } from "svelte";
+
+  const descriptionMap = {
+    active: "Submitting...",
+    finished: "Success",
+    inactive: "Cancelled",
+  };
+
+  const stateMap = {
+    active: "finished",
+    inactive: "dormant",
+    finished: "dormant",
+  };
+
+  let timeout = undefined;
+  let state = "dormant"; // "dormant" | "active" | "finished" | "inactive"
+
+  function reset(incomingState) {
+    if (typeof timeout === "number") {
+      clearTimeout(timeout);
+    }
+
+    if (incomingState) {
+      timeout = setTimeout(() => {
+        state = incomingState;
+      }, 2000);
+    }
+  }
+
+  onDestroy(reset);
+
+  $: reset(stateMap[state]);
+</script>
+
+<ButtonSet>
+  <Button
+    kind="ghost"
+    disabled="{state === 'dormant' || state === 'finished'}"
+    on:click="{() => (state = 'inactive')}"
+  >
+    Cancel
+  </Button>
+  {#if state !== 'dormant'}
+    <InlineLoading status="{state}" description="{descriptionMap[state]}" />
+  {:else}
+    <Button on:click="{() => (state = 'active')}">Submit</Button>
+  {/if}
+</ButtonSet>