Source

components/Spinners/LoadingHUD/LoadingHUD.js

  1. // NPM module imports
  2. import React from "react";
  3. import PropTypes from "prop-types";
  4. import { MetroSpinner } from "react-spinners-kit";
  6. // Style imports
  7. import styles from "./LoadingHUD.module.scss";
  9. /**
  10.  * Renders the LoadingHUD component.
  11.  * This component takes up the entire screen and blocks clicks.
  12.  * The spinner itself, however, is a small HUD.
  13.  * This component is typically used when submitting a form or submitting some sort of data (e.g. signing in).
  14.  * @component
  15.  * @category Spinners
  16.  * @author Dan Levy <danlevy124@gmail.com>
  17.  */
  18. const LoadingHUD = (props) => {
  19.     // Returns JSX to render
  20.     return (
  21.         <div className={styles.background}>
  22.             <div className={styles.modal}>
  23.                 {/* Spinner */}
  24.                 <MetroSpinner size={50} color="#5f9cd1" loading={true} />
  26.                 {/* Message */}
  27.                 <h3 className={styles.modalText}>{props.message}</h3>
  28.             </div>
  29.         </div>
  30.     );
  31. };
  33. // Prop types for the LoadingHUD component
  34. LoadingHUD.propTypes = {
  35.     /**
  36.      * The message to display
  37.      */
  38.     message: PropTypes.string.isRequired,
  39. };
  41. export default LoadingHUD;