I'm using React with Redux. In this example I have my class with mapStateToProps and mapDispatchToProps

class EnigmaPage extends Component {

    constructor(props){
        super(props);
    }

    ponentDidMount() {
        this.props.authCheckState();
    }

    readUserData() {
        this.props.loadLevel(this.props.userId);
    }

    render(){
        return (
            <div className={classes.EnigmaPage}>
                <div className={classes.Header}>
                    <div>
                        <LevelInfo 
                            difficulty={this.props.level.difficulty}
                            level={this.props.level.level}
                            readUserData={this.readUserData()}
                        />

                    </div>
                </div>
            </div>
        )
    }

}

const mapDispatchToProps = dispatch => {
    return {
        authCheckState: () => dispatch(actions.authCheckState()),
        getLevel: () => dispatch(actions.getLevel()),
        loadLevel:(id) => dispatch(actions.loadLevel(id))
    };
}
const mapStateToProps = state => {
    return {
        userId:state.auth.user,
        level:state.level.level
    }
}

I wanna push to my ponent LevelInfo the values difficulty and level but these 2 data arrive from getLevel() that is an http request with delay.
The page loads before receiving all the data from the http call.
I'm looking a way to wait to load the ponent LevelInfo or reload the ponent when the data are all ready.

I'm using React with Redux. In this example I have my class with mapStateToProps and mapDispatchToProps

class EnigmaPage extends Component {

    constructor(props){
        super(props);
    }

    ponentDidMount() {
        this.props.authCheckState();
    }

    readUserData() {
        this.props.loadLevel(this.props.userId);
    }

    render(){
        return (
            <div className={classes.EnigmaPage}>
                <div className={classes.Header}>
                    <div>
                        <LevelInfo 
                            difficulty={this.props.level.difficulty}
                            level={this.props.level.level}
                            readUserData={this.readUserData()}
                        />

                    </div>
                </div>
            </div>
        )
    }

}

const mapDispatchToProps = dispatch => {
    return {
        authCheckState: () => dispatch(actions.authCheckState()),
        getLevel: () => dispatch(actions.getLevel()),
        loadLevel:(id) => dispatch(actions.loadLevel(id))
    };
}
const mapStateToProps = state => {
    return {
        userId:state.auth.user,
        level:state.level.level
    }
}

I wanna push to my ponent LevelInfo the values difficulty and level but these 2 data arrive from getLevel() that is an http request with delay.
The page loads before receiving all the data from the http call.
I'm looking a way to wait to load the ponent LevelInfo or reload the ponent when the data are all ready.

• javascript
• reactjs
• redux

4 Answers 4

You need to tell your ponent that will wait for the data needed to render your Level ponent, so into your EnigmaPage ponent write as follow

render(){
    const { level } = this.props;
    if (!level) { return <LoadingComponentSpinner />; } // this will render only when level attr is not set, otherwise will render your `LevelInfo` ponent
    return (
        <div className={classes.EnigmaPage}>
            <div className={classes.Header}>
                <div>
                    <LevelInfo 
                        difficulty={this.props.level.difficulty}
                        level={this.props.level.level}
                        readUserData={this.readUserData()}
                    />

                </div>
            </div>
        </div>
    )
}

I hope it can help you.

We don't make our ponents wait, we let the initial rendering happens but render the target ponent with a conditional expression.

render() {
  return (
    <div className={classes.EnigmaPage}>
      <div className={classes.Header}>
        <div>
          {this.props.level && (
            <LevelInfo
              difficulty={this.props.level.difficulty}
              level={this.props.level.level}
              readUserData={this.readUserData()}
            />
          )}
        </div>
      </div>
    </div>
  );
}

So, here we are checking if this.props.level is defined. When it is undefined React does not render anything, after getting the data LevelInfo ponent is rendered. You can change conditional rendering logic. You can render a Loading ponent maybe instead of nothing. But, at the end of the day, you will render your ponent conditionally.

try to use conditional rendering:

isDataReady() {
    if(this.props.level.difficulty && this.props.level.level)
        return true;
    return false;
}

render(){
    return (
        <div className={classes.EnigmaPage}>
            <div className={classes.Header}>
                <div>
                {this.isDataReady() ? <LevelInfo 
                        difficulty={this.props.level.difficulty}
                        level={this.props.level.level}
                        readUserData={this.readUserData()}
                    />
             : <div> </div>}
                </div>
            </div>
        </div>
    );
}

in case your data is not ready you can display anything you want, for simplicity here I just added an empty <div>.

Johuder Gonzalez has talked about the Spinner. The Material UI has a lot of examples, which is easy to apply. Please look the followings. Material UI Progress