loading-button.tsx raw

   1  import { Loader2Icon } from "lucide-react";
   2  import * as React from "react";
   3  import { Button } from "src/components/ui/button";
   4  
   5  export interface ButtonProps extends React.ComponentProps<typeof Button> {
   6    loading?: boolean;
   7  }
   8  
   9  const LoadingButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
  10    (
  11      {
  12        className,
  13        variant,
  14        size,
  15        asChild = false,
  16        loading,
  17        children,
  18        disabled,
  19        ...props
  20      },
  21      ref
  22    ) => {
  23      return (
  24        <Button
  25          className={className}
  26          variant={variant}
  27          size={size}
  28          asChild={asChild}
  29          disabled={disabled || loading}
  30          ref={ref}
  31          {...props}
  32        >
  33          {loading && <Loader2Icon className="size-4 animate-spin" />}
  34          {children}
  35        </Button>
  36      );
  37    }
  38  );
  39  LoadingButton.displayName = "LoadingButton";
  40  
  41  export { LoadingButton };
  42