Simplify the usage of spinner inside the Button component

[rluders]

Is your feature request related to a problem? Please describe.

Currently in order to have a Spinner inside a Button to indicate processing we need to manually build all the logic. Lets make it something present inside the component.

Describe the solution you'd like

Some ideas:

<Button type="submit" color="info" processing={true} processingText="Sending...">Send</Button>

Describe alternatives you've considered n/a

Additional context n/a

[tulup-conner]

Thoughts on <Button spinner spinnerText="Sending..">Send</Button> here? This is easy to implement.

[rluders]

Yep, I think that it makes sense.

[aminlotfi]

I'm going to implement it.

[MiroslavPetrik]

I had to position the spinner absolutely inside the button & add custom paddings based on the size.

Looks good, maybe for lg the spinner is too big.

import {
  Button as BaseButton,
  ButtonProps,
  Spinner,
  useTheme,
} from "flowbite-react";

export const Button = ({
  loadingText = "Načitávam...",
  children,
  isLoading,
  size,
  color = "primary",
  ...props
}: Partial<{ isLoading: boolean; loadingText: string }> & ButtonProps) => {
  return (
    <BaseButton
      disabled={isLoading}
      color={color}
      size={size}
      className="relative"
      {...props}
    >
      {isLoading ? (
        <>
          <Spinner
            size={size}
            color={color}
            className={`absolute ${size === "sm" ? "top-2.5" : "top-2"}`}
          />{" "}
          <span
            className={
              size === "lg" ? "pl-12" : size === "sm" ? "pl-6" : "pl-8"
            }
          >
            {loadingText}{" "}
          </span>
        </>
      ) : (
        children
      )}
    </BaseButton>
  );
};

[rluders]

I updated the existing PR for this one. Maybe someone could test and review it.

[timootten]

Hey, how can I use/install it? :) npm i flowbite flowbite-react is not working.