Search code examples
meteorfont-awesomemeteor-blazefont-awesome-5

{{#if currentUser}} with icon inside still rendered when user logs out

Thank you for reading my message, here is my problem :

I'm using a navbar made with Bulma in which I display either login/register buttons or a profile picture icon from FontAwesome using {{#if currentUser}} as shown below ("S'inscrire" and "Se connecter" means register and login in French) :

<div class="navbar-end">
    <div class="navbar-item">
        <div class="buttons">
            {{#if currentUser}}
                <!-- Displayed only when the user is logged in-->
                <i class="fas fa-user icon is-large" id="userProfile"></i>
            {{else}}
                <!-- Displayed when the user is NOT logged in-->
                <a class="button is-primary register">
                    <strong>S'inscrire</strong>
                </a>
                <a class="button is-light login">Se connecter</a>
            {{/if}}
        </div>
    </div>
</div>

When the user is not logged in it only show the buttons :

enter image description here

And when he logs in I have only the icon :

enter image description here

My problem is that when user logs out, I got both user icon and buttons :

enter image description here

and if I log in and out multiple times I get multiple icons. Looks like it's a problem with FontAwesome icon, I've tried with a normal image instead of the icon and it behaved normally, but I need to use icons inside this type of statement in some place of my app.

Thanks in advance !

Solution

  • This is because font awesome 5 replaces the <i> tag with an svg which will break your code reactivity if it's not wrapped inside another flow element. Try wrapping the <i> with a <span> in order to keep the reactivity going:

    <span>
  <i class="fas fa-user icon is-large" id="userProfile"></i>
</span>

    You could also make this a short stateless template:

    <template name="icon">
  <span>
    <i class="fas fa-{{name}} {{#if large}}is-large{{/if}}" id="{{id}}"></i>
  </span>
</template>

    and call it like

    {{>icon name="user" large=true id="userProfile"}}