Merge pull request #3555 from jaytula/usestyles-loading-indicator

[RFR] Change to useStyles for LoadingIndicator component

packages/ra-ui-materialui/src/layout/LoadingIndicator.js

@@ -2,20 +2,25 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { connect } from 'react-redux';
-import { withStyles, createStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import CircularProgress from '@material-ui/core/CircularProgress';
-import compose from 'recompose/compose';
 
 import RefreshIconButton from '../button/RefreshIconButton';
 
-const styles = createStyles({
+const useStyles = makeStyles({
     loader: {
         margin: 14,
     },
 });
 
-export const LoadingIndicator = ({ classes, className, isLoading, ...rest }) =>
-    isLoading ? (
+export const LoadingIndicator = ({
+    classes: classesOverride,
+    className,
+    isLoading,
+    ...rest
+}) => {
+    const classes = useStyles({ classes: classesOverride });
+    return isLoading ? (
         <CircularProgress
             className={classNames('app-loader', classes.loader, className)}
             color="inherit"
@@ -26,6 +31,7 @@ export const LoadingIndicator = ({ classes, className, isLoading, ...rest }) =>
     ) : (
         <RefreshIconButton />
     );
+};
 
 LoadingIndicator.propTypes = {
     classes: PropTypes.object,
@@ -38,10 +44,7 @@ const mapStateToProps = state => ({
     isLoading: state.admin.loading > 0,
 });
 
-export default compose(
-    connect(
-        mapStateToProps,
-        {} // Avoid connect passing dispatch in props
-    ),
-    withStyles(styles)
+export default connect(
+    mapStateToProps,
+    {} // Avoid connect passing dispatch in props
 )(LoadingIndicator);