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

import { createPortal } from 'react-dom'
import styles from './style.module.scss'
import { PropsWithChildren } from 'react'

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

export const LoadingSpinner = (props: PropsWithChildren<Props>) => {
  const { desc, children, 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 && (
              <div className={styles.loadingSpinnerDesc}>
                {desc}
                {children}
              </div>
            )}
          </div>
        </div>,
        document.getElementById('root')!
      )
  }
}