sigit.io/src/components/LoadingSpinner/index.tsx

import styles from './style.module.scss'

interface Props {
  desc?: string
  variant?: 'small' | 'default'
}

export const LoadingSpinner = (props: Props) => {
  const { desc, variant = 'default' } = props

  switch (variant) {
    case 'small':
      return (
        <div
          className={`${styles.loadingSpinnerContainer} ${styles.withHeight}`}
        >
          <div className={styles.loadingSpinner}></div>
        </div>
      )

    default:
      return (
        <div className={styles.loadingSpinnerOverlay}>
          <div className={styles.loadingSpinnerContainer}>
            <div className={styles.loadingSpinner}></div>
            {desc && (
              <p className={styles.loadingSpinnerDesc}>{'Loading...'}</p>
            )}
          </div>
        </div>
      )
  }
}