From 581879f5f6ffc5807096f8d93c481e13c4787ee3 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Thu, 2 Oct 2025 18:04:45 -0300
Subject: [PATCH] fixed animated processing icon

---
 .../ui/animated-processing-icon.tsx           | 52 +++++++------------
 frontend/src/components/ui/status-badge.tsx   |  2 +-
 2 files changed, 21 insertions(+), 33 deletions(-)

diff --git a/frontend/src/components/ui/animated-processing-icon.tsx b/frontend/src/components/ui/animated-processing-icon.tsx
index eb36b2ab..51815414 100644
--- a/frontend/src/components/ui/animated-processing-icon.tsx
+++ b/frontend/src/components/ui/animated-processing-icon.tsx
@@ -1,26 +1,16 @@
-interface AnimatedProcessingIconProps {
-  className?: string;
-  size?: number;
-}
+import type { SVGProps } from "react";
 
-export const AnimatedProcessingIcon = ({
-  className = "",
-  size = 10,
-}: AnimatedProcessingIconProps) => {
-  const width = Math.round((size * 6) / 10);
-  const height = size;
-
-  return (
-    <svg
-      width={width}
-      height={height}
-      viewBox="0 0 6 10"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-    >
-      <style>
-        {`
+export const AnimatedProcessingIcon = (props: SVGProps<SVGSVGElement>) => {
+	return (
+		<svg
+			viewBox="0 0 8 12"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			{...props}
+		>
+			<title>Processing</title>
+			<style>
+				{`
           .dot-1 { animation: pulse-wave 1.5s infinite; animation-delay: 0s; }
           .dot-2 { animation: pulse-wave 1.5s infinite; animation-delay: 0.1s; }
           .dot-3 { animation: pulse-wave 1.5s infinite; animation-delay: 0.2s; }
@@ -30,20 +20,18 @@ export const AnimatedProcessingIcon = ({
           @keyframes pulse-wave {
             0%, 60%, 100% { 
               opacity: 0.25; 
-              transform: scale(1);
             }
             30% { 
               opacity: 1; 
-              transform: scale(1.2);
             }
           }
         `}
-      </style>
-      <circle className="dot-1" cx="1" cy="5" r="1" fill="currentColor" />
-      <circle className="dot-2" cx="1" cy="9" r="1" fill="currentColor" />
-      <circle className="dot-3" cx="5" cy="1" r="1" fill="currentColor" />
-      <circle className="dot-4" cx="5" cy="5" r="1" fill="currentColor" />
-      <circle className="dot-5" cx="5" cy="9" r="1" fill="currentColor" />
-    </svg>
-  );
+			</style>
+			<circle className="dot-1" cx="2" cy="6" r="1" fill="currentColor" />
+			<circle className="dot-2" cx="2" cy="10" r="1" fill="currentColor" />
+			<circle className="dot-3" cx="6" cy="2" r="1" fill="currentColor" />
+			<circle className="dot-4" cx="6" cy="6" r="1" fill="currentColor" />
+			<circle className="dot-5" cx="6" cy="10" r="1" fill="currentColor" />
+		</svg>
+	);
 };
diff --git a/frontend/src/components/ui/status-badge.tsx b/frontend/src/components/ui/status-badge.tsx
index d3b1a323..07dce58b 100644
--- a/frontend/src/components/ui/status-badge.tsx
+++ b/frontend/src/components/ui/status-badge.tsx
@@ -50,7 +50,7 @@ export const StatusBadge = ({ status, className }: StatusBadgeProps) => {
       }`}
     >
       {status === "processing" && (
-        <AnimatedProcessingIcon className="text-current mr-2" size={10} />
+        <AnimatedProcessingIcon className="text-current h-4 w-4 shrink-0" />
       )}
       {config.label}
     </div>