From 92c8a795f935af053dee89c3126299684b9b2f35 Mon Sep 17 00:00:00 2001
From: digua <i@digua.me>
Date: Fri, 22 May 2026 22:11:16 +0800
Subject: [PATCH] fix(ui): spin sync icon in-place instead of showing separate
 loader

Replace UButton :loading with animate-spin on the arrow-path icon itself.
The sync button's icon now rotates when syncing, and the button is disabled.
The "sync all" button is also disabled when any session is syncing.
---
 .../common/Settings/ApiSettingsTab.vue         | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/common/Settings/ApiSettingsTab.vue b/src/components/common/Settings/ApiSettingsTab.vue
index 63730f15..d9a532f6 100644
--- a/src/components/common/Settings/ApiSettingsTab.vue
+++ b/src/components/common/Settings/ApiSettingsTab.vue
@@ -270,11 +270,16 @@ function subscribedRemoteIds(ds: DataSource): Set<string> {
                       <UButton
                         size="xs"
                         variant="ghost"
-                        :loading="pullingIds.has(ds.id)"
-                        :disabled="pullingIds.has(ds.id)"
+                        :disabled="pullingIds.has(ds.id) || ds.sessions.some((s) => pullingIds.has(s.id))"
                         @click="syncAllInSource(ds)"
                       >
-                        <UIcon name="i-heroicons-arrow-path" class="h-3.5 w-3.5" />
+                        <UIcon
+                          name="i-heroicons-arrow-path"
+                          class="h-3.5 w-3.5"
+                          :class="{
+                            'animate-spin': pullingIds.has(ds.id) || ds.sessions.some((s) => pullingIds.has(s.id)),
+                          }"
+                        />
                       </UButton>
                       <UButton
                         size="xs"
@@ -315,11 +320,14 @@ function subscribedRemoteIds(ds: DataSource): Set<string> {
                           <UButton
                             size="xs"
                             variant="ghost"
-                            :loading="pullingIds.has(sess.id)"
                             :disabled="pullingIds.has(sess.id)"
                             @click="syncSession(ds, sess)"
                           >
-                            <UIcon name="i-heroicons-arrow-path" class="h-3.5 w-3.5" />
+                            <UIcon
+                              name="i-heroicons-arrow-path"
+                              class="h-3.5 w-3.5"
+                              :class="{ 'animate-spin': pullingIds.has(sess.id) }"
+                            />
                           </UButton>
                           <UButton
                             size="xs"