From 342c25818940464820349285bdcb722d00edd368 Mon Sep 17 00:00:00 2001
From: fzaninotto <fzaninotto@gmail.com>
Date: Thu, 22 Oct 2020 14:55:34 +0200
Subject: [PATCH 1/3] Fix Appbar custom content flickers when loading

The size of the spinner isn't exactly the same as the size of the refresh button. As a consequence, if the AppBar has a custom content, this content moves a bit when the app loads data.

Making the size of the two components match exactly fixes the bug.
---
 packages/ra-ui-materialui/src/layout/LoadingIndicator.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/ra-ui-materialui/src/layout/LoadingIndicator.js b/packages/ra-ui-materialui/src/layout/LoadingIndicator.js
index 4dd7787ec31..481a4aca646 100644
--- a/packages/ra-ui-materialui/src/layout/LoadingIndicator.js
+++ b/packages/ra-ui-materialui/src/layout/LoadingIndicator.js
@@ -11,7 +11,7 @@ import RefreshIconButton from '../button/RefreshIconButton';
 const useStyles = makeStyles(
     {
         loader: {
-            margin: 14,
+            margin: 16,
         },
         loadedIcon: {},
     },
@@ -27,8 +27,8 @@ const LoadingIndicator = props => {
         <CircularProgress
             className={classNames('app-loader', classes.loader, className)}
             color="inherit"
-            size={18}
-            thickness={5}
+            size={16}
+            thickness={6}
             {...rest}
         />
     ) : (

From ca690d892fabc4c8d2fa32ef6cf27bf5d6c2cb4d Mon Sep 17 00:00:00 2001
From: fzaninotto <fzaninotto@gmail.com>
Date: Thu, 22 Oct 2020 16:31:10 +0200
Subject: [PATCH 2/3] Review

---
 packages/ra-ui-materialui/src/layout/LoadingIndicator.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/ra-ui-materialui/src/layout/LoadingIndicator.js b/packages/ra-ui-materialui/src/layout/LoadingIndicator.js
index 481a4aca646..abcb5fe6f23 100644
--- a/packages/ra-ui-materialui/src/layout/LoadingIndicator.js
+++ b/packages/ra-ui-materialui/src/layout/LoadingIndicator.js
@@ -9,12 +9,12 @@ import { useRefreshWhenVisible } from 'ra-core';
 import RefreshIconButton from '../button/RefreshIconButton';
 
 const useStyles = makeStyles(
-    {
+    theme => ({
         loader: {
-            margin: 16,
+            margin: theme.spacing(2),
         },
         loadedIcon: {},
-    },
+    }),
     { name: 'RaLoadingIndicator' }
 );
 
@@ -27,7 +27,7 @@ const LoadingIndicator = props => {
         <CircularProgress
             className={classNames('app-loader', classes.loader, className)}
             color="inherit"
-            size={16}
+            size="1em"
             thickness={6}
             {...rest}
         />

From a87bb03f0529f18ed7ada636151353147ed06bac Mon Sep 17 00:00:00 2001
From: fzaninotto <fzaninotto@gmail.com>
Date: Thu, 22 Oct 2020 17:08:45 +0200
Subject: [PATCH 3/3] review

---
 packages/ra-ui-materialui/src/layout/LoadingIndicator.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/ra-ui-materialui/src/layout/LoadingIndicator.js b/packages/ra-ui-materialui/src/layout/LoadingIndicator.js
index abcb5fe6f23..67b2eefa9b1 100644
--- a/packages/ra-ui-materialui/src/layout/LoadingIndicator.js
+++ b/packages/ra-ui-materialui/src/layout/LoadingIndicator.js
@@ -2,7 +2,7 @@ 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';
 
@@ -23,11 +23,12 @@ 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="1em"
+            size={theme.spacing(2)}
             thickness={6}
             {...rest}
         />