I set up a page preloader template that shall show a spinner until all data is available. This is how I call it:
{{> pagePreloader wait=wait}}
The wait on the right hand side is set by a helper inside the surrounding template. It is true until all data has been retrieved.
Inside the pagePreloader template, I want to react on the change of this wait parameter. It works, if I am using an {{#if wait}} to display or hide something like this:
{{#if wait}}
Waiting...
{{/if}}
but I cannot find a way to programmatically react on the change, e.g. in an autorun() set-up in the onRendered() method.
I have tried this:
Template.pagePreloader.onRendered(function() {
var instance = this;
instance.autorun(function() {
console.log(instance.data.wait);
});
};
Yet the auto-run will only run once. As documented in the Meteor docs, instance.data is not a reactive data source – although the wait parameter inside {{#if wait}}) is.
So I am wondering how I can react on the parameter change then? Using an {{#if}} is not an option, since I want to slowly fade-out the spinner.
Maybe something like this would work:
{{#unless wait}}
{{toggle}}
{{/unless}}
but I’m quite sure there must be a more elegant way to do this…