React.js - what is the good approach to show/hide loading image

Question

I have a loading image in my page and a number of react components. In several components I need to implement the functionality of show/hide loading image.

So there are three options I can think of:

In each component, use a state variable and a loadingImage component to show hide the image. Like below code:

{this.state.showLoaidngImage ? <LoadingImage/> : null}
I can choose only to have this component at top-level component and let sub-components to call the parent display loading image method.
I can also use pure jquery here in each component and directly use the id to show/hide

The first approach seem to duplicate the component tags in each component and I am thinking of whether it is a good approach or not.

The second one is a bit complicated to implement.

The third approach seems dirty to me.

So which one should I use in the react world?

using state in each component will force you to make everything as class-based component which is neither a good idea nor recommended. — izengod
– izengod, Commented Mar 1, 2018 at 4:38
@izengod if he needs to show/hide images in a component he needs state. Can you show your data? — Omar K
– Omar K, Commented Mar 1, 2018 at 4:40

Aniruddh Agarwal · Accepted Answer · 2018-03-01 04:39:54Z

2

You should be going with the second approach because in that case you will not have to rewrite your loadingImage component again and according to the react good practices we should create components for everything, and use them wherever possible.

answered Mar 1, 2018 at 4:39

Aniruddh Agarwal

9171 gold badge8 silver badges22 bronze badges

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

Comments

awildeep · Accepted Answer · 2018-03-01 04:42:33Z

0

I think I would favor having your LoadingImage inside a component itself that handles hiding and showing via a prop. Something like this:

import React from 'react';
import PropTypes from 'prop-types';
import LoadingImage from 'where/this/exists';

const Loader = ({
    show
}) => {
    return (
        { show && <LoadingImage /> }
    );
};

Loader.propTypes = {
    show : PropTypes.bool.isRequired
};

export default Loader;

Then in your template:

<Loader show={ this.state.showLoader } />

answered Mar 1, 2018 at 4:42

awildeep

1151 silver badge8 bronze badges

Comments

FMGordillo · Accepted Answer · 2018-03-01 04:55:00Z

(this result might be combined with @awildeep's response)

Assuming that you have React components that fetches to APIs, and those componends needs a "Loading image" separately, the first thing that comes into my mind is using redux and redux-promise-middleware.

Why?

You could have a global state, say for example

API_1: {
  isFullfilled: false,
  isRejected: false,
  ...
},
API_2: {
  isFullfilled: false,
  isRejected: false,
  ...
}

So, for instance, let's say that you have two React components that connects with those APIs. You will have two states!

{!this.state.API_1.isFullfilled && !this.state.API_1.isRejected : <LoadingImage /> : null }

Yes, this is too much code, but there's a way to simplyfy it, in mapStateToProps:

const mapStateToProps = state => {
  const { API_1, API_2  } = state
  return {
    isFullfilled_API_1: API_1.isFullfilled,
    isRejected_API_1: API_1.isRejected,
    isFullfilled_API_2: API_2.isFullfilled,
    isRejected_API_2: API_2.isRejected,
  }
}

// Let's get those variables!
const { isFullfilled_API_1, isRejected_API_1 } = this.props

{ !isFullfilled_API_1 && !isRejected_API_1 ? <LoadingPage> : null}

You can track status for each component without a headache
You will accomplish your goal!

Hope it helps, and let me know if you have any concern!

Collectives™ on Stack Overflow

React.js - what is the good approach to show/hide loading image

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related