From f1aaa162e2dd68f2cd896d2542aa5c2c564c093d Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 4 Jun 2024 10:49:36 -0300
Subject: [PATCH] Changed strategy to not have to apply classes to different
 div elements, not breaking the other buttons.

---
 src/frontend/src/components/ui/button.tsx | 68 ++++++++++++-----------
 1 file changed, 37 insertions(+), 31 deletions(-)

diff --git a/src/frontend/src/components/ui/button.tsx b/src/frontend/src/components/ui/button.tsx
index ed0abc120..6107b78a3 100644
--- a/src/frontend/src/components/ui/button.tsx
+++ b/src/frontend/src/components/ui/button.tsx
@@ -4,11 +4,8 @@ import * as React from "react";
 import { cn } from "../../utils/utils";
 import ForwardedIconComponent from "../genericIconComponent";
 
-const buttonChildrenClasses =
-  "inline-flex items-center justify-center text-sm font-medium";
-
 const buttonVariants = cva(
-  "inline-flex items-center justify-center text-sm font-medium relative rounded-md 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 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: {
@@ -23,7 +20,6 @@ const buttonVariants = cva(
           "border border-muted bg-muted text-secondary-foreground hover:bg-secondary-foreground/5",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "underline-offset-4 hover:underline text-primary",
-        none: "",
       },
       size: {
         default: "h-10 py-2 px-4",
@@ -31,7 +27,6 @@ const buttonVariants = cva(
         xs: "py-0.5 px-3 rounded-md",
         lg: "h-11 px-8 rounded-md",
         icon: "py-1 px-1 rounded-md",
-        none: "",
       },
     },
     defaultVariants: {
@@ -65,34 +60,45 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     if (typeof children === "string") {
       newChildren = toTitleCase(children);
     }
+    const [width, setWidth] = React.useState<number | null>(null);
+    const hiddenRef = React.useRef<HTMLDivElement>(null);
+
+    React.useEffect(() => {
+      if (hiddenRef.current) {
+        setWidth(hiddenRef.current.offsetWidth);
+      }
+    }, [children, hiddenRef]);
     return (
-      <Comp ref={ref} {...props}>
-        <div className={buttonVariants({ variant, size: "none" })}>
-          <div
-            className={cn(
-              loading ? "opacity-100" : "opacity-0",
-              "absolute self-center",
+      <>
+        <Comp
+          className={cn(buttonVariants({ variant, size, className }))}
+          ref={ref}
+          {...props}
+        >
+          <>
+            {loading ? (
+              <div style={{ width: loading && width ? `${width}px` : "auto" }}>
+                <ForwardedIconComponent
+                  name={"Loader2"}
+                  className={"animate-spin"}
+                />
+              </div>
+            ) : (
+              children
             )}
-          >
-            <ForwardedIconComponent
-              name={"Loader2"}
-              className={"animate-spin"}
-            />
-          </div>
-          <div
-            className={cn(
-              loading ? "opacity-0" : "opacity-100",
-              buttonVariants({
-                variant: "none",
-                size,
-                className: cn(buttonChildrenClasses, className),
-              }),
-            )}
-          >
-            {newChildren}
-          </div>
+          </>
+        </Comp>
+        <div
+          ref={hiddenRef}
+          style={{
+            visibility: "hidden",
+            position: "absolute",
+            whiteSpace: "nowrap",
+          }}
+        >
+          {children}
         </div>
-      </Comp>
+      </>
     );
   },
 );