Loader mask for async requests. Clean up console.logs

public/js/grijalva_charts.js

@@ -106,7 +106,6 @@ const summarizeData = (allData, indicator) => {
     });
     // order data[i].values.date
     data.forEach(d => d.values.sort(sortByDateAscending));
-    console.log(data)
     return data;
 }
 

public/js/grijalva_functions.js

@@ -305,7 +305,7 @@ const setupMap = (dates) => {
             return refMap.unproject(pt, zoom);
         }
 
-        console.log(userFiles);
+        //console.log(userFiles);
         // query db to get min/max values per month and indicator and store them in an object
         queryFiles().then( minmax => {
             minmax.map( minmaxMonth => {
@@ -451,7 +451,7 @@ const populateMap = async (mapData) => {
 }
 
 const updateMap = (mapData) => {
-    console.log(userFiles);
+    //console.log(userFiles);
 
     // clear tiles
     currentTiles = {};
@@ -506,6 +506,7 @@ const updateMap = (mapData) => {
 
 const updateCharts = async () => {
 
+    $(".loader").css("display", "block");
     // TODO: add mask while fetching async data
     // if user has drawn polygons, update chart with data inside selection
     if (drawnItems.toGeoJSON().features.length != 0) {
@@ -520,6 +521,7 @@ const updateCharts = async () => {
             indicatorVars[indicator].chart.data( allData[indicator]);
         });
     }
+    $(".loader").hide("fade", 750);
 }
 
 // define MVT layer for given month table and all indicators
@@ -656,7 +658,7 @@ L.TimeDimension.Layer.Tile = L.TimeDimension.Layer.extend({
         });
 
         //console.time("process");
-        console.log("data for", monthYear);
+        //console.log("data for", monthYear);
         //console.log(currentTiles)
         Object.keys(allTiles).forEach(layer => {
             if (layer !== monthYear) { // hide all other months