Fixed button layout to have loading the same size as the original button

2024-06-04 11:35:37 -03:00 · 2024-06-04 11:35:37 -03:00 · cad4c508a9
commit cad4c508a9
parent 5b83bde64e
1 changed files with 11 additions and 4 deletions
--- a/src/frontend/src/components/ui/button.tsx
+++ b/src/frontend/src/components/ui/button.tsx
@ -68,10 +68,17 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
          {...props}
        >
          {loading ? (
-            <ForwardedIconComponent
-              name={"Loader2"}
-              className={"animate-spin"}
-            />
+            <span className={cn("relative")}>
+              <span className={loading ? "invisible" : "hidden"}>
+                {newChildren}
+              </span>
+              <span className="absolute inset-0 flex items-center justify-center">
+                <ForwardedIconComponent
+                  name={"Loader2"}
+                  className={"animate-spin"}
+                />
+              </span>
+            </span>
          ) : (
            newChildren
          )}