v2.12.6

 - Rendering optimisation via `requestAnimationFrame`

Author: dr-dimitru

.versions

@@ -21,7 +21,7 @@ [email protected]
 [email protected]
 [email protected]
 [email protected]
-ostrio:[email protected].5
+ostrio:[email protected].6
 [email protected]
 [email protected]
 [email protected]

client/renderer.js

@@ -1,3 +1,8 @@
+var requestAnimFrame = (function() {
+  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) {
+    setTimeout(callback, 1000 / 60);
+  };
+})();
 BlazeRenderer = (function() {
   function BlazeRenderer(rootEl) {
     this.rootEl = rootEl;
@@ -14,7 +19,7 @@ BlazeRenderer = (function() {
   }
 
   BlazeRenderer.prototype.render = function(layout, template, data) {
-    var _data, _template, _layout;
+    var _data, _template, _layout, self = this;
 
     _template = typeof Template !== "undefined" && Template !== null ? Template[template] : void 0;
     _layout   = typeof Template !== "undefined" && Template !== null ? Template[layout] : void 0;
@@ -36,16 +41,6 @@ BlazeRenderer = (function() {
         _data = _.extend(_data, data);
       }
 
-      if (this.current.template === template) {
-        var self = this;
-        this.reactTemplate.set(null);
-        Meteor.setTimeout(function () {
-          self.reactTemplate.set(template);
-        }, 1);
-      } else {
-        this.reactTemplate.set(template);
-      }
-
       if (this.current.layout !== layout) {
         if (this.old) {
           Blaze.remove(this.old);
@@ -54,11 +49,21 @@ BlazeRenderer = (function() {
         var getData = function getData () {
           return _data;
         };
+
         this.old = Blaze.renderWithData(_layout, getData, this.rootEl());
       } else {
         this.old.dataVar.set(_data);
       }
 
+      if (this.current.template === template) {
+        this.reactTemplate.set(null);
+        requestAnimFrame(function updateTemplate () {
+          self.reactTemplate.set(template);
+        });
+      } else {
+        this.reactTemplate.set(template);
+      }
+
       this.current.layout = layout;
       this.current.template = template;
     }

package.js

@@ -1,7 +1,7 @@
 Package.describe({
   name: 'ostrio:flow-router-extra',
   summary: 'Carefully extended flow-router with waitOn and template context',
-  version: '2.12.5',
+  version: '2.12.6',
   git: 'https://github.com/VeliovGroup/flow-router'
 });