feat(button-loading): adjust spinner

packages/doc/content/components/components/button/loading-web.mdx

@@ -2,7 +2,7 @@
 
 ```javascript
 <Box display="flex" justifyContent="space-evenly" width="100%">
-  <Button.Loading isLoading loadingLabel="Spinner here">Find an activity</Button.Loading>
+  <Button.Loading isLoading>Find an activity</Button.Loading>
   <Button.Loading>Find an activity</Button.Loading>
 </Box>
 ```

packages/yoga/src/Button/web/Loading.jsx

@@ -1,21 +1,21 @@
 import React from 'react';
 import { bool, string, node } from 'prop-types';
+import styled from 'styled-components';
 import Button from './Button';
 import ButtonOutline from './Outline';
 import ButtonIcon from './Icon';
 import Spinner from '../../Spinner';
 
 const ButtonLoading = ({
   isLoading,
-  loadingLabel,
   children,
   disabled,
   variant,
   ...props
 }) => {
   const commonProps = {
     isLoading,
-    disabled: isLoading,
+    disabled: isLoading || disabled,
     ...props,
   };
 
@@ -26,25 +26,53 @@ const ButtonLoading = ({
 
   const ButtonComponent = variantToComponent[variant] || Button;
 
+  const LoadingContainer = styled.div`
+    position: relative;
+
+    & > span {
+      color: transparent;
+    }
+  `;
+
+  const SpinnerContainer = styled.div`
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  `;
+
+  const renderLoading = () => {
+    return (
+      <LoadingContainer>
+        <span>{children}</span>
+        <SpinnerContainer>
+          <Spinner size="small" />
+        </SpinnerContainer>
+      </LoadingContainer>
+    );
+  };
+
+  const renderLoadingLabel = () => {
+    return <span>{children}</span>;
+  };
+
   return (
     <ButtonComponent {...commonProps}>
-      {isLoading ? <Spinner size="small" /> : children}
+      {isLoading ? renderLoading() : renderLoadingLabel()}
     </ButtonComponent>
   );
 };
 
 ButtonLoading.propTypes = {
   isLoading: bool,
   disabled: bool,
-  loadingLabel: string,
   children: node,
   variant: string,
 };
 
 ButtonLoading.defaultProps = {
   isLoading: false,
   disabled: false,
-  loadingLabel: undefined,
   children: 'Button',
   variant: 'default',
 };