Introduce ProgressButton to have more possibilities for the loader

Author: Valentin Hervieu

packages/app/src/app/pages/Sandbox/Editor/Header/index.tsx

@@ -8,6 +8,7 @@ import SettingsIcon from 'react-icons/lib/md/settings';
 import ShareIcon from 'react-icons/lib/md/share';
 import SaveIcon from 'react-icons/lib/md/save';
 import { Button } from '@codesandbox/common/lib/components/Button';
+import ProgressButton from '@codesandbox/common/lib/components/ProgressButton';
 import SignInButton from 'app/pages/common/SignInButton';
 
 import { saveAllModules } from 'app/store/modules/editor/utils';
@@ -75,21 +76,20 @@ const ForkButton = ({
   isForking,
   style,
 }: ForkButtonProps) => (
-  <Button
+  <ProgressButton
     onClick={() => {
       signals.editor.forkSandboxClicked();
     }}
     style={style}
     secondary={secondary}
-    disabled={isForking}
     loading={isForking}
     small
   >
     <>
       <Fork style={{ marginRight: '.5rem' }} />
       {isForking ? 'Forking...' : 'Fork'}
     </>
-  </Button>
+  </ProgressButton>
 );
 
 const PickButton = ({ store, signals, secondary, style }: ButtonProps) => {

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/More/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { inject, observer } from 'mobx-react';
 
-import { Button } from '@codesandbox/common/lib/components/Button';
+import ProgressButton from '@codesandbox/common/lib/components/ProgressButton';
 import SignInButton from 'app/pages/common/SignInButton';
 import Margin from '@codesandbox/common/lib/components/spacing/Margin';
 import track from '@codesandbox/common/lib/utils/analytics';
@@ -35,15 +35,14 @@ class More extends React.Component<Props> {
         <Description>{message}</Description>
         <Margin margin={1}>
           {!owned ? (
-            <Button
+            <ProgressButton
               small
               block
-              disabled={isForkingSandbox}
               loading={isForkingSandbox}
               onClick={this.forkSandbox}
             >
               {isForkingSandbox ? 'Forking Sandbox...' : 'Fork Sandbox'}
-            </Button>
+            </ProgressButton>
           ) : (
             <SignInButton block />
           )}

packages/common/src/components/Button/elements.ts

@@ -1,11 +1,10 @@
-import styled, { css, keyframes } from 'styled-components';
+import styled, { css } from 'styled-components';
 import Link from 'react-router-dom/Link';
 import theme from '../../theme';
 
 export type OptionProps = {
   theme: any;
   disabled?: boolean;
-  loading?: boolean;
   red?: boolean;
   secondary?: boolean;
   danger?: boolean;
@@ -98,39 +97,14 @@ const getBorder = ({
   return '2px solid #66B9F4';
 };
 
-const progressAnimation = keyframes`
-  0%   { transform: scale(0); }
-  100% { transform: scale(1); }
-`;
-
-const getLoader = ({ disabled }: OptionProps) => css`
-  &:before {
-    content: ' ';
-    position: absolute;
-    width: 20px;
-    height: 20px;
-    left: 50%;
-    top: 50%;
-    bottom: 0;
-    margin-left: -10px;
-    margin-top: -10px;
-    border-radius: 50%;
-    opacity: 0.5;
-    background: white;
-    animation: ${progressAnimation} 0.7s ease-in-out infinite alternate;
-  }
-`;
-
 const styles = css<{
   disabled?: boolean;
-  loading?: boolean;
   secondary?: boolean;
   danger?: boolean;
   red?: boolean;
   block?: boolean;
   small?: boolean;
 }>`
-  position: relative;
   transition: 0.3s ease all;
   font-family: Poppins, Roboto, sans-serif;
 
@@ -176,8 +150,6 @@ const styles = css<{
     ${props => getBackgroundHoverColor(props)};
     ${props => getHoverColor(props)};
   }
-
-  ${props => props.loading && getLoader(props)};
 `;
 
 export const LinkButton = styled(Link)`

packages/common/src/components/Button/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { LinkButton, AButton, Button } from './elements';
 
-type Props = {
+export type Props = {
   to?: string;
   href?: string;
   small?: boolean;
@@ -11,7 +11,6 @@ type Props = {
   children?: React.ReactElement | string;
   disabled?: boolean;
   type?: 'button' | 'reset' | 'submit';
-  loading?: boolean;
   secondary?: boolean;
 };
 

packages/common/src/components/ProgressButton/elements.ts

@@ -0,0 +1,44 @@
+import styled, { css, keyframes } from 'styled-components';
+import theme from '../../theme';
+
+const loaderAnimation = keyframes`
+  0%   { background-color:  ${theme.secondary()}; }
+  50%, 100% { background-color: ${theme.secondary.lighten(0.5)()}; }
+`;
+
+export const Wrapper = styled.div`
+  position: relative;
+`;
+
+const circle = css`
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: ${theme.secondary()};
+  opacity: 0.5;
+  animation: ${loaderAnimation} 1s infinite linear alternate;
+`;
+
+export const Loader = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  ${circle} animation-delay: 0.5s;
+
+  &:before {
+    content: ' ';
+    position: absolute;
+    left: -15px;
+    ${circle};
+    animation-delay: 0s;
+  }
+
+  &:after {
+    content: ' ';
+    position: absolute;
+    left: 15px;
+    ${circle};
+    animation-delay: 1s;
+  }
+`;

packages/common/src/components/ProgressButton/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Button, Props as ButtonProps } from '../Button';
+import { Wrapper, Loader } from './elements';
+
+type Props = ButtonProps & {
+  loading?: boolean;
+};
+
+function ProgressButton({
+  loading = false,
+  disabled = false,
+  ...props
+}: Props) {
+  return (
+    <Wrapper>
+      <Button disabled={disabled || loading} {...props} />
+      {loading && <Loader />}
+    </Wrapper>
+  );
+}
+
+export default ProgressButton;