From a568d8754ad56969a196111a0e06509c601bbc31 Mon Sep 17 00:00:00 2001
From: Micheal Parks <103450731+micheal-parks@users.noreply.github.com>
Date: Thu, 18 Apr 2024 12:35:30 -0400
Subject: [PATCH] Add loading process indicator option to button (#508)

---
 packages/core/package.json                    |  2 +-
 packages/core/src/lib/button/button.svelte    | 15 +++++++++-
 packages/core/src/lib/button/progress.svelte  | 28 +++++++++++++++++++
 packages/core/src/routes/+page.svelte         |  2 ++
 packages/storybook/src/stories/button.mdx     |  4 +++
 .../src/stories/button.stories.svelte         |  4 +++
 6 files changed, 53 insertions(+), 2 deletions(-)
 create mode 100644 packages/core/src/lib/button/progress.svelte

diff --git a/packages/core/package.json b/packages/core/package.json
index 42175a79..c9fb0cc9 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@viamrobotics/prime-core",
-  "version": "0.0.110",
+  "version": "0.0.111",
   "publishConfig": {
     "access": "public"
   },
diff --git a/packages/core/src/lib/button/button.svelte b/packages/core/src/lib/button/button.svelte
index 0ca77042..8f6e8796 100644
--- a/packages/core/src/lib/button/button.svelte
+++ b/packages/core/src/lib/button/button.svelte
@@ -13,6 +13,7 @@ For user triggered actions.
 import cx from 'classnames';
 import { Icon, type IconName } from '$lib';
 import { preventHandler } from '$lib/prevent-handler';
+import Progress from './progress.svelte';
 
 /** Whether or not the button accepts clicks. */
 export let disabled = false;
@@ -40,6 +41,9 @@ export let icon: IconName | undefined = undefined;
 /** The width of the button. */
 export let width: 'full' | 'default' = 'default';
 
+/** Shows progress indicator. Determinite progress is a @TODO */
+export let progress: 'indeterminate' | number | undefined = undefined;
+
 /** Additional CSS classes to pass to the button. */
 let extraClasses: cx.Argument = '';
 export { extraClasses as cx };
@@ -79,7 +83,16 @@ $: handleDisabled = preventHandler(disabled);
   on:click
   on:click|capture={handleDisabled}
 >
-  {#if icon}
+  {#if progress}
+    <span
+      class={cx({
+        'text-gray-6': variant === 'primary' || variant === 'ghost',
+        'text-gray-4': disabled,
+      })}
+    >
+      <Progress />
+    </span>
+  {:else if icon}
     <span
       class={cx({
         'text-gray-6': variant === 'primary' || variant === 'ghost',
diff --git a/packages/core/src/lib/button/progress.svelte b/packages/core/src/lib/button/progress.svelte
new file mode 100644
index 00000000..e831b210
--- /dev/null
+++ b/packages/core/src/lib/button/progress.svelte
@@ -0,0 +1,28 @@
+<!-- @TODO(mp) Rip this out and make it our canonical loader. -->
+<div class="container -ml-1 flex w-4 items-center p-[1.5px]">
+  {#each { length: 8 } as _, index}
+    <div
+      style="
+        transform: rotate({index * 45}deg);
+        animation-delay: {index * 100}ms;
+      "
+      class="pill absolute -mt-[0.5px] h-px w-[3px] rounded-[1px] bg-gray-8"
+    />
+  {/each}
+</div>
+
+<style>
+.pill {
+  transform-origin: 6.5px 0.5px;
+  animation: 0.8s linear 0s infinite fadeout;
+}
+
+@keyframes fadeout {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.2;
+  }
+}
+</style>
diff --git a/packages/core/src/routes/+page.svelte b/packages/core/src/routes/+page.svelte
index 5b7448b3..b1508a9f 100644
--- a/packages/core/src/routes/+page.svelte
+++ b/packages/core/src/routes/+page.svelte
@@ -559,6 +559,8 @@ const onHoverDelayMsInput = (event: Event) => {
       Disabled
     </Button>
 
+    <Button progress="indeterminate">Loading</Button>
+
     <Button
       variant="dark"
       icon="magnify">Dark</Button
diff --git a/packages/storybook/src/stories/button.mdx b/packages/storybook/src/stories/button.mdx
index cb49c9be..c561a82f 100644
--- a/packages/storybook/src/stories/button.mdx
+++ b/packages/storybook/src/stories/button.mdx
@@ -58,3 +58,7 @@ import { Button } from '@viamrobotics/prime-core';
 <Canvas>
   <Story of={ButtonStories.IconVariant} />
 </Canvas>
+
+<Canvas>
+  <Story of={ButtonStories.Progress} />
+</Canvas>
diff --git a/packages/storybook/src/stories/button.stories.svelte b/packages/storybook/src/stories/button.stories.svelte
index 8fa6e3c6..79e7b337 100644
--- a/packages/storybook/src/stories/button.stories.svelte
+++ b/packages/storybook/src/stories/button.stories.svelte
@@ -65,3 +65,7 @@ import { Button } from '@viamrobotics/prime-core';
     Delete component
   </Button>
 </Story>
+
+<Story name="Progress">
+  <Button progress="indeterminate">Loading...</Button>
+</Story>