BlockUI.jsx

import * as React from 'react';
import styled from 'styled-components';
import { CircularProgress } from 'material-ui/Progress';

const BlockUIBody = styled.div`
  position: fixed;
  background-color: rgba(255, 255, 255, 0.5);
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
`;

export default class BlockUI extends React.Component {
  state = {
    ref: null,
    width: 0,
    height: 0,
    transform: 'translate(0px, 0px)',
  };

  componentDidMount = () => {
    this.checkerId = requestAnimationFrame(this.checkParentUpdates);
  };

  componentWillUnmount = () => {
    cancelAnimationFrame(this.checkerId);
  };

  checkParentUpdates = () => {
    const { ref, width, height, transform } = this.state;
    if (ref && ref.parentElement) {
      const rects = ref.parentElement.getBoundingClientRect();
      const newWidth = rects.width;
      const newHeight = rects.height;
      const newTransform = `translate(${rects.left}px, ${rects.top}px)`;
      if (width !== newWidth || height !== newHeight || transform !== newTransform) {
        this.setState({
          width: newWidth,
          height: newHeight,
          transform: newTransform,
        });
      }
    }
    this.checkerId = requestAnimationFrame(this.checkParentUpdates);
  };

  handleSetRef = ref => {
    this.setState({ ref });
  };

  render() {
    const { ref, width, height, transform } = this.state;

    if (!ref) return <BlockUIBody innerRef={this.handleSetRef} />;

    return (
      <BlockUIBody innerRef={this.handleSetRef} style={{ width, height, transform }}>
        <CircularProgress />
      </BlockUIBody>
    );
  }
}