Merge pull request #5434 from marmelab/fix-spinner-flickering

Fix Appbar custom content flickers when loading

Author: djhi

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

@@ -2,19 +2,19 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useSelector } from 'react-redux';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles, useTheme } from '@material-ui/core/styles';
 import CircularProgress from '@material-ui/core/CircularProgress';
 import { useRefreshWhenVisible } from 'ra-core';
 
 import RefreshIconButton from '../button/RefreshIconButton';
 
 const useStyles = makeStyles(
-    {
+    theme => ({
         loader: {
-            margin: 14,
+            margin: theme.spacing(2),
         },
         loadedIcon: {},
-    },
+    }),
     { name: 'RaLoadingIndicator' }
 );
 
@@ -23,12 +23,13 @@ const LoadingIndicator = props => {
     useRefreshWhenVisible();
     const loading = useSelector(state => state.admin.loading > 0);
     const classes = useStyles(props);
+    const theme = useTheme();
     return loading ? (
         <CircularProgress
             className={classNames('app-loader', classes.loader, className)}
             color="inherit"
-            size={18}
-            thickness={5}
+            size={theme.spacing(2)}
+            thickness={6}
             {...rest}
         />
     ) : (