SurfSense/surfsense_web/components/prompt-kit/loader.tsx

"use client";

import { cn } from "@/lib/utils";

export interface LoaderProps {
  variant?: "text-shimmer";
  size?: "sm" | "md" | "lg";
  text?: string;
  className?: string;
}

const textSizes = {
  sm: "text-xs",
  md: "text-sm",
  lg: "text-base",
} as const;

/**
 * TextShimmerLoader - A text loader with a shimmer gradient animation
 * Used for in-progress states in write_todos and chain-of-thought
 */
export function TextShimmerLoader({
  text = "Thinking",
  className,
  size = "md",
}: {
  text?: string;
  className?: string;
  size?: "sm" | "md" | "lg";
}) {
  return (
    <>
      <style>
        {`
          @keyframes shimmer {
            0% { background-position: 200% 50%; }
            100% { background-position: -200% 50%; }
          }
        `}
      </style>
      <span
        className={cn(
          "bg-[linear-gradient(to_right,var(--muted-foreground)_40%,var(--foreground)_60%,var(--muted-foreground)_80%)]",
          "bg-[length:200%_auto] bg-clip-text font-medium text-transparent",
          "animate-[shimmer_4s_infinite_linear]",
          textSizes[size],
          className
        )}
      >
        {text}
      </span>
    </>
  );
}

/**
 * Loader component - currently only supports text-shimmer variant
 * Can be extended with more variants if needed in the future
 */
export function Loader({
  variant = "text-shimmer",
  size = "md",
  text,
  className,
}: LoaderProps) {
  switch (variant) {
    case "text-shimmer":
    default:
      return (
        <TextShimmerLoader text={text} size={size} className={className} />
      );
  }
}