import React from 'react';
import ReactLoading from 'react-loading';

const overlay = {
  position: 'fixed' /* Sit on top of the page content */,
  width: '100%' /* Full width (cover the whole page) */,
  height: '100%' /* Full height (cover the whole page) */,
  top: '0',
  left: '0',
  right: '0',
  bottom: '0',
  background: 'rgba(0,0,0,0.5)' /* Black background with opacity */,
  zindex:
    '99' /* Specify a stack order in case you're using a different order for other elements */
};

const Loading = ({ isLoading }) => (
  <>
    <div id="overlay" style={isLoading ? overlay : ''}></div>
    <ReactLoading
      type="spinningBubbles"
      color={'#fff'}
      height={'7%'}
      width={'7%'}
      className="loading-box"
    />
  </>
);

export default Loading;
