improved progressdialog

src/components/MUIComponents/MUIBackdropProgress/index.js

@@ -0,0 +1,18 @@
+import React from 'react'
+import Backdrop from '@material-ui/core/Backdrop'
+import CircularProgress from '@material-ui/core/CircularProgress'
+import { makeStyles } from '@material-ui/core/styles'
+
+const useStyles = makeStyles(theme => ({
+	backdrop: {
+		zIndex: theme.zIndex.drawer + 1
+	}
+}))
+
+const MUIBackdropProgress = () => (
+	<Backdrop className={useStyles().backdrop} open={true}>
+		<CircularProgress color='primary' />
+	</Backdrop>
+)
+
+export default MUIBackdropProgress

src/components/MUIComponents/index.js

@@ -2,3 +2,4 @@ export { default as MUIPasswordField } from './MUIPasswordField'
 export { default as MUIRouterLink } from './MUIRouterLink'
 export { default as MUILabeledCheckbox } from './MUILabeledCheckbox'
 export { default as MUIAlertDialog } from './MUIAlertDialog'
+export { default as MUIBackdropProgress } from './MUIBackdropProgress'

src/pages/Cabinet/index.js

@@ -4,9 +4,8 @@ import { connect } from 'react-redux'
 import { Redirect } from 'react-router-dom'
 import PropTypes from 'prop-types'
 import { userActions, cabinetActions, tokensActions, alertActions } from '../../actions'
-import { CircularProgress } from '@material-ui/core'
 import { api } from './api'
-import { MUIAlertDialog } from '../../components/MUIComponents'
+import { MUIAlertDialog, MUIBackdropProgress } from '../../components/MUIComponents'
 
 const Cabinet = ({ resource }) => {
 	resource.read()
@@ -39,7 +38,7 @@ const CabinetPage = ({
 	}
 
 	return (
-		<Suspense fallback={<CircularProgress />}>
+		<Suspense fallback={<MUIBackdropProgress />}>
 			{alert.message ? (
 				<MUIAlertDialog
 					title={alert.message}