fix(component): loading in button should be white for primary variant (#10073)

close AF-2178

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

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>
   );