[TASK] Avoid render blocking onload

lib/map/labelslayer.js

@@ -10,8 +10,8 @@ define(['leaflet', 'rbush', 'helper'],
       ['right', 'top', 5 / 8],
       ['center', 'ideographic', 2 / 8],
       ['right', 'ideographic', 3 / 8]];
-    var bodyStyle = window.getComputedStyle(document.querySelector('body'));
     var labelShadow;
+    var bodyStyle = { fontFamily: 'sans-serif' };
     var nodeRadius = 4;
 
     var cFont = document.createElement('canvas').getContext('2d');
@@ -101,11 +101,10 @@ define(['leaflet', 'rbush', 'helper'],
         // - label (string)
         // - color (string)
 
-        var labelsOnline = d.online.map(prepareLabel(bodyStyle.color, 11, 8, true));
+        var labelsOnline = d.online.map(prepareLabel(null, 11, 8, true));
         var labelsOffline = d.offline.map(prepareLabel('rgba(212, 62, 42, 0.9)', 9, 5, false));
         var labelsNew = d.new.map(prepareLabel('rgba(48, 99, 20, 0.9)', 11, 8, true));
         var labelsLost = d.lost.map(prepareLabel('rgba(212, 62, 42, 0.9)', 11, 8, true));
-        labelShadow = bodyStyle.backgroundColor.replace(/rgb/i, 'rgba').replace(/\)/i, ',0.7)');
 
         var labels = []
           .concat(labelsNew)
@@ -193,6 +192,8 @@ define(['leaflet', 'rbush', 'helper'],
         var tileSize = this.options.tileSize;
         var s = tilePoint.multiplyBy(tileSize);
         var map = this._map;
+        bodyStyle = window.getComputedStyle(document.querySelector('body'));
+        labelShadow = bodyStyle.backgroundColor.replace(/rgb/i, 'rgba').replace(/\)/i, ',0.7)');
 
         function projectNodes(d) {
           var p = map.project(d.label.position);
@@ -215,7 +216,7 @@ define(['leaflet', 'rbush', 'helper'],
           ctx.font = d.label.font;
           ctx.textAlign = d.label.anchor[0];
           ctx.textBaseline = d.label.anchor[1];
-          ctx.fillStyle = d.label.fillStyle;
+          ctx.fillStyle = d.label.fillStyle === null ? bodyStyle.color : d.label.fillStyle;
 
           if (d.label.stroke) {
             ctx.strokeText(d.label.label, d.p.x + d.label.offset[0], d.p.y + d.label.offset[1]);

lib/sidebar.js

@@ -4,6 +4,12 @@ define(function () {
   return function (el) {
     var self = this;
 
+    // Needed to avoid render blocking
+    var gridBreakpoints = {
+      lg: [992, 446],
+      xl: [1200, 560]
+    };
+
     var sidebar = document.createElement('div');
     sidebar.classList.add('sidebar');
     el.appendChild(sidebar);
@@ -21,10 +27,12 @@ define(function () {
     sidebar.appendChild(container);
 
     self.getWidth = function getWidth() {
-      if (sidebar.classList.contains('hidden') || button.offsetHeight === 0) {
+      if (gridBreakpoints.lg[0] < window.innerWidth) {
         return 0;
+      } else if (gridBreakpoints.xl[0] < window.innerWidth) {
+        return gridBreakpoints.lg[1];
       }
-      return sidebar.offsetWidth;
+      return gridBreakpoints.xl[1];
     };
 
     self.add = function add(d) {

scss/modules/_variables.scss

@@ -21,6 +21,7 @@ $button-font-size: 1.6rem !default;
 $button-distance: 16px !default;
 
 // Bootstrap breakpoints
+// In lib/sidebar to avoid render blocking onload
 $grid-breakpoints: (
   // Extra small screen / phone
   xs: 0,
@@ -35,6 +36,7 @@ $grid-breakpoints: (
 ) !default;
 
 // 45% sidebar - based on viewport
+// In lib/sidebar to avoid render blocking onload
 $sidebar-width: map-get($grid-breakpoints, xl) * .45 !default;
 $sidebar-width-small: map-get($grid-breakpoints, lg) * .45 !default;