From 8a202b945bdbaf069e689437552d21726c58c7e0 Mon Sep 17 00:00:00 2001
From: Nhan Nguyen <nhan13574@gmail.com>
Date: Fri, 12 Dec 2025 08:03:28 -0500
Subject: [PATCH] fix(frontend): animate loading spinner for in-progress tasks
 (#12001)

Co-authored-by: amanape <83104063+amanape@users.noreply.github.com>
---
 .../src/components/features/chat/task-tracking/task-item.tsx  | 2 +-
 frontend/src/components/v1/chat/task-tracking/task-item.tsx   | 4 +---
 frontend/src/icons/loading.svg                                | 4 ++--
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/features/chat/task-tracking/task-item.tsx b/frontend/src/components/features/chat/task-tracking/task-item.tsx
index 72e9e74aac..9dac504769 100644
--- a/frontend/src/components/features/chat/task-tracking/task-item.tsx
+++ b/frontend/src/components/features/chat/task-tracking/task-item.tsx
@@ -24,7 +24,7 @@ export function TaskItem({ task }: TaskItemProps) {
       case "todo":
         return <CircleIcon className="w-4 h-4 text-[#ffffff]" />;
       case "in_progress":
-        return <LoadingIcon className="w-4 h-4 text-[#ffffff]" />;
+        return <LoadingIcon className="w-4 h-4 text-[#ffffff] animate-spin" />;
       case "done":
         return <CheckCircleIcon className="w-4 h-4 text-[#A3A3A3]" />;
       default:
diff --git a/frontend/src/components/v1/chat/task-tracking/task-item.tsx b/frontend/src/components/v1/chat/task-tracking/task-item.tsx
index b25664a611..a50b6829d3 100644
--- a/frontend/src/components/v1/chat/task-tracking/task-item.tsx
+++ b/frontend/src/components/v1/chat/task-tracking/task-item.tsx
@@ -20,9 +20,7 @@ export function TaskItem({ task }: TaskItemProps) {
       case "todo":
         return <CircleIcon className="w-4 h-4 text-[#ffffff]" />;
       case "in_progress":
-        return (
-          <LoadingIcon className="w-4 h-4 text-[#ffffff]" strokeWidth={0.5} />
-        );
+        return <LoadingIcon className="w-4 h-4 text-[#ffffff] animate-spin" />;
       case "done":
         return <CheckCircleIcon className="w-4 h-4 text-[#A3A3A3]" />;
       default:
diff --git a/frontend/src/icons/loading.svg b/frontend/src/icons/loading.svg
index 2da678957f..a5217fd608 100644
--- a/frontend/src/icons/loading.svg
+++ b/frontend/src/icons/loading.svg
@@ -1,3 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="7" viewBox="0 0 16 7" fill="none">
-  <path d="M7.50684 0.25C9.24918 0.25 10.9332 0.87774 12.251 2.01758C13.5688 3.15746 14.4327 4.73379 14.6836 6.45801L14.7256 6.74316H13.2129L13.1777 6.53516C12.9499 5.19635 12.2554 3.98161 11.2178 3.10547C10.1799 2.22925 8.86511 1.74805 7.50684 1.74805C6.14866 1.74811 4.83466 2.22931 3.79688 3.10547C2.75913 3.98161 2.06476 5.19628 1.83691 6.53516L1.80078 6.74316H0.289063L0.331055 6.45801C0.581982 4.73389 1.44504 3.15745 2.7627 2.01758C4.08041 0.877757 5.76455 0.250069 7.50684 0.25Z" fill="currentColor" stroke="currentColor" stroke-width="0.5"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M8 0.5C9.74234 0.5 11.4264 1.12774 12.7442 2.26758C14.062 3.40746 14.9259 4.98379 15.1768 6.70801L15.2188 6.99316H13.7061L13.6709 6.78516C13.4431 5.44635 12.7486 4.23161 11.711 3.35547C10.6731 2.47925 9.35827 1.99805 8 1.99805C6.64182 1.99811 5.32782 2.47931 4.29004 3.35547C3.25229 4.23161 2.55792 5.44628 2.33007 6.78516L2.29394 6.99316H0.782227L0.824219 6.70801C1.07515 4.98389 1.9382 3.40745 3.25586 2.26758C4.57357 1.12776 6.25771 0.500069 8 0.5Z" fill="currentColor" stroke="currentColor" stroke-width="0.5"/>
 </svg>