Spaces:
Runtime error
Runtime error
| /** | |
| * LoadingSpinner Component | |
| * | |
| * Displays animated loading indicators for various states. | |
| */ | |
| interface LoadingSpinnerProps { | |
| size?: 'sm' | 'md' | 'lg'; | |
| text?: string; | |
| } | |
| export function LoadingSpinner({ size = 'md', text }: LoadingSpinnerProps) { | |
| const sizeClasses = { | |
| sm: 'w-4 h-4', | |
| md: 'w-8 h-8', | |
| lg: 'w-12 h-12', | |
| }; | |
| return ( | |
| <div className="flex flex-col items-center justify-center gap-3"> | |
| <div | |
| className={`${sizeClasses[size]} border-2 border-gray-200 border-t-blue-600 rounded-full animate-spin`} | |
| /> | |
| {text && <p className="text-sm text-gray-500">{text}</p>} | |
| </div> | |
| ); | |
| } | |
| /** | |
| * Typing indicator with bouncing dots (for chat) | |
| */ | |
| export function TypingIndicator() { | |
| return ( | |
| <div className="flex items-center gap-1 px-4 py-3 bg-gray-100 rounded-2xl rounded-bl-md w-fit"> | |
| <div className="w-2 h-2 bg-gray-400 rounded-full loading-dot" /> | |
| <div className="w-2 h-2 bg-gray-400 rounded-full loading-dot" /> | |
| <div className="w-2 h-2 bg-gray-400 rounded-full loading-dot" /> | |
| </div> | |
| ); | |
| } | |
| export default LoadingSpinner; | |