From 7acf534d483bc8c7789273d4306e09100b67d7b6 Mon Sep 17 00:00:00 2001
From: oliviercperrier <>
Date: Sun, 2 Mar 2025 17:08:02 -0500
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20loading=20props=20on=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/base/Buttons/IconButton.tsx    | 17 +++++++++--
 frontend/components/base/ui/button.tsx        | 28 +++++++++++++++++--
 2 files changed, 40 insertions(+), 5 deletions(-)

diff --git a/frontend/components/base/Buttons/IconButton.tsx b/frontend/components/base/Buttons/IconButton.tsx
index 275ef24..7a75739 100644
--- a/frontend/components/base/Buttons/IconButton.tsx
+++ b/frontend/components/base/Buttons/IconButton.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { VariantProps } from "tailwind-variants";
 import { iconButtonVariants } from "./button.variants";
 import { LucideProps } from "lucide-react";
+import { Spinner } from "../spinner";
 
 export type IconButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
   VariantProps<typeof iconButtonVariants> & {
@@ -9,6 +10,7 @@ export type IconButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
       Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>
     >;
     iconClassName?: string;
+    loading?: boolean;
   };
 
 const IconButton = ({
@@ -17,14 +19,23 @@ const IconButton = ({
   variant,
   className,
   iconClassName,
-
+  loading = false,
+  disabled = false,
   ...props
 }: IconButtonProps) => {
   const style = iconButtonVariants({ size, variant });
 
   return (
-    <button {...props} className={style.base({ className })}>
-      <Icon className={style.icon({ className: iconClassName })} />
+    <button
+      {...props}
+      className={style.base({ className })}
+      disabled={disabled || loading}
+    >
+      {loading ? (
+        <Spinner className={style.icon({ className: iconClassName })} />
+      ) : (
+        <Icon className={style.icon({ className: iconClassName })} />
+      )}
     </button>
   );
 };
diff --git a/frontend/components/base/ui/button.tsx b/frontend/components/base/ui/button.tsx
index c162fdb..5c9be54 100644
--- a/frontend/components/base/ui/button.tsx
+++ b/frontend/components/base/ui/button.tsx
@@ -2,19 +2,43 @@ import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { buttonVariants } from "../Buttons";
 import { VariantProps } from "tailwind-variants";
+import { Spinner } from "../spinner";
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
+  loading?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+  (
+    {
+      className,
+      variant,
+      size,
+      children,
+      asChild = false,
+      loading = false,
+      disabled = false,
+      ...props
+    },
+    ref
+  ) => {
     const Comp = asChild ? Slot : "button";
     const style = buttonVariants({ variant, size });
 
-    return <Comp className={style.base({ className })} ref={ref} {...props} />;
+    return (
+      <Comp
+        ref={ref}
+        className={style.base({ className })}
+        disabled={disabled || loading}
+        {...props}
+      >
+        {loading && <Spinner />}
+        {children}
+      </Comp>
+    );
   }
 );
 Button.displayName = "Button";