Source

components/Spinners/LoadingContainer/LoadingContainer.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 "./LoadingContainer.module.scss";
  9. /**
  10.  * Renders the LoadingContainer component.
  11.  * This component takes up the entire width and height of its parent component.
  12.  * This component is typically used when loading a page of data (e.g. a list of users).
  13.  * @component
  14.  * @category Spinners
  15.  * @author Dan Levy <danlevy124@gmail.com>
  16.  */
  17. const LoadingContainer = (props) => {
  18.     // Returns the JSX to render
  19.     return (
  20.         <div className={styles.loadingContainer}>
  21.             {/* Spinner */}
  22.             <MetroSpinner size={75} color="#5F9CD1" loading={true} />
  24.             {/* Message */}
  25.             <h1 className={styles.loadingContainerMessage}>{props.message}</h1>
  26.         </div>
  27.     );
  28. };
  30. // Prop types for the LoadingContainer component
  31. LoadingContainer.propTypes = {
  32.     /**
  33.      * The message to display
  34.      */
  35.     message: PropTypes.string.isRequired,
  36. };
  38. export default LoadingContainer;