loading - Meteor: iron-router => waitOn without subscribe

Question

i want a loading template to appear before the site has all data to be rendered.

And after the serverside Method gives me the Data(from an API [async]) via Meteor.call i want to load the correct layout.

I tried many ways found on Google which describe similar but not exatcly the same problem. Including the way to define a function with ready handle, also doesn′t work. I can′t get it running.

i don′t want to use Collections because this is user specific Data.( i think this is not efficient to make a collection for each user [no logged in users], or do i miss something) Is this possible?

Here my Code. The console logs 2 befor 1.

Router.route('/search/:term',{
    name: 'search',
    loadingTemplate: 'loading',
    waitOn : function(){
        var term = this.params.term;
        //i think here has be something differnet either with return subscribe or function with ready-handle
        Meteor.call('search',term,function(err, response) {
            Session.set('shops', response);
            console.log(1);
        });
    },
    action : function(){
        console.log(2);
        this.render();
    }
});

Template.search.helpers(
    {
        "shops" : function(){
            return Session.get('shops');
        }
    }
);

Server Side Method returns an Array.

Thanks for help

Answer 1

Iron Router's waitOn will not wait on a Meteor.call(). Instead, the way to set this up is to subscribe to the record set in waitOn, publish a function which contains the Meteor.call(), and then create a client-side collection for each user to receive the results of the call. It will look something like the following:

Client:

// create this collection only on the client
// to receive publication on a per-user basis

Search = new Mongo.Collection('search');

Route:

Router.route('/search/:term',{
  waitOn : function(){
    var term = this.params.term;
    return Meteor.subscribe('search', term);
  }
});

Server:

Meteor.publish('search', function(term){
  check(term, String);
  var self = this;
  Meteor.call('search', term, function(error, result){
    if (result){
      self.added("search", "mySearch", {results: result});
      self.ready();
    } else {
      self.ready();
    }
  });
});

Meteor.methods({
  search: function(term){
    //do the api call and return it
  }
});

I recommend taking a look at the example of the low-level added/changed/removed publish function in the Meteor documentation here. It is a dense section but ultimately contains what you need to get your use case working.