CODEWITHSUNDEEP
javascriptreactjs
Lance Shi
Lance Shi

Reputation: 1187

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

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:

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

    {this.state.showLoaidngImage ? <LoadingImage/> : null}

  2. I can choose only to have this component at top-level component and let sub-components to call the parent display loading image method.
  3. 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?

Upvotes: 0

Views: 362

Answers (3)

FMGordillo
FMGordillo

Reputation: 81

(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!

Upvotes: 0

awildeep
awildeep

Reputation: 115

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 } />

Upvotes: 0

Aniruddh Agarwal
Aniruddh Agarwal

Reputation: 917

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.

Upvotes: 2

Related Questions