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?

Author: Valentin Hervieu

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

@@ -82,6 +82,7 @@ const ForkButton = ({
     style={style}
     secondary={secondary}
     disabled={isForking}
+    loading={isForking}
     small
   >
     <>

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

@@ -39,6 +39,7 @@ class More extends React.Component<Props> {
               small
               block
               disabled={isForkingSandbox}
+              loading={isForkingSandbox}
               onClick={this.forkSandbox}
             >
               {isForkingSandbox ? 'Forking Sandbox...' : 'Fork Sandbox'}

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

@@ -1,10 +1,11 @@
-import styled, { css } from 'styled-components';
+import styled, { css, keyframes } 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;
@@ -97,14 +98,39 @@ 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;
 
@@ -150,6 +176,8 @@ 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

@@ -11,6 +11,7 @@ type Props = {
   children?: React.ReactElement | string;
   disabled?: boolean;
   type?: 'button' | 'reset' | 'submit';
+  loading?: boolean;
   secondary?: boolean;
 };