refactor: animate auto get dimension (#8831)

src/renderer/src/assets/styles/animation.scss

@@ -53,3 +53,18 @@
   animation-fill-mode: both;
   animation-duration: 0.25s;
 }
+
+// 旋转动画
+@keyframes animation-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.animation-rotate {
+  transform-origin: center;
+  animation: animation-rotate 0.75s linear infinite;
+}

src/renderer/src/components/Icons/SvgSpinners180Ring.tsx

@@ -2,41 +2,20 @@ import { SVGProps } from 'react'
 
 export function SvgSpinners180Ring(props: SVGProps<SVGSVGElement> & { size?: number | string }) {
   const { size = '1em', ...svgProps } = props
-  // 避免与全局样式冲突
-  const animationClassName = 'svg-spinner-anim-180-ring'
 
   return (
-    <>
+    <svg
-      {/*  CSS transform 硬件加速 */}
+      xmlns="http://www.w3.org/2000/svg"
-      <style>
+      width={size}
-        {`
+      height={size}
-          @keyframes svg-spinner-rotate-180-ring {
+      viewBox="0 0 24 24"
-            from {
+      {...svgProps}
-              transform: rotate(0deg);
+      className={`animation-rotate ${svgProps.className || ''}`.trim()}>
-            }
+      {/* Icon from SVG Spinners by Utkarsh Verma - https://github.com/n3r4zzurr0/svg-spinners/blob/main/LICENSE */}
-            to {
+      <path
-              transform: rotate(360deg);
+        fill="currentColor"
-            }
+        d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z"></path>
-          }
+    </svg>
-          .${animationClassName} {
-            transform-origin: center;
-            animation: svg-spinner-rotate-180-ring 0.75s linear infinite;
-          }
-        `}
-      </style>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width={size}
-        height={size}
-        viewBox="0 0 24 24"
-        {...svgProps}
-        className={`${animationClassName} ${svgProps.className || ''}`.trim()}>
-        {/* Icon from SVG Spinners by Utkarsh Verma - https://github.com/n3r4zzurr0/svg-spinners/blob/main/LICENSE */}
-        <path
-          fill="currentColor"
-          d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z"></path>
-      </svg>
-    </>
   )
 }
 export default SvgSpinners180Ring

src/renderer/src/components/InputEmbeddingDimension.tsx

@@ -77,10 +77,9 @@ const InputEmbeddingDimension = ({
         <Button
           role="button"
           aria-label="Get embedding dimension"
-          icon={<RefreshIcon size={16} />}
+          disabled={disabled || loading}
-          loading={loading}
-          disabled={disabled}
           onClick={handleFetchDimension}
+          icon={<RefreshIcon size={16} className={loading ? 'animation-rotate' : ''} />}
         />
       </Tooltip>
     </Space.Compact>

src/renderer/src/components/__tests__/InputEmbeddingDimension.test.tsx

@@ -47,9 +47,9 @@ vi.mock('antd', () => {
     />
   )
 
-  const MockButton: React.FC<any> = ({ children, onClick, loading, disabled, icon, ...rest }) => (
+  const MockButton: React.FC<any> = ({ children, onClick, disabled, icon, className, ...rest }) => (
-    <button type="button" onClick={onClick} disabled={disabled || loading} {...rest}>
+    <button type="button" onClick={onClick} disabled={disabled} {...rest} className={className}>
-      {loading ? 'Loading...' : icon}
+      {icon}
       {children}
     </button>
   )

src/renderer/src/components/__tests__/__snapshots__/InputEmbeddingDimension.test.tsx.snap

@@ -23,6 +23,7 @@ exports[`InputEmbeddingDimension > basic rendering > should match snapshot with
     >
       <svg
         aria-label="refresh"
+        class=""
         data-testid="refresh-icon"
         role="img"
         size="16"
@@ -56,7 +57,15 @@ exports[`InputEmbeddingDimension > basic rendering > should match snapshot with
       role="button"
       type="button"
     >
-      Loading...
+      <svg
+        aria-label="refresh"
+        class="animation-rotate"
+        data-testid="refresh-icon"
+        role="img"
+        size="16"
+      >
+        RefreshIcon
+      </svg>
     </button>
   </div>
 </div>