How can I display a progress loader/ spinner while meteor.js waits for a web service call?

Question

How can I display a progress loader while meteor.js waits for a web service call? I have been using iron router to display progress while waiting for data from mongo collections, but now I am faced with a slightly different source of my data. So feel free to give me an iron router solution if that is what you have in mind. Any ideas are welcome. If you are interested in my code it is as follows:

    if (Meteor.isClient) {
    Template.confirmWeather.onRendered(function(){
        var validator = $('.confirmWeatherAndGoToMessage').validate({
            submitHandler: function(event){
    Meteor.bindEnvironment(Meteor.call('testWeather',Meteor.bindEnvironment(function(error,result)
                {
                    if (error)
                    {
                        console.log(error.message)
                    }
                    else
                    {
                        var userId = Meteor.userId();
                        var user = Meteor.users.findOne({_id: userId});
                        if (user.testData)
                        {
                            Router.go('showFocust');
                        }
                        else
                        {
                            Router.go('showError');
                        }
                    }
                })));


            }
        });
    });

}

Please note that the method call can be moved to the showFocust template. So nothing is cast in stone. And oh, if you've got a similar example that you've solve before please feel free to explain how you solved it. Thank you

Answer 1

Assuming your trying to display the loader in the template you mentionned, I'd try using a reactive var and autorun like so :

if (Meteor.isClient) {
Template.confirmWeather.onRendered(function(){
    var instance = this;
    instance.is_loaded = new ReactiveVar(false);

    var validator = $('.confirmWeatherAndGoToMessage').validate({
        submitHandler: function(event){
Meteor.bindEnvironment(Meteor.call('testWeather',Meteor.bindEnvironment(function(error,result)
            {
                if (error)
                {
                    console.log(error.message)
                }
                else
                {
                    var userId = Meteor.userId();
                    var user = Meteor.users.findOne({_id: userId});
                    if (user.testData)
                    {
                        Router.go('showFocust');
                    }
                    else
                    {
                        Router.go('showError');
                    }

                    instance.is_loaded.set(true)
                }
            })));


        }
    });
});

}

And in you template display a gif/loader while is_loaded is false. You can access is_loaded in your template's helpers as Template.instance().is_loaded.get().