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/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;