LoadingIndicator

LoadingIndicator.tsx

import { FC } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faSpinner } from "@fortawesome/free-solid-svg-icons";
import "./LoadingIndicator.css";

type LoadingIndicatorProps = {
  text?: string;
};

const LoadingIndicator: FC<LoadingIndicatorProps> = ({ text = "Loading" }) => {
  return (
    <div className="loading-indicator">
      <FontAwesomeIcon icon={faSpinner} spin size="2x" />
      <span className="loading-indicator-text">{text}</span>
    </div>
  );
};

export default LoadingIndicator;

LoadingIndicator.module.css

.loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.loading-indicator-text {
  margin-top: 1rem;
  font-size: 1.2rem;
  font-weight: bold;
}