From 9e6f3a064df2bebbddbd29af05a048f37348ce48 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 4 Jun 2024 19:01:01 -0300
Subject: [PATCH] Made Submit button use loading of button

---
 src/frontend/src/components/ui/button.tsx   | 14 ++++++++--
 src/frontend/src/modals/baseModal/index.tsx | 30 ++++++---------------
 2 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/src/frontend/src/components/ui/button.tsx b/src/frontend/src/components/ui/button.tsx
index faab61370..d7562d58a 100644
--- a/src/frontend/src/components/ui/button.tsx
+++ b/src/frontend/src/components/ui/button.tsx
@@ -5,7 +5,7 @@ import { cn } from "../../utils/utils";
 import ForwardedIconComponent from "../genericIconComponent";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none  ring-offset-background",
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none  ring-offset-background",
   {
     variants: {
       variant: {
@@ -54,7 +54,16 @@ function toTitleCase(text: string) {
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   (
-    { className, variant, size, loading, asChild = false, children, ...props },
+    {
+      className,
+      variant,
+      size,
+      loading,
+      disabled,
+      asChild = false,
+      children,
+      ...props
+    },
     ref,
   ) => {
     const Comp = asChild ? Slot : "button";
@@ -66,6 +75,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       <>
         <Comp
           className={cn(buttonVariants({ variant, size, className }))}
+          disabled={loading || disabled}
           ref={ref}
           {...props}
         >
diff --git a/src/frontend/src/modals/baseModal/index.tsx b/src/frontend/src/modals/baseModal/index.tsx
index a9efe3ddf..2b1c67db7 100644
--- a/src/frontend/src/modals/baseModal/index.tsx
+++ b/src/frontend/src/modals/baseModal/index.tsx
@@ -86,24 +86,10 @@ const Footer: React.FC<{
         <Button
           data-testid={submit.dataTestId}
           type="submit"
-          disabled={submit.loading || submit.disabled}
-          className="relative"
+          loading={submit.loading}
         >
-          <div
-            className={cn(
-              submit.loading ? "opacity-100" : "opacity-0",
-              "absolute self-center"
-            )}
-          >
-            <ForwardedIconComponent
-              name={"Loader2"}
-              className={"animate-spin"}
-            />
-          </div>
-          <div className={cn(submit.loading ? "opacity-0" : "opacity-100")}>
-            {submit.icon && submit.icon}
-            {submit.label}
-          </div>
+          {submit.icon && submit.icon}
+          {submit.label}
         </Button>
       </div>
     </div>
@@ -116,7 +102,7 @@ interface BaseModalProps {
     React.ReactElement<ContentProps>,
     React.ReactElement<HeaderProps>,
     React.ReactElement<TriggerProps>?,
-    React.ReactElement<FooterProps>?
+    React.ReactElement<FooterProps>?,
   ];
   open?: boolean;
   setOpen?: (open: boolean) => void;
@@ -150,16 +136,16 @@ function BaseModal({
   onSubmit,
 }: BaseModalProps) {
   const headerChild = React.Children.toArray(children).find(
-    (child) => (child as React.ReactElement).type === Header
+    (child) => (child as React.ReactElement).type === Header,
   );
   const triggerChild = React.Children.toArray(children).find(
-    (child) => (child as React.ReactElement).type === Trigger
+    (child) => (child as React.ReactElement).type === Trigger,
   );
   const ContentChild = React.Children.toArray(children).find(
-    (child) => (child as React.ReactElement).type === Content
+    (child) => (child as React.ReactElement).type === Content,
   );
   const ContentFooter = React.Children.toArray(children).find(
-    (child) => (child as React.ReactElement).type === Footer
+    (child) => (child as React.ReactElement).type === Footer,
   );
 
   let minWidth: string;