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 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | 1x 1x 1x 1x 9x | import { Box, CircularProgress, Typography } from '@material-ui/core';
import { ReactComponent as BugFixingSvg } from 'images/bug-fixing.svg';
import PropTypes from 'prop-types';
function ErrorMessage({ error, ...sx }) {
return (
<Box
sx={{
color: 'error.main',
display: 'block',
...sx,
}}
>
<span role="alert">There was an error</span>
<Box
component="pre"
sx={{
display: 'block',
margin: 0,
mb: -5,
whiteSpace: 'break-spaces',
}}
>
{error.message}
</Box>
</Box>
);
}
// Full page spinner
function FullPageSpinner() {
return (
<Box
sx={{
height: '100vh',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<CircularProgress size={150} />
</Box>
);
}
// Full page error fallback
function FullPageErrorFallback({ error }) {
return (
<Box
role="alert"
sx={{
height: '100%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Box
clone
sx={{
width: '50%',
height: '50%',
margin: 2,
}}
>
<BugFixingSvg />
</Box>
<Box
sx={{
margin: 2,
}}
>
<Typography variant="h5">
Uh oh... There's a problem. Try refreshing the app.
</Typography>
</Box>
<Box
sx={{
margin: 2,
}}
>
<Typography variant="body1">{error.message}</Typography>
</Box>
</Box>
);
}
function ErrorFallback({ error }) {
return (
<ErrorMessage
error={error}
sx={{
height: '100%',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
}}
/>
);
}
FullPageErrorFallback.propTypes = {
error: PropTypes.object.isRequired,
};
export { ErrorFallback, FullPageSpinner, FullPageErrorFallback };
|