[FEATURE]: Add a Loading Prop to Button Component

[jamesqquick]

Although we are using the Button component consistently, we are manually handling loading states.

Describe the solution you'd like
Add a loading prop to the Button component and have it handle the logic for displaying the loader.

Describe the benefits of your solution
This will ensure consistency across all loading button states.

*idea from @joshmedeski

[Ibarra11]

I’m interested in working on this issue. Could you please assign it to me?

[jamesqquick]

@Ibarra11 done!

[Ibarra11]

Alright, I'm currently working on it. From what I can tell there are two buttons that use a loading state SubmitButton and SubscribeFormButton. The SubmitButton utilizes a Loading component that shows the spinner and SubscribeFormButton has its own spinner. I would assume that we would want to use the Loading component for the spinner because it has some accessibility stuff with it as well. One issue is that the spinners are different colors for each button, the SubmitButton is Black and the SubscribeFormButton is Teal. I'm not sure how you would go about handling this but just trying things, I added some disabled pseudo state class and within the button just inherit that text.

SubscribeFormButton

  <Button
      className="h  absolute right-1 top-1 border border-red-500 bg-transparent pr-[19px] transition-transform hover:translate-x-0.5 disabled:text-teal-500 md:top-4"
      disabled={pending}
      loading={pending}
      aria-label="Submit"
    >

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  (
    {
      className,
      variant,
      size,
      children,
      asChild = false,
      loading = false,
      ...props
    },
    ref
  ) => {
    const Comp = asChild ? Slot : 'button'
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      >
        {loading ?
          <span className="text-inherit">
            <Loading />
          </span>
        : children}
      </Comp>
    )
  }
)

[jamesqquick]

Thanks for working on this. Could we update the color of the loader based on the variant of the button? Maybe pass in the color to the loader?