gmakstutis/openrag
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed animated processing icon

Browse source
This commit is contained in:
Lucas Oliveira 2025-10-02 18:04:45 -03:00
parent db715c122b
commit 581879f5f6
2 changed files with 21 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
frontend/src/components/ui/animated-processing-icon.tsx
View file

@ -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>
);
};

2
frontend/src/components/ui/status-badge.tsx
View file

@ -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>