Show loading spinner while waiting for data to be fetched in ReactJS render

Question

I'm trying to write ReactJS component that will be showing 2 view types toggled by loaded flag in the state. Im asking about a loader spinner but consider that this issue can be more complicated for showing 2 different DOM trees based on that flag. I would really like to make my code as clearer as I can.

What I have in mind is 2 ways to write it:

First way is very intuitive for me but not readable + I have to add another wrapping div inside the else statement:

render() {
    return (
        <div>
            {!this.state.loaded ? <Loader /> : (
                <div>
                    <Arrow direction="left" onClick={this.slideLeft}/>
                    <ul>
                        {
                            this.props.images.map((image, index) => {
                                return (
                                    <li key={index} styleName={index === this.state.active ? 'active' : ''}>
                                        <ImageItem src={image} />
                                    </li>
                                )
                            })
                        }
                    </ul>
                    <Arrow direction="right" onClick={this.slideRight}/>
                </div>
            )}
        </div>
    );
}

The second way is to return before rendering any of the loaded code, is it a good practice to keep logic inside the render function like this? + "content" class div is duplicated:

render() {
    if(!this.state.loaded){
        return <div className="content"><Loader /></div>;
    }

    return (
        <div className="content">
            <Arrow direction="left" onClick={this.slideLeft}/>
            <ul>
                {
                    this.props.images.map((image, index) => {
                        return (
                            <li key={index} styleName={index === this.state.active ? 'active' : ''}>
                                <ImageItem src={image} />
                            </li>
                        )
                    })
                }
            </ul>
            <Arrow direction="right" onClick={this.slideRight}/>
        </div>
    );
}

maybe you have other suggestions for me? thanks.

Both codes are perfectly fine. There's nothing wrong with them, use whichever you find more readable or practical. — Chris
– Chris, Commented Nov 2, 2016 at 15:59

user5520186 · Accepted Answer · 2016-11-02 16:00:29Z

1

As far as I know it is a common practise. However, you should refactor your components in a way, that there is only one or none piece of logic in your render function.

Your parent component observes the loading state and renders the loader component or the "loaded" component.

If your state logic gets more advanced you then should take a look at the Flux architecture and its implementation library Redux.

answered Nov 2, 2016 at 16:00

user5520186

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Show loading spinner while waiting for data to be fetched in ReactJS render

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related