From 6bf3bebb4066e47a939c65b7e95476cc08e2075d Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Fri, 12 Jul 2024 21:51:10 +0800
Subject: [PATCH] feat(experience): support loading state for buttons (#6232)

---
 .../src/assets/icons/loading-ring.svg         |  3 ++
 .../Button/RotatingRingIcon.module.scss       | 14 ++++++++
 .../components/Button/RotatingRingIcon.tsx    |  7 ++++
 .../Button/SocialLinkButton.module.scss       |  9 +++++
 .../components/Button/SocialLinkButton.tsx    | 24 +++++++++++--
 .../src/components/Button/index.module.scss   | 34 +++++++++++++++----
 .../src/components/Button/index.tsx           | 22 +++++++++---
 packages/experience/src/scss/_colors.scss     |  1 +
 8 files changed, 101 insertions(+), 13 deletions(-)
 create mode 100644 packages/experience/src/assets/icons/loading-ring.svg
 create mode 100644 packages/experience/src/components/Button/RotatingRingIcon.module.scss
 create mode 100644 packages/experience/src/components/Button/RotatingRingIcon.tsx

diff --git a/packages/experience/src/assets/icons/loading-ring.svg b/packages/experience/src/assets/icons/loading-ring.svg
new file mode 100644
index 000000000..6e05dc9be
--- /dev/null
+++ b/packages/experience/src/assets/icons/loading-ring.svg
@@ -0,0 +1,3 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.8357 16.8714C11.941 17.4135 11.5865 17.9451 11.0355 17.9821C9.9048 18.0579 8.7669 17.8929 7.69834 17.4934C6.31639 16.9767 5.10425 16.0879 4.19591 14.9253C3.28758 13.7627 2.71844 12.3715 2.55143 10.9056C2.38441 9.43973 2.62602 7.9562 3.24954 6.61905C3.87306 5.28191 4.85421 4.14323 6.0845 3.32891C7.3148 2.5146 8.74632 2.05636 10.2208 2.00487C11.6953 1.95338 13.1553 2.31064 14.4394 3.03715C15.4323 3.59891 16.2901 4.36452 16.9588 5.27942C17.2847 5.72531 17.1054 6.33858 16.6223 6.60633C16.1393 6.87408 15.5366 6.69278 15.1924 6.26086C14.7154 5.66218 14.1262 5.15785 13.4545 4.77787C12.4915 4.23298 11.3965 3.96504 10.2906 4.00366C9.18474 4.04227 8.1111 4.38595 7.18838 4.99669C6.26565 5.60742 5.52979 6.46143 5.06215 7.46429C4.59451 8.46715 4.41331 9.5798 4.53857 10.6792C4.66383 11.7786 5.09069 12.822 5.77194 13.694C6.45319 14.5659 7.3623 15.2325 8.39876 15.62C9.12154 15.8903 9.88663 16.0175 10.6519 15.9981C11.204 15.9841 11.7303 16.3293 11.8357 16.8714Z" fill="currentColor"/>
+</svg>
diff --git a/packages/experience/src/components/Button/RotatingRingIcon.module.scss b/packages/experience/src/components/Button/RotatingRingIcon.module.scss
new file mode 100644
index 000000000..a2af2a979
--- /dev/null
+++ b/packages/experience/src/components/Button/RotatingRingIcon.module.scss
@@ -0,0 +1,14 @@
+.icon {
+  animation: rotating 1s linear infinite;
+}
+
+
+@keyframes rotating {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/packages/experience/src/components/Button/RotatingRingIcon.tsx b/packages/experience/src/components/Button/RotatingRingIcon.tsx
new file mode 100644
index 000000000..ef29529fe
--- /dev/null
+++ b/packages/experience/src/components/Button/RotatingRingIcon.tsx
@@ -0,0 +1,7 @@
+import Ring from '@/assets/icons/loading-ring.svg';
+
+import * as RotatingRingIconStyles from './RotatingRingIcon.module.scss';
+
+const RotatingRingIcon = () => <Ring className={RotatingRingIconStyles.icon} />;
+
+export default RotatingRingIcon;
diff --git a/packages/experience/src/components/Button/SocialLinkButton.module.scss b/packages/experience/src/components/Button/SocialLinkButton.module.scss
index aeb4c59da..8ae94cfe7 100644
--- a/packages/experience/src/components/Button/SocialLinkButton.module.scss
+++ b/packages/experience/src/components/Button/SocialLinkButton.module.scss
@@ -12,6 +12,15 @@
   overflow: hidden;
 }
 
+.loadingIcon {
+  display: block;
+  // To avoid the layout shift, add padding manually (keep the same size as the icon)
+  padding: 0 1.5px;
+  color: var(--color-brand-70);
+  font-size: 0;
+  line-height: normal;
+}
+
 .name {
   flex: 1;
   overflow: hidden;
diff --git a/packages/experience/src/components/Button/SocialLinkButton.tsx b/packages/experience/src/components/Button/SocialLinkButton.tsx
index 0b732ed8e..ddfec5661 100644
--- a/packages/experience/src/components/Button/SocialLinkButton.tsx
+++ b/packages/experience/src/components/Button/SocialLinkButton.tsx
@@ -1,11 +1,14 @@
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
+import { useDebouncedLoader } from 'use-debounced-loader';
 
+import RotatingRingIcon from './RotatingRingIcon';
 import * as socialLinkButtonStyles from './SocialLinkButton.module.scss';
 import * as styles from './index.module.scss';
 
 export type Props = {
   readonly isDisabled?: boolean;
+  readonly isLoading?: boolean;
   readonly className?: string;
   readonly target: string;
   readonly logo: string;
@@ -13,7 +16,15 @@ export type Props = {
   readonly onClick?: () => void;
 };
 
-const SocialLinkButton = ({ isDisabled, className, target, name, logo, onClick }: Props) => {
+const SocialLinkButton = ({
+  isDisabled,
+  isLoading = false,
+  className,
+  target,
+  name,
+  logo,
+  onClick,
+}: Props) => {
   const {
     t,
     i18n: { language },
@@ -21,6 +32,8 @@ const SocialLinkButton = ({ isDisabled, className, target, name, logo, onClick }
 
   const localName = name[language] ?? name.en;
 
+  const isLoadingActive = useDebouncedLoader(isLoading, 300);
+
   return (
     <button
       disabled={isDisabled}
@@ -29,13 +42,13 @@ const SocialLinkButton = ({ isDisabled, className, target, name, logo, onClick }
         styles.secondary,
         styles.large,
         socialLinkButtonStyles.socialButton,
-        isDisabled && styles.disabled,
+        (isDisabled ?? isLoadingActive) && styles.disabled,
         className
       )}
       type="button"
       onClick={onClick}
     >
-      {logo && (
+      {logo && !isLoadingActive && (
         <img
           src={logo}
           alt={target}
@@ -43,6 +56,11 @@ const SocialLinkButton = ({ isDisabled, className, target, name, logo, onClick }
           crossOrigin="anonymous"
         />
       )}
+      {isLoadingActive && (
+        <span className={socialLinkButtonStyles.loadingIcon}>
+          <RotatingRingIcon />
+        </span>
+      )}
       <div className={socialLinkButtonStyles.name}>
         <div className={socialLinkButtonStyles.placeHolder} />
         <span>{t('action.sign_in_with', { name: localName })}</span>
diff --git a/packages/experience/src/components/Button/index.module.scss b/packages/experience/src/components/Button/index.module.scss
index 67993f96c..ed47d5295 100644
--- a/packages/experience/src/components/Button/index.module.scss
+++ b/packages/experience/src/components/Button/index.module.scss
@@ -16,10 +16,28 @@
   user-select: none;
   overflow: hidden;
 
-  .icon {
-    font-size: 0;
-    line-height: normal;
-    margin-right: _.unit(2);
+  .content {
+    position: relative;
+    transition: padding-left 0.2s ease;
+
+    .icon {
+      font-size: 0;
+      line-height: normal;
+      position: absolute;
+      pointer-events: none;
+      left: 0;
+      opacity: 0%;
+      transition: opacity 0.2s ease;
+    }
+
+    &.iconVisible {
+      padding-left: _.unit(7);
+
+      .icon {
+        left: 0;
+        opacity: 100%;
+      }
+    }
   }
 }
 
@@ -45,6 +63,10 @@
   &:active {
     background: var(--color-brand-pressed);
   }
+
+  &.loading {
+    background-color: var(--color-brand-70);
+  }
 }
 
 .secondary {
@@ -74,7 +96,7 @@
       outline: 3px solid var(--color-overlay-brand-focused);
     }
 
-    &:not(:disabled):not(:active):hover {
+    &:not(:disabled):not(:active):not(.loading):hover {
       background: var(--color-brand-hover);
     }
   }
@@ -84,7 +106,7 @@
       outline: 3px solid var(--color-overlay-neutral-focused);
     }
 
-    &:not(:disabled):not(:active):hover {
+    &:not(:disabled):not(:active):not(.loading):hover {
       background: var(--color-overlay-neutral-hover);
     }
   }
diff --git a/packages/experience/src/components/Button/index.tsx b/packages/experience/src/components/Button/index.tsx
index 544198975..2166df5c7 100644
--- a/packages/experience/src/components/Button/index.tsx
+++ b/packages/experience/src/components/Button/index.tsx
@@ -1,9 +1,11 @@
 import classNames from 'classnames';
 import type { TFuncKey } from 'i18next';
-import type { HTMLProps } from 'react';
+import { type HTMLProps } from 'react';
+import { useDebouncedLoader } from 'use-debounced-loader';
 
 import DynamicT from '../DynamicT';
 
+import RotatingRingIcon from './RotatingRingIcon';
 import * as styles from './index.module.scss';
 
 export type ButtonType = 'primary' | 'secondary';
@@ -13,6 +15,7 @@ type BaseProps = Omit<HTMLProps<HTMLButtonElement>, 'type' | 'size' | 'title'> &
   readonly type?: ButtonType;
   readonly size?: 'small' | 'large';
   readonly isDisabled?: boolean;
+  readonly isLoading?: boolean;
   readonly className?: string;
   readonly onClick?: React.MouseEventHandler;
 };
@@ -31,10 +34,13 @@ const Button = ({
   i18nProps,
   className,
   isDisabled = false,
+  isLoading = false,
   icon,
   onClick,
   ...rest
 }: Props) => {
+  const isLoadingActive = useDebouncedLoader(isLoading, 300);
+
   return (
     <button
       disabled={isDisabled}
@@ -42,15 +48,23 @@ const Button = ({
         styles.button,
         styles[type],
         styles[size],
-        isDisabled && styles.isDisabled,
+        isDisabled && styles.disabled,
+        isLoadingActive && styles.loading,
         className
       )}
       type={htmlType}
       onClick={onClick}
       {...rest}
     >
-      {icon && <span className={styles.icon}>{icon}</span>}
-      <DynamicT forKey={title} interpolation={i18nProps} />
+      <span
+        className={classNames(
+          styles.content,
+          (isLoadingActive || Boolean(icon)) && styles.iconVisible
+        )}
+      >
+        <span className={styles.icon}>{isLoadingActive ? <RotatingRingIcon /> : icon}</span>
+        <DynamicT forKey={title} interpolation={i18nProps} />
+      </span>
     </button>
   );
 };
diff --git a/packages/experience/src/scss/_colors.scss b/packages/experience/src/scss/_colors.scss
index b1d1e4b00..2952cb391 100644
--- a/packages/experience/src/scss/_colors.scss
+++ b/packages/experience/src/scss/_colors.scss
@@ -38,6 +38,7 @@
   --color-brand-30: #4300da;
   --color-brand-40: #5d34f2;
   --color-brand-50: #7958ff;
+  --color-brand-70: #af9eff;
 
   --color-alert-60: #ca8000;
   --color-alert-70: #eb9918;