loading screen

Import.js

import React, { Component } from "react";
import axios from "axios";
import Loading from "../components/Loading";

class Import extends Component {
  constructor(props) {
    super(props);

    this.file = null;

    this.state = {
      isLoading: false,
      page_id: "test",
      type: "faq"
    };
  }
  handleSubmit = async event => {
    event.preventDefault();
    this.setState({ isLoading: true });
    if (this.file && this.file.size > config.MAX_ATTACHMENT_SIZE) {
      alert("Please pick a file smaller than 10MB");
      return;
    }

    const data = new FormData();
    const { page_id, type } = this.state;
    data.append("file", this.file);
    data.append("page_id", page_id);
    data.append("type", type);
    const self = this;
    axios
      .post(`${config.URL}/importIntent`, data)
      .then(function(response) {
        self.setState({ isLoading: false });
      })
      .catch(function(error) {
        alert(error);
        console.log(error);
      });
  };

  render() {
    return (
      <div className="containers">
        <div className="input-group">
          <h1>Import FAQ</h1>
        </div>
        <div className="container">
          <form onSubmit={this.handleSubmit}>
            <button type="submit" className="btn btn-success button-import">
              Import
            </button>
            <Loading loadingText="Importing" loading={this.state.isLoading} />
          </form>
        </div>
      </div>
    );
  }
}

export default Import;

Loading.css

.-loading {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
  z-index: -1;
  opacity: 0;
  pointer-events: none;
}

.-loading > div {
  position: absolute;
  display: block;
  text-align: center;
  width: 100%;
  top: 50%;
  left: 0;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.6);
  transform: translateY(-52%);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.-loading.-active {
  opacity: 1;
  z-index: 2;
  pointer-events: all;
}

.-loading.-active > div {
  transform: translateY(50%);
}

Loading.js

import React from "react";
import "./Loading.css";
import classnames from "classnames";

export default ({ className, loading, loadingText, ...rest }) => (
  <div
    className={classnames("-loading", { "-active": loading }, className)}
    {...rest}
  >
    <div className="-loading-inner">{loadingText}</div>
  </div>
);