add simple CircularProgress component when loading

client/components/Map/index.js

@@ -5,14 +5,15 @@ import PropTypes from 'proptypes';
 import { connect } from 'react-redux';
 import { withStyles } from '@material-ui/core/styles';
 import axios from 'axios';
-import { getDataRequestSuccess, updateDateRanges } from '@reducers/data';
+import { getDataRequest, getDataRequestSuccess, updateDateRanges } from '@reducers/data';
 import { updateMapPosition } from '@reducers/ui';
 import { trackMapExport } from '@reducers/analytics';
 import { INTERNAL_DATE_SPEC } from '../common/CONSTANTS';
 import CookieNotice from '../main/CookieNotice';
 // import "mapbox-gl/dist/mapbox-gl.css";
 import Map from './Map';
 import moment from 'moment';
+import { CircularProgress } from '@material-ui/core';
 
 // We make API requests on a per-day basis. On average, there are about 4k
 // requests per day, so 10k is a large safety margin.
@@ -228,12 +229,13 @@ class MapContainer extends React.Component {
   };
 
   setData = async () => {
-    const { startDate, endDate } = this.props;
+    const { startDate, endDate, getDataRedux } = this.props;
 
     const missingDateRanges = this.getMissingDateRanges(startDate, endDate);
     if (missingDateRanges.length === 0){
       return;
     }
+    getDataRedux();
     this.rawRequests = [];
     var allRequestPromises = [];
     for (const missingDateRange of missingDateRanges){
@@ -283,7 +285,8 @@ class MapContainer extends React.Component {
   };
 
   render() {
-    const { position, lastUpdated, updatePosition, exportMap, classes, requests } = this.props;
+    const { position, lastUpdated, updatePosition, exportMap, classes, requests,
+    isMapLoading } = this.props;
     const { ncCounts, ccCounts, selectedTypes } = this.state;
     return (
       <div className={classes.root}>
@@ -298,6 +301,7 @@ class MapContainer extends React.Component {
           selectedTypes={selectedTypes}
         />
         <CookieNotice />
+        {isMapLoading && <CircularProgress />}
       </div>
     );
   }
@@ -313,11 +317,13 @@ const mapStateToProps = state => ({
   endDate: state.filters.endDate,
   requests: state.data.requests,
   dateRangesWithRequests: state.data.dateRangesWithRequests,
+  isMapLoading: state.data.isMapLoading,
 });
 
 const mapDispatchToProps = dispatch => ({
   updatePosition: position => dispatch(updateMapPosition(position)),
   exportMap: () => dispatch(trackMapExport()),
+  getDataRedux: () => dispatch(getDataRequest()),
   getDataSuccess: data => dispatch(getDataRequestSuccess(data)),
   updateDateRangesWithRequests: dateRanges => dispatch(updateDateRanges(dateRanges)),
 });

client/redux/reducers/data.js

@@ -119,7 +119,6 @@ export const gitResponseFailure = error => ({
 
 const initialState = {
   isMapLoading: false,
-  isVisLoading: false,
   error: null,
   pins: [],
   pinsInfo: {},
@@ -135,7 +134,6 @@ export default (state = initialState, action) => {
       return {
         ...state,
         isMapLoading: true,
-        isVisLoading: true,
       };
     case types.GET_DATA_REQUEST_SUCCESS: {
       const newRequests = {
@@ -145,6 +143,7 @@ export default (state = initialState, action) => {
       return {
         ...state,
         requests: newRequests,
+        isMapLoading: false,
       };
     }
     case types.UPDATE_DATE_RANGES:

client/redux/sagas/data.js

@@ -12,7 +12,6 @@ import { COUNCILS, REQUEST_TYPES } from '@components/common/CONSTANTS';
 
 import {
   types,
-  getDataRequest,
   getPinsSuccess,
   getPinsFailure,
   getPinInfoSuccess,
@@ -147,7 +146,6 @@ function* getNcByLngLat(action) {
 }
 
 export default function* rootSaga() {
-  yield takeLatest(types.GET_DATA_REQUEST, getMapData);
   yield takeLatest(mapFiltersTypes.UPDATE_MAP_DATE_RANGE, getMapData);
   yield takeLatest(types.GET_NC_BY_LNG_LAT, getNcByLngLat)
   yield takeEvery(types.GET_PIN_INFO_REQUEST, getPinData);