25 lines
876 B
TypeScript
25 lines
876 B
TypeScript
import { cn } from '@/lib/utils';
|
|
import { LoaderCircle } from 'lucide-react';
|
|
import { forwardRef } from 'react';
|
|
import { Button, ButtonProps } from './ui/button';
|
|
|
|
interface LoadingButtonProps extends ButtonProps {
|
|
loading: boolean;
|
|
iconClass?: string;
|
|
}
|
|
|
|
const LoadingButton = forwardRef<HTMLButtonElement, LoadingButtonProps>((buttonProps, ref) => {
|
|
const { loading, children, iconClass, className, ...props } = buttonProps;
|
|
|
|
return (
|
|
<Button ref={ref} type={props.type || 'submit'} className={cn('relative', className)} disabled={loading} {...props}>
|
|
{loading && <LoaderCircle className={cn('absolute h-4 w-4 animate-spin', iconClass)} />}
|
|
<div className={cn('opacity-100', loading ? 'opacity-0' : 'opacity-100')}>{children}</div>
|
|
</Button>
|
|
);
|
|
});
|
|
|
|
LoadingButton.displayName = 'LoadingButton';
|
|
|
|
export default LoadingButton;
|