BlankState.jsx

import React, { Component } from 'react';

import loading_icon from '../images/ellipsis.gif';

export default class BlankState extends Component {

	constructor(props){
		super(props);

		let { data = [], dataName = 'Info', isDataLoading, customMessage } = this.props;

		this.state = {
			dataName,
			data,
			isDataLoading,
			customMessage
		}
	}

	componentWillReceiveProps(nextProps){
		this.setState({
			...this.state,
			...nextProps
		});
	}

	render(){
		const { customMessage, dataName, data, isDataLoading, className='' } = this.state;

		return(
			<div className="clearfix">
			{ isDataLoading === true ?

				<div className={ "alert alert-warning alert-loading" + className }>
                    <img 
                        src={ loading_icon } 
                        className="img-responsive loading-icon" 
                        alt="Loading..." /> &nbsp;

					{ customMessage || "Loading " + dataName.toLocaleLowerCase() }
				</div>
			:
				<div className="clearfix">
				{ data.length === 0 && data !== false ?

					<div className={ "alert alert-warning " + className }>
						No { dataName.toLocaleLowerCase() } found
					</div>
				:
					null
				}
				</div>
			}
			</div>
		)
	}
}