Button: Fix loading state & button's layout

src/bootstrap/Button.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ * Copyright (C) 2019-2023 CZ.NIC z.s.p.o. (https://www.nic.cz/)
  *
  * This is free software, licensed under the GNU General Public License v3.
  * See /LICENSE for more information.
@@ -36,19 +36,20 @@ export function Button({
         buttonClass = `${buttonClass} col-sm-12 col-md-3 col-lg-2`;
     }
 
-    const span = loading ? (
+    return (
+        <button
+            type="button"
+            className={`${buttonClass} d-inline-flex justify-content-center align-items-center`}
+            {...props}
+        >
+            {loading && (
                 <span
-            className="spinner-border spinner-border-sm"
+                    className="spinner-border spinner-border-sm mr-1"
                     role="status"
                     aria-hidden="true"
                 />
-    ) : null;
+            )}
-
+            <span>{children}</span>
-    return (
-        <button type="button" className={buttonClass} {...props}>
-            {span}
-            {span ? " " : null}
-            {children}
         </button>
     );
 }

src/bootstrap/Spinner.css

@@ -31,3 +31,7 @@
 .spinner-fs-wrapper .spinner-text {
     margin: 1rem;
 }
+
+.spinner-border-sm {
+    min-width: 16px;
+}