fix: replace MUI with ui-core components - loading spinner (TECH-324) (…

…#814)

Replaces the MUI loading spinner with the equivalent component from ui-core. https://jira.dhis2.org/browse/TECH-324
Also removed the duplicate LoadingMask file.

packages/app/src/components/Visualization/Visualization.js

@@ -25,7 +25,7 @@ import {
     NoDataOrDataElementGroupSetError,
     CombinationDEGSRRError,
 } from '../../modules/error'
-import LoadingMask from './LoadingMask'
+import LoadingMask from '../../widgets/LoadingMask'
 
 export class Visualization extends Component {
     constructor(props) {

packages/app/src/components/Visualization/__tests__/Visualization.spec.js

@@ -8,7 +8,7 @@ import {
 } from '../Visualization'
 import StartScreen from '../StartScreen'
 import { GenericServerError } from '../../../modules/error'
-import LoadingMask from '../LoadingMask'
+import LoadingMask from '../../../widgets/LoadingMask'
 
 jest.mock('@dhis2/data-visualizer-plugin', () => () => <div />)
 

packages/app/src/widgets/LoadingMask.js

@@ -1,33 +1,13 @@
 import React from 'react'
-import PropTypes from 'prop-types'
-import { withStyles } from '@material-ui/core/styles'
-import CircularProgress from '@material-ui/core/CircularProgress'
+import styles from './styles/LoadingMask.module.css'
+import { CircularLoader } from '@dhis2/ui-core'
 
-const styles = theme => ({
-    progress: {
-        margin: theme.spacing.unit * 2,
-        maxWidth: 200,
-        textAlign: 'center',
-        alignSelf: 'center',
-    },
-    outer: {
-        display: 'flex',
-        justifyContent: 'center',
-        height: '100%',
-    },
-})
-
-function CircularIndeterminate(props) {
-    const { classes } = props
+function LoadingMask() {
     return (
-        <div className={classes.outer}>
-            <CircularProgress className={classes.progress} />
+        <div className={styles.outer}>
+            <CircularLoader className={styles.progress} />
         </div>
     )
 }
 
-CircularIndeterminate.propTypes = {
-    classes: PropTypes.object.isRequired,
-}
-
-export default withStyles(styles)(CircularIndeterminate)
+export default LoadingMask

packages/app/src/widgets/styles/LoadingMask.module.css

@@ -0,0 +1,12 @@
+.progress {
+    margin: var(--spacers-dp12);
+    max-width: 200;
+    text-align: center;
+    align-self: center;
+}
+
+.outer {
+    display: flex;
+    justify-content: center;
+    height: 100%;
+}