From 6d7c639a955c800be4367f9de2c72a255700266d Mon Sep 17 00:00:00 2001
From: Sven <fr.sven.fr@gmail.com>
Date: Tue, 5 Sep 2023 13:48:38 +0200
Subject: [PATCH] reuse loading spinner & small feedback

---
 .../components/wui-loading-spinner.stories.ts | 11 ++++-
 .../components/wui-loading-spinner/index.ts   |  6 ++-
 .../components/wui-loading-spinner/styles.ts  | 23 +++++++++-
 .../composites/wui-account-button/index.ts    |  2 +-
 .../composites/wui-connect-button/index.ts    | 10 ++--
 .../composites/wui-connect-button/styles.ts   | 46 ++++---------------
 6 files changed, 49 insertions(+), 49 deletions(-)

diff --git a/apps/gallery/stories/components/wui-loading-spinner.stories.ts b/apps/gallery/stories/components/wui-loading-spinner.stories.ts
index 198d8fd9b5..445a4936e8 100644
--- a/apps/gallery/stories/components/wui-loading-spinner.stories.ts
+++ b/apps/gallery/stories/components/wui-loading-spinner.stories.ts
@@ -9,9 +9,14 @@ type Component = Meta<WuiLoadingSpinner>
 export default {
   title: 'Components/wui-loading-spinner',
   args: {
-    color: 'accent-100'
+    color: 'accent-100',
+    size: 'lg'
   },
   argTypes: {
+    size: {
+      options: ['sm', 'md', 'lg'],
+      control: { type: 'select' }
+    },
     color: {
       options: colorOptions,
       control: { type: 'select' }
@@ -20,5 +25,7 @@ export default {
 } as Component
 
 export const Default: Component = {
-  render: args => html` <wui-loading-spinner color=${args.color}></wui-loading-spinner> `
+  render: args => html`
+    <wui-loading-spinner size=${args.size} color=${args.color}></wui-loading-spinner>
+  `
 }
diff --git a/packages/ui/src/components/wui-loading-spinner/index.ts b/packages/ui/src/components/wui-loading-spinner/index.ts
index cc3c591137..2843d68097 100644
--- a/packages/ui/src/components/wui-loading-spinner/index.ts
+++ b/packages/ui/src/components/wui-loading-spinner/index.ts
@@ -2,7 +2,7 @@ import { html, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { resetStyles } from '../../utils/ThemeUtil.js'
 import styles from './styles.js'
-import type { ColorType } from '../../utils/TypesUtil.js'
+import type { ColorType, SizeType } from '../../utils/TypesUtil.js'
 
 @customElement('wui-loading-spinner')
 export class WuiLoadingSpinner extends LitElement {
@@ -10,10 +10,14 @@ export class WuiLoadingSpinner extends LitElement {
 
   @property() public color: ColorType = 'accent-100'
 
+  @property() public size: Exclude<SizeType, 'inherit' | 'xs' | 'xxs'> = 'lg'
+
   // -- Render -------------------------------------------- //
   public override render() {
     this.style.cssText = `--local-color: var(--wui-color-${this.color});`
 
+    this.dataset['size'] = this.size
+
     return html`<svg viewBox="25 25 50 50">
       <circle r="20" cy="50" cx="50"></circle>
     </svg>`
diff --git a/packages/ui/src/components/wui-loading-spinner/styles.ts b/packages/ui/src/components/wui-loading-spinner/styles.ts
index a32a4d514d..aa769de8de 100644
--- a/packages/ui/src/components/wui-loading-spinner/styles.ts
+++ b/packages/ui/src/components/wui-loading-spinner/styles.ts
@@ -5,9 +5,22 @@ export default css`
     display: flex;
   }
 
-  svg {
+  :host([data-size='sm']) > svg {
+    width: 12px;
+    height: 12px;
+  }
+
+  :host([data-size='md']) > svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  :host([data-size='lg']) > svg {
     width: 24px;
     height: 24px;
+  }
+
+  svg {
     animation: rotate 2s linear infinite;
     transition: all var(--wui-ease-in-power-3) var(--wui-duration-lg);
   }
@@ -22,6 +35,14 @@ export default css`
     animation: dash 1.5s ease-in-out infinite;
   }
 
+  :host([data-size='md']) > svg > circle {
+    stroke-width: 6px;
+  }
+
+  :host([data-size='sm']) > svg > circle {
+    stroke-width: 8px;
+  }
+
   @keyframes rotate {
     100% {
       transform: rotate(360deg);
diff --git a/packages/ui/src/composites/wui-account-button/index.ts b/packages/ui/src/composites/wui-account-button/index.ts
index 2c5452ec39..f03f6cf4fa 100644
--- a/packages/ui/src/composites/wui-account-button/index.ts
+++ b/packages/ui/src/composites/wui-account-button/index.ts
@@ -29,7 +29,7 @@ export class WuiAccountButton extends LitElement {
     return html`
       <button ?disabled=${this.disabled}>
         ${this.balanceTemplate()}
-        <wui-flex gap="xxs" alignItems="center" class=${this.balance ? '' : 'noBalance'}>
+        <wui-flex gap="xxs" alignItems="center" class=${this.balance ? undefined : 'noBalance'}>
           <wui-avatar
             .imageSrc=${this.avatarSrc}
             alt=${this.address}
diff --git a/packages/ui/src/composites/wui-connect-button/index.ts b/packages/ui/src/composites/wui-connect-button/index.ts
index da261b46dc..d865699250 100644
--- a/packages/ui/src/composites/wui-connect-button/index.ts
+++ b/packages/ui/src/composites/wui-connect-button/index.ts
@@ -28,7 +28,7 @@ export class WuiConnectButton extends LitElement {
       <button
         data-size=${this.size}
         ?disabled=${this.disabled}
-        class=${this.loading ? 'loading' : ''}
+        class=${this.loading && 'loading'}
         ontouchstart
       >
         ${this.loadingTemplate()}
@@ -40,13 +40,11 @@ export class WuiConnectButton extends LitElement {
   }
 
   public loadingTemplate() {
-    if (this.loading) {
-      return html`<svg viewBox="25 25 50 50">
-        <circle r="20" cy="50" cx="50"></circle>
-      </svg>`
+    if (!this.loading) {
+      return null
     }
 
-    return html``
+    return html`<wui-loading-spinner size=${this.size} color="accent-100"></wui-loading-spinner>`
   }
 }
 
diff --git a/packages/ui/src/composites/wui-connect-button/styles.ts b/packages/ui/src/composites/wui-connect-button/styles.ts
index 8735f3fdad..5efc8cce91 100644
--- a/packages/ui/src/composites/wui-connect-button/styles.ts
+++ b/packages/ui/src/composites/wui-connect-button/styles.ts
@@ -69,52 +69,22 @@ export default css`
     padding-left: var(--wui-spacing-3xs);
   }
 
-  button.loading > wui-text,
-  button.loading > wui-loading-spinner {
+  button.loading > wui-text {
     color: var(--wui-color-accent-100);
   }
 
-  svg {
+  wui-loading-spinner {
     width: 14px;
     height: 14px;
-    animation: rotate 2s linear infinite;
-    transition: all var(--wui-ease-in-power-3) var(--wui-duration-lg);
   }
 
-  button[data-size='sm'] > svg {
-    width: 12px;
-    height: 12px;
-  }
-
-  circle {
-    fill: none;
-    stroke: var(--wui-color-accent-100);
-    stroke-width: 8px;
-    stroke-dasharray: 1, 124;
-    stroke-dashoffset: 0;
-    stroke-linecap: round;
-    animation: dash 1.5s ease-in-out infinite;
-  }
-
-  @keyframes rotate {
-    100% {
-      transform: rotate(360deg);
-    }
+  wui-loading-spinner::slotted(svg) {
+    width: 10px !important;
+    height: 10px !important;
   }
 
-  @keyframes dash {
-    0% {
-      stroke-dasharray: 1, 124;
-      stroke-dashoffset: 0;
-    }
-
-    50% {
-      stroke-dasharray: 90, 124;
-      stroke-dashoffset: -35;
-    }
-
-    100% {
-      stroke-dashoffset: -125;
-    }
+  button[data-size='sm'] > wui-loading-spinner {
+    width: 12px;
+    height: 12px;
   }
 `