53 lines
1.2 KiB
TypeScript
53 lines
1.2 KiB
TypeScript
import React from 'react'
|
|
import { Box, CircularProgress, Typography, Skeleton } from '@mui/material'
|
|
|
|
interface LoadingSpinnerProps {
|
|
size?: number
|
|
message?: string
|
|
variant?: 'spinner' | 'skeleton'
|
|
}
|
|
|
|
export default function LoadingSpinner({
|
|
size = 40,
|
|
message = 'Loading...',
|
|
variant = 'spinner',
|
|
}: LoadingSpinnerProps) {
|
|
if (variant === 'skeleton') {
|
|
return (
|
|
<Box sx={{ p: 2 }}>
|
|
<Skeleton variant="text" width="60%" height={32} sx={{ mb: 2 }} />
|
|
<Skeleton
|
|
variant="rectangular"
|
|
width="100%"
|
|
height={120}
|
|
sx={{ mb: 1 }}
|
|
/>
|
|
<Skeleton
|
|
variant="rectangular"
|
|
width="100%"
|
|
height={120}
|
|
sx={{ mb: 1 }}
|
|
/>
|
|
<Skeleton variant="rectangular" width="100%" height={120} />
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
p: 4,
|
|
gap: 2,
|
|
}}
|
|
>
|
|
<CircularProgress size={size} thickness={4} />
|
|
<Typography variant="body2" color="text.secondary">
|
|
{message}
|
|
</Typography>
|
|
</Box>
|
|
)
|
|
}
|