From 028884ded67f44196b4c4d9d4deb5338f1476df1 Mon Sep 17 00:00:00 2001
From: one <wangan.cs@gmail.com>
Date: Tue, 5 Aug 2025 09:55:37 +0800
Subject: [PATCH] refactor: animate auto get dimension (#8831)

---
 src/renderer/src/assets/styles/animation.scss | 15 +++++++
 .../components/Icons/SvgSpinners180Ring.tsx   | 45 +++++--------------
 .../components/InputEmbeddingDimension.tsx    |  5 +--
 .../InputEmbeddingDimension.test.tsx          |  6 +--
 .../InputEmbeddingDimension.test.tsx.snap     | 11 ++++-
 5 files changed, 42 insertions(+), 40 deletions(-)

diff --git a/src/renderer/src/assets/styles/animation.scss b/src/renderer/src/assets/styles/animation.scss
index bd3a96e495..bbc1c569f3 100644
--- a/src/renderer/src/assets/styles/animation.scss
+++ b/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;
+}
diff --git a/src/renderer/src/components/Icons/SvgSpinners180Ring.tsx b/src/renderer/src/components/Icons/SvgSpinners180Ring.tsx
index 355b6cd9c9..6cebfa3332 100644
--- a/src/renderer/src/components/Icons/SvgSpinners180Ring.tsx
+++ b/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 (
-    <>
-      {/*  CSS transform 硬件加速 */}
-      <style>
-        {`
-          @keyframes svg-spinner-rotate-180-ring {
-            from {
-              transform: rotate(0deg);
-            }
-            to {
-              transform: rotate(360deg);
-            }
-          }
-          .${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>
-    </>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      {...svgProps}
+      className={`animation-rotate ${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
diff --git a/src/renderer/src/components/InputEmbeddingDimension.tsx b/src/renderer/src/components/InputEmbeddingDimension.tsx
index 12cb941ea9..7d7f452d01 100644
--- a/src/renderer/src/components/InputEmbeddingDimension.tsx
+++ b/src/renderer/src/components/InputEmbeddingDimension.tsx
@@ -77,10 +77,9 @@ const InputEmbeddingDimension = ({
         <Button
           role="button"
           aria-label="Get embedding dimension"
-          icon={<RefreshIcon size={16} />}
-          loading={loading}
-          disabled={disabled}
+          disabled={disabled || loading}
           onClick={handleFetchDimension}
+          icon={<RefreshIcon size={16} className={loading ? 'animation-rotate' : ''} />}
         />
       </Tooltip>
     </Space.Compact>
diff --git a/src/renderer/src/components/__tests__/InputEmbeddingDimension.test.tsx b/src/renderer/src/components/__tests__/InputEmbeddingDimension.test.tsx
index 2a2383ad67..babc67e6ef 100644
--- a/src/renderer/src/components/__tests__/InputEmbeddingDimension.test.tsx
+++ b/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 }) => (
-    <button type="button" onClick={onClick} disabled={disabled || loading} {...rest}>
-      {loading ? 'Loading...' : icon}
+  const MockButton: React.FC<any> = ({ children, onClick, disabled, icon, className, ...rest }) => (
+    <button type="button" onClick={onClick} disabled={disabled} {...rest} className={className}>
+      {icon}
       {children}
     </button>
   )
diff --git a/src/renderer/src/components/__tests__/__snapshots__/InputEmbeddingDimension.test.tsx.snap b/src/renderer/src/components/__tests__/__snapshots__/InputEmbeddingDimension.test.tsx.snap
index 9a29f4f2cf..f056130030 100644
--- a/src/renderer/src/components/__tests__/__snapshots__/InputEmbeddingDimension.test.tsx.snap
+++ b/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>