WithLoader is a React + Redux Higher Order Component (HOC) which is used to add loader functionality to any React + Redux Component

action-creators.js

/*
* Author:- Ronit Mukherjee <connect.ronit@gmail.com> [ronitmukherjee.com]
* CreatedOn:- 16-06-2018
*/
import {SHOW_LOADER,HIDE_LOADER} from "./action-types";

export const showLoader = () => { console.log("show loader"); return (
    {
        type: SHOW_LOADER
    }
)}

export const hideLoader = () => (
    {
        type: HIDE_LOADER
    }
)

action-types.js

/*
* Author:- Ronit Mukherjee <connect.ronit@gmail.com> [ronitmukherjee.com]
* CreatedOn:- 16-06-2018
*/
export const SHOW_LOADER = "SHOW_LOADER"
export const HIDE_LOADER = "HIDE_LOADER"

sample-code.js

/*
* Author:- Ronit Mukherjee <connect.ronit@gmail.com> [ronitmukherjee.com]
* CreatedOn:- 16-06-2018
*/
import React from 'react'
import WithLoader from 'from_path_where_WithLoader_is_kept/WithLoader'
import SomeComponentWhichWantsLoader from './some-component-which-wants-loader'

export const props => (
  <WithLoader>
    <SomeComponentWhichWantsLoader />
  </WithLoader>
)

some-component-which-wants-loader.js

/*
* Author:- Ronit Mukherjee <connect.ronit@gmail.com> [ronitmukherjee.com]
* CreatedOn:- 16-06-2018
*/
/*
* showLoader & hideLoader functions are added to props by HOC - WithLoader
*/
import React,{Component} from 'react'

export class extends Component{
  
  render(){
    <div>
      <button onClick={()=>this.props.showLoader()}>Show Loader</button>
      <button onClick={()=>this.props.hideLoader()}>Hide Loader</button>
    </div>
  }
}

WithLoader.css

/*
* Author:- Ronit Mukherjee <connect.ronit@gmail.com> [ronitmukherjee.com]
* CreatedOn:- 16-06-2018
*/
.with-loader{
     position: relative;
     width: 100%;
     height: 100%;
     z-index: 1;
}
 .with-loader .loader{
     background-color: rgba(255,255,255,0.5);
     height: 100%;
     position: absolute;
     width: 100%;
     z-index: 999;
}
 .lds-ring {
     display: inline-block;
     position: relative;
     width: 64px;
     height: 64px;
     position:absolute;
    /*it can be fixed too*/
     left:0;
     right:0;
     top:0;
     bottom:0;
     margin:auto;
}
 .lds-ring div {
     box-sizing: border-box;
     display: block;
     position: absolute;
     width: 51px;
     height: 51px;
     margin: 6px;
     border: 6px solid #666666;
     border-radius: 50%;
     animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
     border-color: #666666 transparent transparent transparent;
}
 .lds-ring div:nth-child(1) {
     animation-delay: -0.45s;
}
 .lds-ring div:nth-child(2) {
     animation-delay: -0.3s;
}
 .lds-ring div:nth-child(3) {
     animation-delay: -0.15s;
}
 @keyframes lds-ring {
     0% {
         transform: rotate(0deg);
    }
     100% {
         transform: rotate(360deg);
    }
}

WithLoader.js

/*
* Author:- Ronit Mukherjee <connect.ronit@gmail.com> [ronitmukherjee.com]
* CreatedOn:- 16-06-2018
*/
import React from 'react'
import {connect} from 'react-redux'

import './WithLoader.css'
import {showLoader,hideLoader} from "./actions/action-creators";

const WithLoader = (props) => (
    <div className="with-loader col-sm-12">
        {
            props.is_loader_visible ?
                <div className="loader row">
                    <div className="lds-ring">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                </div> : ""
        }
        {React.cloneElement(props.children, {
            showLoader: ()=>{props.showLoader()},
            hideLoader: ()=>{props.hideLoader()}
        })}
    </div>
)

const mapStateToProps = (state) => { return ({
    is_loader_visible: state.WithLoader.is_loader_visible
})}

const mapDispatchToProps = (dispatch) => ({
    showLoader: () => dispatch(showLoader()),
    hideLoader: () => dispatch(hideLoader()),
})

export default connect(mapStateToProps,mapDispatchToProps)(WithLoader)

WithLoaderReducer.js

/*
* Author:- Ronit Mukherjee <connect.ronit@gmail.com> [ronitmukherjee.com]
* CreatedOn:- 16-06-2018
*/
import {SHOW_LOADER,HIDE_LOADER} from './action-types'

export const WithLoader = (state={
        is_loader_visible:false
    },action) =>{
    switch(action.type){
        case SHOW_LOADER:
            return {
                ...state,
                is_loader_visible: true
            }
        case HIDE_LOADER:
            return {
                ...state,
                is_loader_visible: false
            }
        default: return state
    }
}