fix popup ui

src/components/ProxySwitch/index.css

@@ -129,6 +129,7 @@ body {
     display: flex !important;
     align-items: center !important;
     border-radius: 6px !important;
+    transition: all 0.2s ease-in-out !important;
 }
 
 .ant-menu-item:hover {
@@ -150,6 +151,7 @@ body {
 .ant-menu-item img {
     font-size: 16px;
     margin-right: 8px;
+    transition: all 0.2s ease-in-out !important;
 }
 
 .ant-menu-item.ant-menu-item-selected .anticon, 
@@ -190,6 +192,13 @@ body {
     z-index: 10;
     font-size: 14px;
     color: var(--yakit-primary);
+    opacity: 0;
+    animation: fadeIn 0.2s ease-in-out forwards;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
 }
 
 /* Remove conflicting styles */

src/components/ProxySwitch/index.tsx

@@ -168,10 +168,14 @@ export const ProxySwitch: React.FC = () => {
             return;
         }
 
+        // 如果当前已经是选中的模式，不做任何操作
+        if (mode === currentMode) return;
+
         try {
-            // 先更新UI状态，避免闪烁
+            // 立即更新UI状态，避免闪烁
             setCurrentMode(mode);
-            setIsLoading(true);
+            // 显示加载状态但不阻塞UI
+            setTimeout(() => setIsLoading(true), 0);
 
             // 发送切换代理请求
             const response = await browser.runtime.sendMessage({
@@ -219,7 +223,8 @@ export const ProxySwitch: React.FC = () => {
                             style={{
                                 width: 20, 
                                 height: 20,
-                                filter: currentMode === proxy.key ? 'brightness(0) invert(1)' : 'none'
+                                filter: currentMode === proxy.key ? 'brightness(0) invert(1)' : 'none',
+                                transition: 'filter 0.2s ease-in-out'
                             }}
                           />,
                     className: `${currentMode === proxy.key ? 'active-item' : ''} menu-id-${proxy.key}`,