Add `isLoading` prop in Button and ConfirmModal

src/components/base/Button/index.js

@@ -6,9 +6,10 @@ import { space, fontSize, fontWeight, color } from 'styled-system'
 import noop from 'lodash/noop'
 
 import { darken, lighten } from 'styles/helpers'
-
 import fontFamily from 'styles/styled/fontFamily'
 
+import Spinner from 'components/base/Spinner'
+
 const buttonStyles = {
   primary: {
     default: p => `
@@ -73,6 +74,14 @@ const buttonStyles = {
       padding-right: ${space[1]}px;
     `,
   },
+  isLoading: {
+    default: () => `
+      padding-left: 40px;
+      padding-right: 40px;
+      pointer-events: none;
+      opacity: 0.7;
+    `,
+  },
 }
 
 function getStyles(props, state) {
@@ -127,14 +136,15 @@ type Props = {
   onClick?: Function,
   small?: boolean,
   padded?: boolean,
+  isLoading?: boolean,
 }
 
 const Button = (props: Props) => {
-  const { onClick, children, disabled } = props
-
+  const { onClick, children, disabled, isLoading } = props
+  const isClickDisabled = disabled || isLoading
   return (
-    <Base {...props} onClick={disabled ? undefined : onClick}>
-      {children}
+    <Base {...props} onClick={isClickDisabled ? undefined : onClick}>
+      {isLoading ? <Spinner size={16} /> : children}
     </Base>
   )
 }

src/components/base/Modal/ConfirmModal.js

@@ -21,6 +21,7 @@ type Props = {
   onReject: Function,
   onConfirm: Function,
   t: T,
+  isLoading?: boolean,
 }
 
 class ConfirmModal extends PureComponent<Props> {
@@ -35,6 +36,7 @@ class ConfirmModal extends PureComponent<Props> {
       isDanger,
       onReject,
       onConfirm,
+      isLoading,
       t,
       ...props
     } = this.props
@@ -44,9 +46,10 @@ class ConfirmModal extends PureComponent<Props> {
     return (
       <Modal
         isOpened={isOpened}
+        preventBackdropClick={isLoading}
         {...props}
         render={({ onClose }) => (
-          <ModalBody onClose={onClose}>
+          <ModalBody onClose={isLoading ? undefined : onClose}>
             <ModalTitle>{title}</ModalTitle>
             <ModalContent>
               {subTitle && (
@@ -59,8 +62,13 @@ class ConfirmModal extends PureComponent<Props> {
               </Box>
             </ModalContent>
             <ModalFooter horizontal align="center" justify="flex-end" flow={2}>
-              <Button onClick={onReject}>{realCancelText}</Button>
-              <Button onClick={onConfirm} primary={!isDanger} danger={isDanger}>
+              {!isLoading && <Button onClick={onReject}>{realCancelText}</Button>}
+              <Button
+                onClick={onConfirm}
+                primary={!isDanger}
+                danger={isDanger}
+                isLoading={isLoading}
+              >
                 {realConfirmText}
               </Button>
             </ModalFooter>