feature: add loading state to button

src/components/ui/button/button.stories.tsx

@@ -47,6 +47,18 @@ export const Primary = {
   },
 };
 
+export const PrimaryLoading = {
+  ...Template,
+  args: {
+    size: "default",
+    variant: "default",
+    onClick: () => {
+      console.log("on click");
+    },
+    isLoading: true,
+  },
+};
+
 export const Secondary = {
   ...Template,
   args: {

src/components/ui/button/button.tsx

@@ -37,17 +37,29 @@ interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
+  isLoading?: boolean;
 }
 
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+  ({ className, variant, size, asChild = false, isLoading, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
-      />
+      >
+        {isLoading ? (
+          <div className="flex flex-row gap-2 items-center justify-center">
+            <div className="inline-block w-4 h-4 border border-transparent border-l-primary-foreground border-t-primary-foreground border-b-primary-foreground rounded-full box-border animate-spin" />
+            <div className="text-sm font-medium text-primary-foreground">
+              Loading
+            </div>
+          </div>
+        ) : (
+          props.children
+        )}
+      </Comp>
     );
   }
 );

tailwind.config.js

@@ -57,6 +57,15 @@ module.exports = {
         disabled: "0.5",
         default: "0.5",
       },
+      keyframes: {
+        spin: {
+          from: { transform: "rotate(0deg)" },
+          to: { transform: "rotate(360deg)" },
+        },
+      },
+      animation: {
+        spin: "spin 1s linear infinite;",
+      },
       borderRadius: {
         lg: "8px",
         md: "6px",