mirror of
https://github.com/overleaf/overleaf.git
synced 2024-12-04 23:26:02 -05:00
4138f9707a
Migrate history versions list to Bootstrap 5 GitOrigin-RevId: 4e006ad353cb11eadaefb2df41d2b8591003c664
75 lines
1.6 KiB
TypeScript
75 lines
1.6 KiB
TypeScript
import { useTranslation } from 'react-i18next'
|
|
import { useEffect, useState } from 'react'
|
|
import OLSpinner, {
|
|
OLSpinnerSize,
|
|
} from '@/features/ui/components/ol/ol-spinner'
|
|
import { isBootstrap5 } from '@/features/utils/bootstrap-5'
|
|
import { setTimeout } from '@/utils/window'
|
|
import classNames from 'classnames'
|
|
|
|
function LoadingSpinner({
|
|
align,
|
|
delay = 0,
|
|
loadingText,
|
|
size = 'sm',
|
|
className,
|
|
}: {
|
|
align?: 'left' | 'center'
|
|
delay?: 0 | 500 // 500 is our standard delay
|
|
loadingText?: string
|
|
size?: OLSpinnerSize
|
|
className?: string
|
|
}) {
|
|
const { t } = useTranslation()
|
|
|
|
const [show, setShow] = useState(false)
|
|
|
|
useEffect(() => {
|
|
const timer = setTimeout(() => {
|
|
setShow(true)
|
|
}, delay)
|
|
|
|
return () => {
|
|
window.clearTimeout(timer)
|
|
}
|
|
}, [delay])
|
|
|
|
if (!show) {
|
|
return null
|
|
}
|
|
|
|
const extraClasses = isBootstrap5()
|
|
? [
|
|
'd-inline-flex',
|
|
align === 'left' ? 'align-items-start' : 'align-items-center',
|
|
]
|
|
: null
|
|
|
|
return (
|
|
<div className={classNames('loading', className, extraClasses)}>
|
|
<OLSpinner size={size} />
|
|
|
|
{loadingText || t('loading')}…
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default LoadingSpinner
|
|
|
|
export function FullSizeLoadingSpinner({
|
|
delay = 0,
|
|
minHeight,
|
|
loadingText,
|
|
size = 'sm',
|
|
}: {
|
|
delay?: 0 | 500
|
|
minHeight?: string
|
|
loadingText?: string
|
|
size?: OLSpinnerSize
|
|
}) {
|
|
return (
|
|
<div className="full-size-loading-spinner-container" style={{ minHeight }}>
|
|
<LoadingSpinner size={size} loadingText={loadingText} delay={delay} />
|
|
</div>
|
|
)
|
|
}
|