Show a loader on the button while forking (#1733)

* Show a loader on the button while forking This is a follow-up of #1667. The effect is simple because for now I didn't want to modify the markup of the button. As far as my limited CSS skills lead me, @CompuIves suggestion regarding nzbin.github.io/three-dots would require to have a div wrapper around the button and a div to display the 3 dots. Do we want to do this? * Introduce ProgressButton to have more possibilities for the loader * Make the circles a bit smaller
codesandbox · Apr 16, 2019 · 33f19af · 33f19af
1 parent 37c548b
commit 33f19af
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 8 deletions.
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Header/index.tsx b/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,20 +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) => {

diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/More/index.tsx b/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,14 +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 />
           )}

diff --git a/packages/common/src/components/Button/index.tsx b/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;

diff --git a/packages/common/src/components/ProgressButton/elements.ts b/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: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: ${theme.secondary()};
+  opacity: 0.7;
+  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: -12px;
+    ${circle};
+    animation-delay: 0s;
+  }
+
+  &:after {
+    content: ' ';
+    position: absolute;
+    left: 12px;
+    ${circle};
+    animation-delay: 1s;
+  }
+`;
diff --git a/packages/common/src/components/ProgressButton/index.tsx b/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;