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.
@@ -31,24 +31,25 @@ export function Button({
     children,
     ...props
 }) {
-    let buttonClass = className ? `btn ${className}` : "btn btn-primary ";
+    let buttonClass = className ? `btn ${className}` : "btn btn-primary";
     if (forisFormSize) {
         buttonClass = `${buttonClass} col-sm-12 col-md-3 col-lg-2`;
     }
 
-    const span = loading ? (
-        <span
-            className="spinner-border spinner-border-sm"
-            role="status"
-            aria-hidden="true"
-        />
-    ) : null;
-
     return (
-        <button type="button" className={buttonClass} {...props}>
-            {span}
-            {span ? " " : null}
-            {children}
+        <button
+            type="button"
+            className={`${buttonClass} d-inline-flex justify-content-center align-items-center`}
+            {...props}
+        >
+            {loading && (
+                <span
+                    className="spinner-border spinner-border-sm mr-1"
+                    role="status"
+                    aria-hidden="true"
+                />
+            )}
+            <span>{children}</span>
         </button>
     );
 }

src/bootstrap/Spinner.css

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