Logged out message flashes every time before Meteor.user() returns value

Hi,

I’m using a Meteor + React project and I have a certain message which is shown if the user is logged out for a specific page. This flashes each time I load the page (even when I am logged in) because initially the Meteor.user() call returns undefined before returning the logged in user object. Is there a way to prevent this?

There is a brief moment between loading the page and Meteor.user() being populated with the correct value from the server. The brief moment depends on the speed of response from the server and no matter how fast it is, it will always exist.

You can try adding a timer before displaying the logout notice but it might not be a perfect user experience.

By the way, have you tried using Meteor.userId() instead?

You can also use Meteor.loggingIn(), which reactively returns true during that “in between” point.

Fast render will also fix this issue

Meteor.user() will be undefined inside the component before its loading so make sure you prevent it’s calling in the component by adding a condition such as dataLoading ? "" : Meteor.user().
Add this in the createContainer (or withTracker) : dataLoading: !handle.ready() || !Meteor.user();

    export default ComponentContainer = createContainer(() => {

      const handle = Meteor.subscribe("user.classrooms");

      return {
        currentUser: Meteor.user(),
        dataLoading: !handle.ready() || !Meteor.user(),
        classrooms: Classrooms.find({}).fetch(),
      };
    }, BaseLayout);

Normally Meteor.userId() is faster to load but if you need to access user’s data such as email you need to call Meteor.user() in that case no need to call both.