frontend/src/components/LoadingAnimation.tsx

export default function LoadingAnimation() {
  return (
    <div className="flex items-center gap-1.5" aria-label="Generating response">
      <svg
        width="52"
        height="20"
        viewBox="0 0 52 20"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <defs>
          <linearGradient id="pulse-grad" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor="#8FD15E" />
            <stop offset="50%" stopColor="#47C3A6" />
            <stop offset="100%" stopColor="#14B7CC" />
          </linearGradient>
        </defs>

        {/* Connecting lines */}
        <line x1="10" y1="10" x2="26" y2="10" stroke="url(#pulse-grad)" strokeWidth="1" opacity="0.35" />
        <line x1="26" y1="10" x2="42" y2="10" stroke="url(#pulse-grad)" strokeWidth="1" opacity="0.35" />

        {/* Node 1 */}
        <circle cx="10" cy="10" r="5" fill="url(#pulse-grad)" className="animate-pulse-node" />

        {/* Node 2 */}
        <circle cx="26" cy="10" r="5" fill="url(#pulse-grad)" className="animate-pulse-node-delay" />

        {/* Node 3 */}
        <circle cx="42" cy="10" r="5" fill="url(#pulse-grad)" className="animate-pulse-node-delay2" />
      </svg>
    </div>
  );
}