From 7c04ef4f4ebdeabc2a223bbbe58c7d21175409d1 Mon Sep 17 00:00:00 2001
From: CatsJuice <wp1298554944@hotmail.com>
Date: Thu, 13 Feb 2025 08:55:11 +0000
Subject: [PATCH] fix(component): loading in button should be white for primary
 variant (#10073)

close AF-2178
---
 .../frontend/component/src/ui/button/button.tsx | 17 +++++++++++++++--
 .../component/src/ui/loading/loading.tsx        |  5 ++++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/component/src/ui/button/button.tsx b/packages/frontend/component/src/ui/button/button.tsx
index 801ef416cf..2ff2ca8932 100644
--- a/packages/frontend/component/src/ui/button/button.tsx
+++ b/packages/frontend/component/src/ui/button/button.tsx
@@ -6,7 +6,7 @@ import type {
   ReactElement,
   SVGAttributes,
 } from 'react';
-import { cloneElement, forwardRef, useCallback } from 'react';
+import { cloneElement, forwardRef, useCallback, useMemo } from 'react';
 
 import { useAutoFocus } from '../../hooks';
 import { Loading } from '../loading';
@@ -78,16 +78,28 @@ const IconSlot = ({
   icon,
   loading,
   className,
+  variant,
   ...attrs
 }: {
   icon?: ReactElement<SVGAttributes<SVGElement>>;
   loading?: boolean;
+  variant?: ButtonType;
 } & HTMLAttributes<HTMLElement>) => {
   const showLoadingHere = loading !== undefined;
   const visible = icon || loading;
+
+  const loadingStrokeColor = useMemo(() => {
+    const usePureWhite =
+      variant &&
+      (['primary', 'error', 'success'] as ButtonType[]).includes(variant);
+    return usePureWhite ? '#fff' : undefined;
+  }, [variant]);
+
   return visible ? (
     <div className={clsx(styles.icon, className)} {...attrs}>
-      {showLoadingHere && loading ? <Loading size="100%" /> : null}
+      {showLoadingHere && loading ? (
+        <Loading size="100%" strokeColor={loadingStrokeColor} />
+      ) : null}
       {icon && !loading
         ? cloneElement(icon, {
             width: '100%',
@@ -174,6 +186,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
             loading={loading}
             className={prefixClassName}
             style={prefixStyle}
+            variant={variant}
           />
           {children ? (
             <span
diff --git a/packages/frontend/component/src/ui/loading/loading.tsx b/packages/frontend/component/src/ui/loading/loading.tsx
index 4e46fede1d..237f5c5fa1 100644
--- a/packages/frontend/component/src/ui/loading/loading.tsx
+++ b/packages/frontend/component/src/ui/loading/loading.tsx
@@ -8,12 +8,14 @@ export interface LoadingProps {
   size?: number | string;
   speed?: number;
   progress?: number;
+  strokeColor?: string;
 }
 
 export const Loading = ({
   size,
   speed = 1.2,
   progress = 0.2,
+  strokeColor,
 }: LoadingProps) => {
   // allow `string` such as `16px` | `100%` | `1em`
   const sizeWithUnit = size ? withUnit(size, 'px') : '16px';
@@ -43,10 +45,11 @@ export const Loading = ({
         cy={12}
         r={8}
         strokeWidth={4}
-        stroke="var(--affine-primary-color)"
+        stroke={strokeColor || 'var(--affine-primary-color)'}
         strokeDasharray={`${2 * Math.PI * 8 * progress} ${
           2 * Math.PI * 8 * (1 - progress)
         }`}
+        strokeLinecap="round"
       />
     </svg>
   );