Add loading feedback to git changes refresh button (#12792)

Co-authored-by: hieptl <hieptl.developer@gmail.com>

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,

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" && (

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,