Merge pull request #62 from Ferlab-Ste-Justine/loading-buttons

Ferlab-Ste-Justine · Mar 3, 2025 · 9aa0927 · 9aa0927
2 parents b00d1b4 + 7acf534
commit 9aa0927
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 5 deletions.
diff --git a/frontend/components/base/Buttons/IconButton.tsx b/frontend/components/base/Buttons/IconButton.tsx
@@ -2,13 +2,15 @@ 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> & {
     icon: React.ForwardRefExoticComponent<
       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
@@ -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";