How do I Add Transition in Loading Template in Meteor?

help
1

I am learning blaze, ui hooks and animating techniques that can be used while creating or removing elements in Meteor. Normally using ‘ui_hooks’ we can accomplish that but, in case of loading template, i can see there is boolean type checking involved, whether its the case of waitOn type loading or now template level subscription, which will just make, loading template appear while the subscription is being ready and after being ready, it will just replace the loading template with the loaded data in required template.

What I like to accomplish is, certain Fade in or any kind of Enter animation, if user clicks certain link and while the subscription is being ready and when the subscription is ready, certain exit animation should appear like fade out and the loading template should go out animating out of the screen and required template animates in.

How do I accomplish that?
I am fairly new to this UI and blaze and if i miss anything please guide me.

So far i tried this for loading template, clearly it doesn’t work, but similar logic works for other templates, as they render in DOM. What i was hoping is certain fade in loading message appears and when its done fades out and the new template should comes in the screen. I was wrong but by this code i was hoping it would hold the screen for 3 Seconds.

Here KshitizLoader is my default loading Template.

Template.kshitizLoader.onRendered(function() {  
	
    this.$('#container')[0]._uihooks = {
        insertElement: function(node, next){
            $(node).hide();
            Meteor.setTimeout(function(){
               return $(node).insertBefore(next).fadeIn();
            },3000);
        },
        removeElement: function(node){
            Meteor.setTimeout(function(){
                $(node).fadeOut();
            },3000);

            return $(node).remove();
        }
    };
});