Made Submit button use loading of button

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}
         >

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}
+          loading={submit.loading}
-          className="relative"
         >
-          <div
+          {submit.icon && submit.icon}
-            className={cn(
+          {submit.label}
-              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>
         </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;