Returned loader to default, fixed buttons not working with asChild

src/frontend/src/components/ui/button.tsx

@@ -60,14 +60,6 @@ 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
@@ -75,29 +67,15 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
           ref={ref}
           {...props}
         >
-          <>
+          {loading ? (
-            {loading ? (
+            <ForwardedIconComponent
-              <div style={{ width: loading && width ? `${width}px` : "auto" }}>
+              name={"Loader2"}
-                <ForwardedIconComponent
+              className={"animate-spin"}
-                  name={"Loader2"}
+            />
-                  className={"animate-spin"}
+          ) : (
-                />
+            newChildren
-              </div>
+          )}
-            ) : (
-              children
-            )}
-          </>
         </Comp>
-        <div
-          ref={hiddenRef}
-          style={{
-            visibility: "hidden",
-            position: "absolute",
-            whiteSpace: "nowrap",
-          }}
-        >
-          {children}
-        </div>
       </>
     );
   },