Tom Butcher
dc237eecdd
- Introduced a new Spin component to standardize loading indicators across the application, enhancing visual consistency. - Updated ObjectKanban, ObjectKanbanColumn, and ObjectTable components to utilize the new Spin component, simplifying loading state management. - Refactored CSS styles in App.css to support the new Spin component, including responsive design adjustments for various loading sizes. - Removed redundant loading indicators and streamlined loading behavior for improved user experience during data fetching.
78 lines
1.5 KiB
JavaScript
78 lines
1.5 KiB
JavaScript
import PropTypes from 'prop-types'
|
|
import { LoadingOutlined } from '@ant-design/icons'
|
|
|
|
const SIZE_CLASS = {
|
|
small: 'spin-sm',
|
|
default: '',
|
|
large: 'spin-lg'
|
|
}
|
|
|
|
const DEFAULT_INDICATOR = (
|
|
<LoadingOutlined spin style={{ color: 'var(--color-primary)' }} />
|
|
)
|
|
|
|
const Spin = ({
|
|
spinning = true,
|
|
children,
|
|
indicator = DEFAULT_INDICATOR,
|
|
size = 'default',
|
|
style,
|
|
className
|
|
}) => {
|
|
const sizeClass = SIZE_CLASS[size] ?? ''
|
|
|
|
if (children == null) {
|
|
if (!spinning) return null
|
|
|
|
return (
|
|
<div
|
|
className={['spin', sizeClass, className].filter(Boolean).join(' ')}
|
|
style={style}
|
|
role='status'
|
|
aria-live='polite'
|
|
>
|
|
{indicator}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={[
|
|
'spin-nested',
|
|
spinning ? 'is-spinning' : null,
|
|
sizeClass,
|
|
className
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ')}
|
|
style={style}
|
|
>
|
|
{spinning && (
|
|
<div className='spin-overlay' role='status' aria-live='polite'>
|
|
{indicator}
|
|
</div>
|
|
)}
|
|
<div
|
|
className={['spin-content', spinning ? 'is-spinning' : null]
|
|
.filter(Boolean)
|
|
.join(' ')}
|
|
aria-busy={spinning}
|
|
>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
Spin.propTypes = {
|
|
spinning: PropTypes.bool,
|
|
children: PropTypes.node,
|
|
indicator: PropTypes.node,
|
|
size: PropTypes.oneOf(['small', 'default', 'large']),
|
|
style: PropTypes.object,
|
|
className: PropTypes.string
|
|
}
|
|
|
|
export default Spin
|