defer render call to the next animation frame to avoid layout thrashing

app/assets/javascripts/burndown_chart/burndown_chart.js

@@ -60,7 +60,7 @@ export default class BurndownChart {
       .y(d => this.yScale(d.value));
 
     // render the chart
-    this.render();
+    this.queueRender();
   }
 
   // set data and force re-render
@@ -84,7 +84,7 @@ export default class BurndownChart {
       this.idealData = [idealStart, idealEnd];
     }
 
-    this.render();
+    this.queueRender();
   }
 
   // reset width and height to match the svg element, then re-render if necessary
@@ -101,11 +101,13 @@ export default class BurndownChart {
       this.xScale.range([0, this.chartWidth]);
       this.yScale.range([this.chartHeight, 0]);
 
-      this.render();
+      this.queueRender();
     }
   }
 
   render() {
+    this.queuedRender = null;
+
     this.xAxis.ticks(Math.floor(this.chartWidth / 120));
     this.yAxis.ticks(Math.min(Math.floor(this.chartHeight / 60), this.yMax));
 
@@ -121,6 +123,10 @@ export default class BurndownChart {
     }
   }
 
+  queueRender() {
+    this.queuedRender = this.queuedRender || requestAnimationFrame(() => this.render());
+  }
+
   animate(seconds = 5) {
     this.ticksLeft = this.ticksLeft || 0;
     if (this.ticksLeft <= 0) {