LoadingSpinner.tsx

Go to the documentation of this file.

interface LoadingSpinnerProps {
  size?: 'sm' | 'md' | 'lg';
  text?: string;
  fullPage?: boolean;
}
 
export default function LoadingSpinner({ 
  size = 'md', 
  text = 'Loading...', 
  fullPage = false 
}: LoadingSpinnerProps) {
  const sizeClasses = {
    sm: 'h-6 w-6 border-2',
    md: 'h-10 w-10 border-3',
    lg: 'h-16 w-16 border-4'
  };
 
  const textSizeClasses = {
    sm: 'text-sm',
    md: 'text-base',
    lg: 'text-lg'
  };
 
  const spinner = (
    <div className="flex flex-col items-center justify-center gap-3">
      <div className={`${sizeClasses[size]} border-brand border-t-transparent rounded-full animate-spin`}></div>
      {text && (
        <p className={`${textSizeClasses[size]} text-muted animate-pulse`}>{text}</p>
      )}
    </div>
  );
 
  if (fullPage) {
    return (
      <div className="fixed inset-0 bg-white/80 backdrop-blur-sm flex items-center justify-center z-50">
        {spinner}
      </div>
    );
  }
 
  return spinner;
}
 
// Skeleton loader for cards/lists
export function SkeletonCard() {
  return (
    <div className="bg-white rounded-lg border border-border p-6 animate-pulse">
      <div className="h-4 bg-gray-200 rounded w-3/4 mb-4"></div>
      <div className="h-3 bg-gray-200 rounded w-1/2 mb-2"></div>
      <div className="h-3 bg-gray-200 rounded w-2/3"></div>
    </div>
  );
}
 
// Skeleton loader for table rows
export function SkeletonRow() {
  return (
    <tr className="animate-pulse">
      <td className="px-6 py-4">
        <div className="h-4 bg-gray-200 rounded w-32"></div>
      </td>
      <td className="px-6 py-4">
        <div className="h-4 bg-gray-200 rounded w-24"></div>
      </td>
      <td className="px-6 py-4">
        <div className="h-4 bg-gray-200 rounded w-40"></div>
      </td>
      <td className="px-6 py-4">
        <div className="h-4 bg-gray-200 rounded w-20"></div>
      </td>
    </tr>
  );
}
 
// Skeleton loader for KPI cards
export function SkeletonKPI() {
  return (
    <div className="bg-white p-4 rounded-lg border border-border animate-pulse">
      <div className="h-8 bg-gray-200 rounded w-20 mb-2"></div>
      <div className="h-3 bg-gray-200 rounded w-24"></div>
    </div>
  );
}