Meteor takes time to find out if {{currentUser}} or not

Question

I have several codes that I want to run only when there is noUser and several when there is currentUser .
All this is inside the navigation template. So ...

  {{#if currentUser}} <li class="nav"><a href="{{pathFor 'create'}}">Post</a> </li> <li class="nav"><a>Ola, {{thisUser}}!</a> </li> <li class="nav"><a href="#" id="logout">Log Out</a> </li> {{/if}} {{#if noUser}} <li class="nav"><a href="{{pathFor 'signup'}}">Sign Up</a> </li> <li class="nav"><a href="{{pathFor 'login'}}">Login</a> </li> {{/if}} 

So, the problem is that when there is currentUser (i.e., I’m logged in), and I refresh the page, the code inside the {{#if noUser}} block is displayed first, and then the {{#if currentUser}} block, while the {{#if noUser}} block should only be displayed when there is no user.
Here is the helper code for the template.

 Template.navigation.helpers({ thisUser: function () { return Meteor.user().username; }, noUser: function () { var user = Meteor.user(); if (!user) { return true; }; } }); 

Don't know what I'm doing wrong here. :(
Please, help.

Answer 1

You should use if else conditions instead of the noUser helper. And to prevent the "noUser" block from being shown during login, you should use the {{loggingIn}} helper . Something like that:

 {{#if loggingIn}} <p>Loggin in...</p> {{else}} {{#if currentUser}} <li class="nav"><a href="{{pathFor 'create'}}">Post</a> </li> <li class="nav"><a>Ola, {{thisUser}}!</a> </li> <li class="nav"><a href="#" id="logout">Log Out</a> </li> {{else}} <li class="nav"><a href="{{pathFor 'signup'}}">Sign Up</a> </li> <li class="nav"><a href="{{pathFor 'login'}}">Login</a> </li> {{/if}} {{/if}} 

Because the Meteor does not know immediately whether the user is logged in or not. Therefore, you need to use the loggingIn helper.

Answer 2

Why don't you reorganize your code like that?

 {{#if currentUser}} <li class="nav"><a href="{{pathFor 'create'}}">Post</a> </li> <li class="nav"><a>Ola, {{thisUser}}!</a> </li> <li class="nav"><a href="#" id="logout">Log Out</a> </li> {{else}} <li class="nav"><a href="{{pathFor 'signup'}}">Sign Up</a> </li> <li class="nav"><a href="{{pathFor 'login'}}">Login</a> </li> {{/if}} 

You might want to look at http://docs.meteor.com/#meteor_loggingin to show a download indicator, if necessary.