From 6d86803f4154894db19230d66c83e2d18fd3f9dd Mon Sep 17 00:00:00 2001
From: Varun Chawla <34209028+veeceey@users.noreply.github.com>
Date: Wed, 18 Mar 2026 11:26:27 -0700
Subject: [PATCH] Add loading feedback to git changes refresh button (#12792)

Co-authored-by: hieptl <hieptl.developer@gmail.com>
---
 frontend/__tests__/routes/changes-tab.test.tsx       |  2 ++
 .../conversation-tabs/conversation-tab-title.tsx     | 12 +++++++++---
 .../src/hooks/query/use-unified-get-git-changes.ts   |  1 +
 3 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/frontend/__tests__/routes/changes-tab.test.tsx b/frontend/__tests__/routes/changes-tab.test.tsx
index 178bb28c40..1cf2513d18 100644
--- a/frontend/__tests__/routes/changes-tab.test.tsx
+++ b/frontend/__tests__/routes/changes-tab.test.tsx
@@ -32,6 +32,7 @@ describe("Changes Tab", () => {
     vi.mocked(useUnifiedGetGitChanges).mockReturnValue({
       data: [],
       isLoading: false,
+      isFetching: false,
       isSuccess: true,
       isError: false,
       error: null,
@@ -50,6 +51,7 @@ describe("Changes Tab", () => {
     vi.mocked(useUnifiedGetGitChanges).mockReturnValue({
       data: [{ path: "src/file.ts", status: "M" }],
       isLoading: false,
+      isFetching: false,
       isSuccess: true,
       isError: false,
       error: null,
diff --git a/frontend/src/components/features/conversation/conversation-tabs/conversation-tab-title.tsx b/frontend/src/components/features/conversation/conversation-tabs/conversation-tab-title.tsx
index 75dbb23f8e..ad3bc98c41 100644
--- a/frontend/src/components/features/conversation/conversation-tabs/conversation-tab-title.tsx
+++ b/frontend/src/components/features/conversation/conversation-tabs/conversation-tab-title.tsx
@@ -20,7 +20,7 @@ export function ConversationTabTitle({
   conversationKey,
 }: ConversationTabTitleProps) {
   const { t } = useTranslation();
-  const { refetch } = useUnifiedGetGitChanges();
+  const { refetch, isFetching } = useUnifiedGetGitChanges();
   const { handleBuildPlanClick } = useHandleBuildPlanClick();
   const { curAgentState } = useAgentState();
   const { planContent } = useConversationStore();
@@ -41,10 +41,16 @@ export function ConversationTabTitle({
       {conversationKey === "editor" && (
         <button
           type="button"
-          className="flex w-[26px] py-1 justify-center items-center gap-[10px] rounded-[7px] hover:bg-[#474A54] cursor-pointer"
+          className="flex w-[26px] py-1 justify-center items-center gap-[10px] rounded-[7px] hover:enabled:bg-[#474A54] cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
           onClick={handleRefresh}
+          disabled={isFetching}
         >
-          <RefreshIcon width={12.75} height={15} color="#ffffff" />
+          <RefreshIcon
+            width={12.75}
+            height={15}
+            color="#ffffff"
+            className={isFetching ? "animate-spin" : ""}
+          />
         </button>
       )}
       {conversationKey === "planner" && (
diff --git a/frontend/src/hooks/query/use-unified-get-git-changes.ts b/frontend/src/hooks/query/use-unified-get-git-changes.ts
index 70bc5f451f..801b1a067a 100644
--- a/frontend/src/hooks/query/use-unified-get-git-changes.ts
+++ b/frontend/src/hooks/query/use-unified-get-git-changes.ts
@@ -100,6 +100,7 @@ export const useUnifiedGetGitChanges = () => {
   return {
     data: orderedChanges,
     isLoading: result.isLoading,
+    isFetching: result.isFetching,
     isSuccess: result.isSuccess,
     isError: result.isError,
     error: result.error,