Fix AppBar jiggles when scrolling down rapidly

packages/ra-ui-materialui/src/layout/Layout.tsx

@@ -16,7 +16,6 @@ import { Menu as DefaultMenu, MenuProps } from './Menu';
 import { Error, ErrorProps } from './Error';
 import { SkipNavigationButton } from '../button';
 import { useSidebarState } from './useSidebarState';
-import { useScrollTrigger } from '@mui/material';
 
 export const Layout = (props: LayoutProps) => {
     const {
@@ -33,7 +32,6 @@ export const Layout = (props: LayoutProps) => {
 
     const [open] = useSidebarState();
     const [errorInfo, setErrorInfo] = useState<ErrorInfo>(null);
-    let trigger = useScrollTrigger();
 
     const handleError = (error: Error, info: ErrorInfo) => {
         setErrorInfo(info);
@@ -42,11 +40,7 @@ export const Layout = (props: LayoutProps) => {
     return (
         <StyledLayout className={clsx('layout', className)} {...rest}>
             <SkipNavigationButton />
-            <div
-                className={clsx(LayoutClasses.appFrame, {
-                    [LayoutClasses.appbarCollapsed]: trigger,
-                })}
-            >
+            <div className={LayoutClasses.appFrame}>
                 <AppBar open={open} title={title} />
                 <main className={LayoutClasses.contentWithSidebar}>
                     <Sidebar>
@@ -94,7 +88,6 @@ const PREFIX = 'RaLayout';
 export const LayoutClasses = {
     appFrame: `${PREFIX}-appFrame`,
     contentWithSidebar: `${PREFIX}-contentWithSidebar`,
-    appbarCollapsed: `${PREFIX}-appbarCollapsed`,
     content: `${PREFIX}-content`,
 };
 
@@ -117,18 +110,17 @@ const StyledLayout = styled('div', {
         flexDirection: 'column',
         flexGrow: 1,
         marginTop: theme.spacing(6),
-        transition: `margin ${theme.transitions.easing.easeOut} ${theme.transitions.duration.shortest}ms`,
         [theme.breakpoints.down('sm')]: {
             marginTop: theme.spacing(7),
         },
     },
-    [`& .${LayoutClasses.appbarCollapsed}`]: {
-        marginTop: 0,
-        transition: `margin ${theme.transitions.easing.sharp} ${theme.transitions.duration.shorter}ms`,
-    },
     [`& .${LayoutClasses.contentWithSidebar}`]: {
         display: 'flex',
         flexGrow: 1,
+        transition: theme.transitions.create('margin', {
+            easing: theme.transitions.easing.easeOut,
+            duration: theme.transitions.duration.enteringScreen,
+        }),
     },
     [`& .${LayoutClasses.content}`]: {
         backgroundColor: theme.palette.background.default,

packages/ra-ui-materialui/src/layout/Sidebar.tsx

@@ -2,7 +2,13 @@ import * as React from 'react';
 import { styled } from '@mui/material/styles';
 import { ReactElement } from 'react';
 import PropTypes from 'prop-types';
-import { Drawer, DrawerProps, useMediaQuery, Theme } from '@mui/material';
+import {
+    Drawer,
+    DrawerProps,
+    useMediaQuery,
+    Theme,
+    useScrollTrigger,
+} from '@mui/material';
 import lodashGet from 'lodash/get';
 import { useLocale } from 'ra-core';
 
@@ -13,9 +19,9 @@ export const Sidebar = (props: SidebarProps) => {
     const isXSmall = useMediaQuery<Theme>(theme =>
         theme.breakpoints.down('sm')
     );
-    const isSmall = useMediaQuery<Theme>(theme => theme.breakpoints.down('md'));
     const [open, setOpen] = useSidebarState();
     useLocale(); // force redraw on locale change
+    const trigger = useScrollTrigger();
 
     const toggleSidebar = () => setOpen(!open);
 
@@ -29,22 +35,13 @@ export const Sidebar = (props: SidebarProps) => {
         >
             {children}
         </StyledDrawer>
-    ) : isSmall ? (
-        <StyledDrawer
-            variant="permanent"
-            open={open}
-            onClose={toggleSidebar}
-            classes={SidebarClasses}
-            {...rest}
-        >
-            <div className={SidebarClasses.fixed}>{children}</div>
-        </StyledDrawer>
     ) : (
         <StyledDrawer
             variant="permanent"
             open={open}
             onClose={toggleSidebar}
             classes={SidebarClasses}
+            className={trigger ? SidebarClasses.appBarCollapsed : ''}
             {...rest}
         >
             <div className={SidebarClasses.fixed}>{children}</div>
@@ -78,6 +75,7 @@ export const SidebarClasses = {
     paperAnchorDockedBottom: `${PREFIX}-paperAnchorDockedBottom`,
     modal: `${PREFIX}-modal`,
     fixed: `${PREFIX}-fixed`,
+    appBarCollapsed: `${PREFIX}-appBarCollapsed`,
 };
 
 const StyledDrawer = styled(Drawer, {
@@ -87,7 +85,24 @@ const StyledDrawer = styled(Drawer, {
     shouldForwardProp: () => true,
 })(({ open, theme }) => ({
     height: 'calc(100vh - 3em)',
-
+    marginTop: 0,
+    transition: theme.transitions.create('margin', {
+        easing: theme.transitions.easing.easeOut,
+        duration: theme.transitions.duration.enteringScreen,
+    }),
+    [`&.${SidebarClasses.appBarCollapsed}`]: {
+        // compensate the margin of the Layout appFrame instead of removing it in the Layout
+        // because otherwise, the appFrame content without margin may revert the scrollTrigger,
+        // leading to a visual jiggle
+        marginTop: theme.spacing(-6),
+        [theme.breakpoints.down('sm')]: {
+            marginTop: theme.spacing(-7),
+        },
+        transition: theme.transitions.create('margin', {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.leavingScreen,
+        }),
+    },
     [`& .${SidebarClasses.docked}`]: {},
     [`& .${SidebarClasses.paper}`]: {},
     [`& .${SidebarClasses.paperAnchorLeft}`]: {},