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

import { createPortal } from 'react-dom'
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}`}
          data-variant={variant}
        >
          <div className={styles.loadingSpinner}></div>
        </div>
      )

    default:
      return createPortal(
        <div className={styles.loadingSpinnerOverlay}>
          <div
            className={styles.loadingSpinnerContainer}
            data-variant={variant}
          >
            <div className={styles.loadingSpinner}></div>
            {desc && <p className={styles.loadingSpinnerDesc}>{desc}</p>}
          </div>
        </div>,
        document.getElementById('root')!
      )
  }
}