Add loading process indicator option to button (viamrobotics#508)

micheal-parks · Apr 18, 2024 · a568d87 · a568d87
1 parent 2dbfe52
commit a568d87
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -65,3 +65,7 @@ import { Button } from '@viamrobotics/prime-core';
     Delete component
   </Button>
 </Story>
+
+<Story name="Progress">
+  <Button progress="indeterminate">Loading...</Button>
+</Story>