Disable fork button while forking (#1667)

* Disable fork button while forking

Fixes #844.

This is a first fix. I'd like to work on a better feedback, maybe a circular loader inside the button. What do you think?

* Change the text to "Forking" while forking

* Also disabled the "Fork Sandbox" button in Workspace More

* Forking...

* Forking... 2

Author: ValentinH

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

@@ -46,6 +46,10 @@ type ButtonProps = {
   secondary?: boolean;
 };
 
+type ForkButtonProps = ButtonProps & {
+  isForking: boolean;
+};
+
 const LikeButton = ({
   store,
   signals,
@@ -64,18 +68,24 @@ const LikeButton = ({
   />
 );
 
-const ForkButton = ({ signals, secondary, style }: ButtonProps) => (
+const ForkButton = ({
+  signals,
+  secondary,
+  isForking,
+  style,
+}: ForkButtonProps) => (
   <Button
     onClick={() => {
       signals.editor.forkSandboxClicked();
     }}
     style={style}
     secondary={secondary}
+    disabled={isForking}
     small
   >
     <>
       <Fork style={{ marginRight: '.5rem' }} />
-      Fork
+      {isForking ? 'Forking...' : 'Fork'}
     </>
   </Button>
 );
@@ -210,6 +220,7 @@ const Header = ({ store, signals, zenMode }: Props) => {
         />
         <ForkButton
           secondary={sandbox.owned}
+          isForking={store.editor.isForkingSandbox}
           style={{ fontSize: '.75rem' }}
           signals={signals}
           store={store}

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

@@ -27,15 +27,21 @@ class More extends React.PureComponent<Props> {
 
   render() {
     const { owned } = this.props.store.editor.currentSandbox;
+    const { isForkingSandbox } = this.props.store.editor;
     const message = !owned ? NOT_OWNED_MESSAGE : NOT_SIGNED_IN_MESSAGE;
 
     return (
       <div>
         <Description>{message}</Description>
         <Margin margin={1}>
           {!owned ? (
-            <Button small block onClick={this.forkSandbox}>
-              Fork Sandbox
+            <Button
+              small
+              block
+              disabled={isForkingSandbox}
+              onClick={this.forkSandbox}
+            >
+              {isForkingSandbox ? 'Forking Sandbox...' : 'Fork Sandbox'}
             </Button>
           ) : (
             <SignInButton block />