Waitp 1121 loading indicator not visible (#4422)

* WAITP-1145 create commands for reloading on dev

* WAITP-1145 add in babel package, fix typo

* WAITP-1121 Loading indicator when changing dates

* WAITP-1121 fix missing comma

* WAITP-1121 Update loading indicator

* match dev

* WAITP-1121 Loading indicator when changing dates

---------

Co-authored-by: Tom Caiger <caigertom@gmail.com>
Co-authored-by: Andrew <vanbeekandrew@gmail.com>

packages/web-frontend/src/containers/EnlargedDialog/EnlargedDialogContent.js

@@ -128,9 +128,10 @@ export class EnlargedDialogContent extends PureComponent {
   }
 
   renderBody() {
-    const { viewContent, errorMessage } = this.props;
+    const { viewContent, errorMessage, isLoading } = this.props;
     const noData = viewContent.data && viewContent.data.length === 0;
 
+    if (isLoading) return <LoadingIndicator showBackground={false} />;
     if (errorMessage) {
       return <StyledAlert severity="error">{errorMessage}</StyledAlert>;
     }

packages/web-frontend/src/containers/Form/common/LoadingIndicator.js

@@ -8,22 +8,30 @@
 import React from 'react';
 import styled from 'styled-components';
 import CircularProgress from '@material-ui/core/CircularProgress';
+import PropTypes from 'prop-types';
 
 const LoadingOverlay = styled.div`
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
-  background: rgba(255, 255, 255, 0.7);
+  background: ${props => (props.showBackground ? 'rgba(255, 255, 255, 0.5)' : 'transparent')};
   z-index: 2;
   display: flex;
   align-items: center;
   justify-content: center;
 `;
 
-export const LoadingIndicator = () => (
-  <LoadingOverlay>
+export const LoadingIndicator = ({ showBackground }) => (
+  <LoadingOverlay showBackground={showBackground}>
     <CircularProgress />
   </LoadingOverlay>
 );
+
+LoadingIndicator.propTypes = {
+  showBackground: PropTypes.bool,
+};
+LoadingIndicator.defaultProps = {
+  showBackground: true,
+};