• Meteor

Using the new waitOn Option

From the class:  Using Iron Router

You've seen how to subscribe inside of your routes or your controllers by using the subscriptions option, and in this example we wait until all the subscriptions are ready, and while we're waiting we show this loading template. And when they become ready, we render out as usual. This is a pretty common pattern, so there's actually a simpler way we can do this by using the wait on option, which I'll describe in the rest of this video.

What I'm going to do is to get rid of this action function completely, because we're not doing anything special with it, and change this subscriptions option to wait on. Now, this has changed a little bit from the previous version of wait on in that this will do the same thing as the subscriptions option, but it will automatically show that loading indicator while we're waiting for the subscriptions to be ready.

So it's as if we've added a loading hook at the end of our hook chain, and it will automatically show this loading template. So let's hop over to our application and see what this does. Now, notice this loading template here is showing while we're waiting for this data, and it's not the loading template that we had before. It's actually just a default including template that looks like this. It just says loading, dot dot dot.

So one of the new features in this version is that you don't actually have to specify a loading template. It'll work by default, but chances are we'll want to customize this, and so we can provide a loading template option to tell the iron router to use that template instead. So inside of my home controller I'll provide another option here called loading template, and we'll set that to our loading template that we created previously.

And now notice when the application refreshes on the right, we'll be using our custom loading indicator template instead of the one that ships by default. Now, normally this option isn't something you would put on the controller itself, although you can. Usually it's the same loading template that you want to use for the entire application. So what you can do is specify that in the global router configuration like this.

And then it's available, it'll be used for all of your routes by default. And if you want to override this, you can do that in the specific route or the controller. In this video I showed you how you can use the new wait on option to automatically show a loading indicator on the page while we wait for our subscriptions to be ready.

This was a change from previous behavior, where we used wait on as a way to set the wait list with our handles, but then if we wanted to show the loading indicator, we'd have to use the loading plug-in, or write code ourselves. So hopefully this is a bit simpler to use.

If you don't want to show the loading indicator and you want to manage the wait list and the ready state yourself, you can just go back to using the subscriptions option that we looked at before. Finally, we look at how we can set a custom loading template by using an option called loading template, either globally or in an option for our particular controller or route.