Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | 74x 836x 836x 228x 103x 103x 103x 103x 228x 228x 228x 836x 90x 90x | import { Box, LinearProgress } from "@mui/material";
import React from "react";
import { styled } from "@theme/v2/Provider";
interface IComponentProps {
isLoading: boolean;
}
const ProgressBar = ({ isLoading }: IComponentProps) => {
const [progress, setProgress] = React.useState(0);
React.useEffect(() => {
const timer = setInterval(() => {
setProgress((oldProgress) => {
Iif (oldProgress === 100) {
clearInterval(timer);
return oldProgress;
}
const diff = Math.random() * 20;
return Math.min(oldProgress + diff, 100);
});
}, 200);
return () => {
setProgress(0);
clearInterval(timer);
};
}, [isLoading]);
if (!isLoading) return <Box height={2} />;
return <StyledProgress variant="determinate" value={progress} />;
};
const StyledProgress = styled(LinearProgress)(({ theme }) => ({
height: "2px",
backgroundColor: "transparent",
"& .MuiLinearProgress-bar1Determinate": {
backgroundColor: theme.palette?.primitive?.blue[100],
},
}));
export default ProgressBar;
|