Sync deprecated

[dbismut]

Hey - I'm trying to load semantic-ui on demand, (in conjunction with the Lazy Bundles package), like below:

Router.route('admin', {
  path: '/admin',
  controller: PreloadController,
  preload: {
    styles: ['semantic.css'],
    sync: 'semantic.js'
  },
  action: function() {
    this.render('admin');
  }
});

I get the following errors on Chrome Version 44.0.2403.89 beta (64-bit):

<link rel=preload> must have a valid `as` value
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.
<link rel=preload> must have a valid `as` value

Note that the first issue is repeated twice, and as a matter of fact, it looks like <link rel="preload stylesheet" type="text/css" href="semantic.css"> is inserted twice in the DOM. The second issue is easily solved by using async instead of sync in the preload options.

I don't get these warnings in Safari but semantic.css is indeed inserted twice in the DOM.

[dbismut]

Ok well. It looks like adding a slash / before the file name solves the double insertion issue as in:

Router.route('admin', {
  path: '/admin',
  controller: PreloadController,
  preload: {
    styles: ['/semantic.css'],
    async: '/semantic.js'
  },
  action: function() {
    this.render('admin');
  }
});

[dbismut]

Changing the issue title since sync not working is a a major issue when dealing with templates compiled with Lazy Bundles: Iron:router needs to wait for the template to be ready before rendering.

[dbismut]

Ok so here is one workaround I think works in my case, using a reactive Session variable:

AdminController = PreloadController.extend({
  layoutTemplate: 'adminLayout',
  preload: {
    styles: ['/semantic/semantic.css', '/admin/admin.css'],
    async: ['/semantic/semantic.js', '/admin/admin.js'],
    'onBeforeAsync': function(fileName) {
      Session.set('files_loaded', undefined);
      return true;
    },
    'onAsync': function(error, result) {
      if (error) {
        console.log('error loading templates', loading);
      } else {
        var counter = Session.get('files_loaded') || 0;
        Session.set('files_loaded', ++counter);
      }
    }
  },
  onBeforeAction: function() {
    if (Session.equals('files_loaded', this.preload.async.length)) {
      this.next();
    }
  }
});

[MiroHibler]

Thanks! I'd probably go with ReactiveVar instead, but this works too :)