How to not render templates with Flow Router until Meteor.user() is available?


#1

I have onRendered() functions that use Meteor.user() and are running before the Meteor.user() data is available. Is there a way to prevent templates from rendering until that data is available the Flow Router?

Thanks!


#2

Hey @jetlej, can’t you use a layout with BlazeLayout and check if currentUser is available? Maybe a simple if else can do the trick.

Att


#3

Oh wow, I was overthinking that one. Thanks for the quick and simple solution!!


#4

This pattern works for me for apps that require login:

<template name="layout">
    {{> Template.dynamic template=top}}
    <div class="page-container">
        {{#if currentUser}}
            {{#if Template.subscriptionsReady}}
                {{> Template.dynamic template=main}}
            {{else}}
                {{> loading}}
            {{/if}}
        {{else}}
            {{> login}}
            {{#if loggingIn}}
                {{> loading}}
            {{/if}}
        {{/if}}
    </div>
</template>

#5

@hluz - I just came back here to say the subscription wasn’t full ready after checking for currentUser, so thanks so much for your answer!

I’m still seeing the template load before the user object is available. Do I have to specify a subscription to Meteor.users() in layout template for Template.subscriptionsReady to care about that being ready?


#6

currentUser helper only returns Meteor.userId(), which is not accessing the Meteor.user collection at al, as Meteor.user() does. Meteor.userId() is sourced from the Connection object. My example only works as expected if there is a subscription from the layout template that depends on the logged in user.

So, if there is no subscription in the layout template or if there is a subscription that does not depend on Meteor.userId(), you can define a helper on the template to verify if the logged in user data is available. Something like:

  userDataIsReady() {
    return Meteor.userId() === (Meteor.user() || {})._id;
  }

and then use that helper instead of Template.subscriptionsReady like this:

<template name="layout">
    {{> Template.dynamic template=top}}
    <div class="page-container">
        {{#if currentUser}}
            {{#if userDataIsReady}}
                {{> Template.dynamic template=main}}
            {{else}}
                {{> loading}}
            {{/if}}
        {{else}}
            {{> login}}
            {{#if loggingIn}}
                {{> loading}}
            {{/if}}
        {{/if}}
    </div>
</template>

#7

I eventually ended on using {{#if currentUser.profile}} in the .html template. Worked like a charm!

Thanks for your help @hluz!