feat(app-components): button not change width on loading

eficode · Feb 4, 2021 · 6e8e633 · 6e8e633
1 parent ae72740
commit 6e8e633
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 7 deletions.
diff --git a/packages/game-app/src/_shared/components/Button/Button.styled.tsx b/packages/game-app/src/_shared/components/Button/Button.styled.tsx
@@ -1,6 +1,8 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { variant, color } from 'styled-system';
 import Icon from '../Icon';
+import Spinner from '../Spinner';
+import Typography from '../Typography';
 
 export type Variants = 'default' | 'clear';
 
@@ -69,3 +71,19 @@ export const NotHoverIconWrapper = styled(IconWrapper)`
 `;
 
 NotHoverIconWrapper.displayName = 'NotHoverIconWrapper';
+
+export const ButtonSpinner = styled(Spinner)`
+  position: absolute;
+`;
+
+ButtonSpinner.displayName = 'ButtonSpinner';
+
+export const ButtonLabel = styled(Typography)<{ loading?: boolean }>`
+  ${props =>
+    props.loading &&
+    css`
+      visibility: hidden;
+    `}
+`;
+
+ButtonLabel.displayName = 'ButtonLabel';
diff --git a/packages/game-app/src/_shared/components/Button/Button.tsx b/packages/game-app/src/_shared/components/Button/Button.tsx
@@ -1,6 +1,12 @@
 import React from 'react';
-import { ButtonContent, NotHoverIconWrapper, StyledButton, Variants } from './Button.styled';
-import Spinner from '../Spinner';
+import {
+  ButtonContent,
+  ButtonLabel,
+  ButtonSpinner,
+  NotHoverIconWrapper,
+  StyledButton,
+  Variants,
+} from './Button.styled';
 
 type Props = {
   id?: string;
@@ -37,7 +43,8 @@ const Button: React.FC<Props> = ({
     >
       <ButtonContent>
         {leftIcon ? <NotHoverIconWrapper>{leftIcon}</NotHoverIconWrapper> : null}
-        {loading ? <Spinner /> : label}
+        {loading && <ButtonSpinner />}
+        <ButtonLabel loading={loading}>{label}</ButtonLabel>
       </ButtonContent>
     </StyledButton>
   );

diff --git a/packages/game-app/src/_shared/components/Spinner/Spinner.tsx b/packages/game-app/src/_shared/components/Spinner/Spinner.tsx
@@ -1,11 +1,13 @@
 import React from 'react';
 import { StyledSpinner } from './Spinner.styled';
 
-type Props = {};
+type Props = {
+  className?: string;
+};
 
-const Spinner: React.FC<Props> = ({}) => {
+const Spinner: React.FC<Props> = ({ className }) => {
   return (
-    <StyledSpinner>
+    <StyledSpinner className={className}>
       <div className="thumb"></div>
       <div className="placeholder"></div>
     </StyledSpinner>