38 lines
856 B
TypeScript
38 lines
856 B
TypeScript
|
import { Button, ButtonProps } from './button';
|
||
|
|
import { Loader2 } from 'lucide-react';
|
||
|
|
import { cn } from '@/lib/utils';
|
||
|
|
|
||
|
|
// FE-COMP-001: Add loading states to all async operations
|
||
|
|
|
||
|
|
interface ButtonLoadingProps extends ButtonProps {
|
||
|
|
isLoading?: boolean;
|
||
|
|
loadingText?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Button component with built-in loading state
|
||
|
|
* Automatically disables the button and shows a spinner when loading
|
||
|
|
*/
|
||
|
|
export function ButtonLoading({
|
||
|
|
isLoading = false,
|
||
|
|
loadingText,
|
||
|
|
children,
|
||
|
|
disabled,
|
||
|
|
className,
|
||
|
|
...props
|
||
|
|
}: ButtonLoadingProps) {
|
||
|
|
return (
|
||
|
|
<Button
|
||
|
|
disabled={disabled || isLoading}
|
||
|
|
className={cn(className)}
|
||
|
|
{...props}
|
||
|
|
>
|
||
|
|
{isLoading && (
|
||
|
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" aria-hidden="true" />
|
||
|
|
)}
|
||
|
|
{isLoading && loadingText ? loadingText : children}
|
||
|
|
</Button>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|