Always set the layoutHeight when calling showDataLoadingIndicator with visible set to true

assets/src/scripts/monitoring-location/components/hydrograph/date-controls.js

@@ -230,7 +230,7 @@ const drawCustomDaysBeforeForm = function(container, store, siteno, initialDateR
                 daysBeforeValidationContainer.attr('hidden', true);
                 store.dispatch(clearGraphBrushOffset());
                 store.dispatch(setSelectedDateRange(`P${parseInt(daysBefore)}D`));
-                showDataLoadingIndicator(true);
+                showDataLoadingIndicator(true, getMainLayout(store.getState()).height);
                 store.dispatch(retrieveHydrographData(siteno, getInputsForRetrieval(store.getState())))
                     .then(() => {
                         showDataLoadingIndicator(false);
@@ -348,7 +348,7 @@ const drawCustomCalendarDaysForm = function(container, store, siteno, initialDat
                     store.dispatch(setSelectedCustomDateRange(DateTime.fromMillis(startTime, {zone: config.locationTimeZone}).toISODate(),
                         DateTime.fromMillis(endTime, {zone: config.locationTimeZone}).toISODate()));
                     store.dispatch(setSelectedDateRange('custom'));
-                    showDataLoadingIndicator(true);
+                    showDataLoadingIndicator(true, getMainLayout(store.getState()).height);
                     store.dispatch(retrieveHydrographData(siteno, getInputsForRetrieval(store.getState())))
                         .then(() => {
                             showDataLoadingIndicator(false);

assets/src/scripts/monitoring-location/components/hydrograph/graph-controls.js

@@ -9,6 +9,7 @@ import {getTimeRange} from 'ml/selectors/hydrograph-data-selector';
 import {retrieveMedianStatistics, retrievePriorYearIVData} from 'ml/store/hydrograph-data';
 import {setCompareDataVisibility, setMedianDataVisibility} from 'ml/store/hydrograph-state';
 
+import {getMainLayout} from './selectors/layout';
 import {isVisible} from './selectors/time-series-data';
 
 import {showDataLoadingIndicator} from './data-loading-indicator';
@@ -39,7 +40,7 @@ export const drawGraphControls = function(elem, store, siteno) {
             const currentTimeRange = getTimeRange('current')(state);
             store.dispatch(setCompareDataVisibility(this.checked));
             if (this.checked) {
-                showDataLoadingIndicator(true);
+                showDataLoadingIndicator(true, getMainLayout(store.getState()).height);
                 store.dispatch(retrievePriorYearIVData(siteno, {
                     parameterCode: getSelectedParameterCode(state),
                     startTime: currentTimeRange.start,
@@ -80,7 +81,7 @@ export const drawGraphControls = function(elem, store, siteno) {
         .on('click', function() {
             store.dispatch(setMedianDataVisibility(this.checked));
             if (this.checked) {
-                showDataLoadingIndicator(true);
+                showDataLoadingIndicator(true, getMainLayout(store.getState()).height);
                 store.dispatch(retrieveMedianStatistics(siteno, getSelectedParameterCode(store.getState())))
                     .then(() => {
                         showDataLoadingIndicator(false);

assets/src/scripts/monitoring-location/components/hydrograph/parameters.js

@@ -13,6 +13,7 @@ import {getInputsForRetrieval, getSelectedParameterCode} from 'ml/selectors/hydr
 import {setSelectedParameterCode} from 'ml/store/hydrograph-state';
 import {retrieveHydrographData} from 'ml/store/hydrograph-data';
 
+import {getMainLayout} from './selectors/layout';
 import {getAvailableParameters} from './selectors/parameter-data';
 
 import {showDataLoadingIndicator} from './data-loading-indicator';
@@ -69,10 +70,10 @@ export const drawSelectionTable = function(container, store, siteno) {
             const thisClass = select(this).attr('class');
             if (!thisClass || !thisClass.includes('selected')) {
                 store.dispatch(setSelectedParameterCode(d.parameterCode));
-                showDataLoadingIndicator(true);
+                showDataLoadingIndicator(true, getMainLayout(store.getState()).height);
                 store.dispatch(retrieveHydrographData(siteno, getInputsForRetrieval(store.getState())))
                     .then(() => {
-                        showDataLoadingIndicator(false)
+                        showDataLoadingIndicator(false);
                     });
             }
         })