Changed strategy to not have to apply classes to different div elements, not breaking the other buttons.

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" })}>
+        <Comp
-          <div
+          className={cn(buttonVariants({ variant, size, className }))}
-            className={cn(
+          ref={ref}
-              loading ? "opacity-100" : "opacity-0",
+          {...props}
-              "absolute self-center",
+        >
+          <>
+            {loading ? (
+              <div style={{ width: loading && width ? `${width}px` : "auto" }}>
+                <ForwardedIconComponent
+                  name={"Loader2"}
+                  className={"animate-spin"}
+                />
+              </div>
+            ) : (
+              children
             )}
-          >
+          </>
-            <ForwardedIconComponent
+        </Comp>
-              name={"Loader2"}
+        <div
-              className={"animate-spin"}
+          ref={hiddenRef}
-            />
+          style={{
-          </div>
+            visibility: "hidden",
-          <div
+            position: "absolute",
-            className={cn(
+            whiteSpace: "nowrap",
-              loading ? "opacity-0" : "opacity-100",
+          }}
-              buttonVariants({
+        >
-                variant: "none",
+          {children}
-                size,
-                className: cn(buttonChildrenClasses, className),
-              }),
-            )}
-          >
-            {newChildren}
-          </div>
         </div>
-      </Comp>
+      </>
     );
   },
 );