add spinner to confirmations modals

packages/component-modal/src/components/ConfirmationModal.js

 import React from 'react'
-import { Icon, Button, th } from '@pubsweet/ui'
 import { compose, withHandlers } from 'recompose'
+import { Icon, Button, th, Spinner } from '@pubsweet/ui'
 import styled, { css, withTheme } from 'styled-components'
 
 const ConfirmationModal = ({
@@ -13,6 +13,7 @@ const ConfirmationModal = ({
   cancelText = 'Cancel',
   theme,
   modalError,
+  isFetching,
 }) => (
   <Root>
     <CloseIcon data-test="icon-modal-hide" onClick={onClose}>
@@ -28,11 +29,16 @@ const ConfirmationModal = ({
       <Button data-test="button-modal-hide" onClick={onClose}>
         {cancelText}
       </Button>
-      {onConfirm && (
-        <Button data-test="button-modal-confirm" onClick={onConfirm} primary>
-          {confirmText}
-        </Button>
-      )}
+      {onConfirm &&
+        (isFetching ? (
+          <SpinnerContainer>
+            <Spinner size={4} />
+          </SpinnerContainer>
+        ) : (
+          <Button data-test="button-modal-confirm" onClick={onConfirm} primary>
+            {confirmText}
+          </Button>
+        ))}
     </ButtonsContainer>
   </Root>
 )
@@ -57,6 +63,14 @@ const defaultText = css`
   font-size: ${th('fontSizeBaseSmall')};
 `
 
+const SpinnerContainer = styled.div`
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  height: calc(${th('gridUnit')} * 2);
+  min-width: calc(${th('gridUnit')} * 4);
+`
+
 const Root = styled.div`
   background-color: ${th('backgroundColor')};
   border: ${th('borderDefault')};

packages/components-faraday/src/components/Reviewers/InviteReviewers.js

@@ -84,14 +84,18 @@ const InviteReviewersModal = compose(
   ),
 )
 
-const ModalSwitcher = ({ type, ...rest }) => {
+const ModalSwitcher = compose(
+  connect(state => ({
+    fetchingInvite: selectFechingInvite(state),
+  })),
+)(({ type, fetchingInvite, ...rest }) => {
   switch (type) {
     case 'invite-reviewers':
       return <InviteReviewersModal {...rest} />
     default:
-      return <ConfirmationModal {...rest} />
+      return <ConfirmationModal {...rest} isFetching={fetchingInvite} />
   }
-}
+})
 
 export default compose(
   withModal2(props => ({

packages/components-faraday/src/redux/reviewers.js

@@ -68,8 +68,12 @@ export const inviteReviewer = (reviewerData, collectionId) => dispatch => {
   }).then(() => dispatch(inviteSuccess()), err => dispatch(inviteError(err)))
 }
 
-export const revokeReviewer = (invitationId, collectionId) => dispatch =>
-  remove(`/collections/${collectionId}/invitations/${invitationId}`)
+export const revokeReviewer = (invitationId, collectionId) => dispatch => {
+  dispatch(inviteRequest())
+  return remove(
+    `/collections/${collectionId}/invitations/${invitationId}`,
+  ).then(() => dispatch(inviteSuccess()), err => dispatch(inviteError(err)))
+}
 
 export default (state = initialState, action = {}) => {
   switch (action.type) {