Refactor modal loader to be an overlay (to match height) and disable delete button while loading

src/components/blocks/Modal.js

@@ -2,6 +2,7 @@ import React, { useEffect, useContext } from 'react';
 import { ModalDispatchContext } from '../../contexts/ModalContext';
 import styled from 'styled-components/macro';
 import Button from '../elements/Button';
+import Loader from '../blocks/Loader';
 
 const Overlay = styled.div`
   position: fixed;
@@ -30,6 +31,22 @@ const ModalContainer = styled.div`
   }
 `;
 
+const ContentContainer = styled.div`
+  position: relative;
+`;
+
+const LoaderContainer = styled.div`
+  position: absolute;
+  top: 0;
+  left: -1.5rem;
+  height: 100%;
+  width: calc(100% + 3rem);
+  background: #FFF;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
 const ButtonContainer = styled.div`
   display: flex;
   justify-content: flex-end;
@@ -76,15 +93,26 @@ const Modal = props => {
     <Overlay onClick={props.handleCancel}>
       <ModalContainer onClick={e => e.stopPropagation()}>
         <h1>{props.title}</h1>
-        {props.content}
-        <ButtonContainer>
-          <Button inModal gray onClick={props.handleCancel}>
-            Cancel
-          </Button>
-          <Button inModal onClick={props.handleSubmit}>
-            {props.actionText}
-          </Button>
-        </ButtonContainer>
+        <ContentContainer>
+          {props.content}
+          <ButtonContainer>
+            <Button inModal gray onClick={props.handleCancel}>
+              Cancel
+            </Button>
+            <Button
+              inModal
+              disabled={props.loader}
+              onClick={props.handleSubmit}
+            >
+              {props.actionText}
+            </Button>
+          </ButtonContainer>
+          {props.loader && (
+            <LoaderContainer>
+              <Loader />
+            </LoaderContainer>
+          )}
+        </ContentContainer>
       </ModalContainer>
     </Overlay>
   );

src/components/blocks/TableContent.js

@@ -161,33 +161,32 @@ const TableContent = props => {
       {contentToDelete && (contentToDelete.name || contentToDelete.number) && (
         <Modal
           title={`Are you sure you want to delete the following ${props.name}?`}
+          loader={showModalLoader}
           content={
-            showModalLoader
-              ? <Loader />
-              : <div>
-                  <table>
-                    <tbody>
-                      {props.formatContentToDelete(contentToDelete).map((d, i) => (
-                        <tr key={i}>
-                          <Td>{d.name}</Td>
-                          <Td>
-                            {typeof d.content === 'string'
-                              ? d.content
-                              : <ul>
-                                  {d.content.map((c, i) => (
-                                    <li key={i}>{c}</li>
-                                  ))}
-                                </ul>
-                            }
-                          </Td>
-                        </tr>
-                      ))}
-                    </tbody>
-                  </table>
-                  {errorMessage && (
-                    <FormError message={errorMessage} />
-                  )}
-                </div>
+            <div>
+              <table>
+                <tbody>
+                  {props.formatContentToDelete(contentToDelete).map((d, i) => (
+                    <tr key={i}>
+                      <Td>{d.name}</Td>
+                      <Td>
+                        {typeof d.content === 'string'
+                          ? d.content
+                          : <ul>
+                              {d.content.map((c, i) => (
+                                <li key={i}>{c}</li>
+                              ))}
+                            </ul>
+                        }
+                      </Td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+              {errorMessage && (
+                <FormError message={errorMessage} />
+              )}
+            </div>
           }
           handleCancel={() => {
             setContentToDelete({});

src/components/elements/Button.js

@@ -260,7 +260,7 @@ const Button = (props, ref) => {
     <StyledButton
       {...props}
       ref={buttonRef}
-      disabled={modalOpen && !props.inModal}
+      disabled={(modalOpen && !props.inModal) || props.disabled}
     >
       <span tabIndex="-1">
         {props.children}