47 lines
1014 B
TypeScript
47 lines
1014 B
TypeScript
import Typography from '@mui/material/Typography';
|
|
import { useState } from 'react';
|
|
import Box from '@mui/material/Box';
|
|
import { useTimeout } from '../hooks';
|
|
|
|
export type FuseLoadingProps = {
|
|
delay?: number;
|
|
className?: string;
|
|
};
|
|
|
|
/**
|
|
* FuseLoading displays a loading state with an optional delay
|
|
*/
|
|
function FuseLoading(props: FuseLoadingProps) {
|
|
const { delay = 0, className } = props;
|
|
const [showLoading, setShowLoading] = useState(!delay);
|
|
|
|
useTimeout(() => {
|
|
setShowLoading(true);
|
|
}, delay);
|
|
|
|
return (
|
|
<div>
|
|
<Typography
|
|
className="text-13 sm:text-20 -mb-16 font-medium"
|
|
color="text.secondary"
|
|
>
|
|
Loading
|
|
</Typography>
|
|
<Box
|
|
id="spinner"
|
|
sx={{
|
|
'& > div': {
|
|
backgroundColor: 'palette.secondary.main'
|
|
}
|
|
}}
|
|
>
|
|
<div className="bounce1" />
|
|
<div className="bounce2" />
|
|
<div className="bounce3" />
|
|
</Box>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default FuseLoading;
|