44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
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')!
|
|
)
|
|
}
|
|
}
|