fix(experience): loading button should be disabled (#7344)

* Revert "fix(experience): disable button click when loading (#7341)"

This reverts commit ff497c6.

* fix(experience): loading button should be disabled

Author: wangsijie

packages/experience/src/components/Button/SocialLinkButton.tsx

@@ -46,12 +46,7 @@ const SocialLinkButton = ({
         className
       )}
       type="button"
-      onClick={() => {
-        if (isLoading) {
-          return;
-        }
-        onClick?.();
-      }}
+      onClick={onClick}
     >
       {logo && !isLoadingActive && (
         <img src={logo} alt={target} className={socialLinkButtonStyles.icon} />

packages/experience/src/components/Button/index.module.scss

@@ -54,8 +54,8 @@
   background: var(--color-brand-default);
   color: var(--color-static-white);
 
-  &.disabled,
-  &:disabled {
+  &.disabled:not(.loading),
+  &:disabled:not(.loading) {
     background: var(--color-bg-state-disabled);
     color: var(--color-type-disable);
   }
@@ -64,7 +64,7 @@
     background: var(--color-brand-pressed);
   }
 
-  &.loading {
+  &.loadingActive {
     background-color: var(--color-brand-loading);
   }
 }
@@ -74,8 +74,8 @@
   background: transparent;
   color: var(--color-type-primary);
 
-  &.disabled,
-  &:disabled {
+  &.disabled:not(.loading),
+  &:disabled:not(.loading) {
     border-color: var(--color-type-disable);
     color: var(--color-type-disable);
   }
@@ -96,7 +96,7 @@
       outline: 3px solid var(--color-overlay-brand-focused);
     }
 
-    &:not(:disabled):not(:active):not(.loading):hover {
+    &:not(:disabled):not(:active):not(.loadingActive):hover {
       background: var(--color-brand-hover);
     }
   }
@@ -106,7 +106,7 @@
       outline: 3px solid var(--color-overlay-neutral-focused);
     }
 
-    &:not(:disabled):not(:active):not(.loading):hover {
+    &:not(:disabled):not(:active):not(.loadingActive):hover {
       background: var(--color-overlay-neutral-hover);
     }
   }

packages/experience/src/components/Button/index.tsx

@@ -43,22 +43,18 @@ const Button = ({
 
   return (
     <button
-      disabled={isDisabled}
+      disabled={isDisabled || isLoading}
       className={classNames(
         styles.button,
         styles[type],
         styles[size],
         isDisabled && styles.disabled,
-        isLoadingActive && styles.loading,
+        isLoading && styles.loading,
+        isLoadingActive && styles.loadingActive,
         className
       )}
       type={htmlType}
-      onClick={(event) => {
-        if (isLoading) {
-          return;
-        }
-        onClick?.(event);
-      }}
+      onClick={onClick}
       {...rest}
     >
       <span