39 lines
1.0 KiB
TypeScript
39 lines
1.0 KiB
TypeScript
import React from 'react';
|
|
import { Button, ButtonProps } from './Button';
|
|
import { Loader2 } from 'lucide-react';
|
|
import { cn } from '@utils/cn';
|
|
|
|
interface LoadingButtonProps extends ButtonProps {
|
|
loading?: boolean;
|
|
}
|
|
|
|
const LoadingButton = React.forwardRef<HTMLButtonElement, LoadingButtonProps>(
|
|
({ loading, children, disabled, ...props }, ref) => {
|
|
return (
|
|
<Button {...props} disabled={disabled || loading} ref={ref}>
|
|
<div className='relative'>
|
|
<span
|
|
className={cn(
|
|
'flex items-center justify-center',
|
|
loading ? 'invisible' : 'visible'
|
|
)}
|
|
>
|
|
{children}
|
|
</span>
|
|
|
|
{loading && (
|
|
<span className='absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center gap-2'>
|
|
<Loader2 className='h-4 w-4 animate-spin' />
|
|
Loading
|
|
</span>
|
|
)}
|
|
</div>
|
|
</Button>
|
|
);
|
|
}
|
|
);
|
|
|
|
LoadingButton.displayName = 'LoadingButton';
|
|
|
|
export { LoadingButton };
|