This has been asked before however, I don't feel I've seen a suitable answer. I'm currently using {{ #if currentUser.emails.[0].verified }} show data {{else}} please verify email {{/if}}
on the layout template check whether or not the user has verified their email. In this scenario, I get a flicker between the screens if the user has registered because meteor.user() hasn't loaded completely so currentUser.emails.[0].verified
returns null and changes to true once it has loaded completely.
Is there a way I can wait for Meteor.userId to completely load before the template renders without using delay?
You can force the Template.subscriptionsReady to wait for the Meteor.user() data (so that when the Template.subscriptionsReady is true, the currentUser logic is also up-to-date and won't change) by adding a stub subscription.
I added the following Subscription and then subscribed to this from the template:
Meteor.publish('userWait', function () {
return null;
});
Here's a more detailed description of why this issue was popping up: When loading a template, if you're only relying native handler for currentUser - then currentUser will always initially load false (in the template logic) and then will load true once the data load is complete.
Adding logic to show a loading state that relies on Template.subscriptionsReady will only work if there is an additional Subscription for the template (Template.subscriptionsReady doesn't acknowledge the automatic subscriptions for the user data).
For me, this meant that the internal pages will always prompt a login before realizing that the user was already logged in ... which was an ugly UX.
Once I added a Subscription to the template, even though it returned nothing, then Template.subscriptionsReady would wait until Meteor.user() data was available before returning as true.