[Solved] React render() doesn't change when Meteor.loggingIn() is completed!

I do this to display a spinner when Meteor.loggingIn is in progress and it works when I came from another route, by when I reload the page, only the spinner is being displayed:

render() {
        if(Meteor.loggingIn()){
            return (
                <CircularProgress style={CenterLoader} size={100}/>
            )
        } else if(Meteor.userId()) {
            return (
                <ProfileForm/>
            )
        }
    }

Thank you.

React isn’t Tracker aware like Blaze is. You have to use createContainer from meteor/react-meteor-data to create a reactive container that is tracker aware.

import { Meteor } from 'meteor/meteor';
import React, { Component } from 'react';
import { createContainer } from 'meteor/react-meteor-data';

class profilePage extends Component {
    render() {
        if(this.props.loggingIn){
            return (
                <CircularProgress style={CenterLoader} size={100}/>
            )
        } else if(this.props.userId) {
            return (
                <ProfileForm/>
            )
        }
    }
}

export default profilePageContainer = createContainer(() => {
    return {
        loggingIn: Meteor.loggingIn(),
        userId: Meteor.userId()
    }
});
1 Like

Thank you, everything is working now.

1 Like

You are very welcome. Glad I could help.