-
-
Notifications
You must be signed in to change notification settings - Fork 32k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[code-infra] Try disabling animations when taking screenshots #42537
Conversation
Netlify deploy previewhttps://deploy-preview-42537--material-ui.netlify.app/ Bundle size report |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sounds good. Could you revert the react-spting/web
aspect of my PR since this one would make it useless?
🙂 Well, that broke argos. Will have to investigate what's breaking here, the emulation, or react spring detection of the flag. Would you mind retracting your review so nobody accidentally merges this? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
oupsi
@alexfauquette Been emulating reduced motion on the charts docs with the chrome devtools. It looks like it only disables animations during transitions, not during initial render: Screen.Recording.2024-06-06.at.17.08.17.movInitial render of e.g. pie chart shows animation, even with prefers-reduced-motion Screen.Recording.2024-06-06.at.17.07.52.mov |
That's weird, because I can reproduce it in production, but not on localhost 🤯 |
@Janpot To be clear today on https://mui.com/x/react-charts/#overview, what I can observe:
I don't know, this feels like behaving as expected. During visual regressions, we don't have hydration. Now, here, with the visual regressions, the problem might be timing-related. I guess by the time https://github.com/mui/mui-x/blob/ba8d2f2d08c0d1c1e48108004de7d01128d07ca6/packages/x-charts/src/hooks/useReducedMotion.ts#L13 run on the first mount (outside of hydration), it's already too late. I have tried to dive deep into this but couldn't get to the bottom. I just suspect that it's import * as React from 'react';
import { PieChart } from '@mui/x-charts/PieChart';
import { useDrawingArea } from '@mui/x-charts/hooks';
import { styled } from '@mui/material/styles';
import NoSsr from '@mui/material/NoSsr';
const data = [
{ label: 'India', value: 50000 },
{ label: 'USA', value: 35000 },
{ label: 'Brazil', value: 10000 },
{ label: 'Other', value: 5000 },
];
interface StyledTextProps {
variant: 'primary' | 'secondary';
}
const StyledText = styled('text', {
shouldForwardProp: (prop) => prop !== 'variant',
})<StyledTextProps>(({ theme, variant }) => ({
textAnchor: 'middle',
dominantBaseline: 'central',
fill: theme.palette.text.secondary,
fontSize:
variant === 'primary'
? theme.typography.h5.fontSize
: theme.typography.body2.fontSize,
fontWeight:
variant === 'primary'
? theme.typography.h5.fontWeight
: theme.typography.body2.fontWeight,
}));
interface PieCenterLabelProps {
primaryText: string;
secondaryText: string;
}
function PieCenterLabel({ primaryText, secondaryText }: PieCenterLabelProps) {
console.log('render', 'PieCenterLabel')
const { width, height, left, top } = useDrawingArea();
const primaryY = top + height / 2 - 10;
const secondaryY = primaryY + 24;
return (
<React.Fragment>
<StyledText variant="primary" x={left + width / 2} y={primaryY}>
{primaryText}
</StyledText>
<StyledText variant="secondary" x={left + width / 2} y={secondaryY}>
{secondaryText}
</StyledText>
</React.Fragment>
);
}
const colors = [
'hsl(220, 25%, 65%)',
'hsl(220, 25%, 45%)',
'hsl(220, 25%, 30%)',
'hsl(220, 25%, 20%)',
];
function ChartUserByCountry() {
console.log('render', 'Root')
return (
<div>
<PieChart
colors={colors}
margin={{
left: 80,
right: 80,
top: 80,
bottom: 80,
}}
series={[
{
data,
innerRadius: 75,
outerRadius: 100,
paddingAngle: 0,
highlightScope: { faded: 'global', highlighted: 'item' },
},
]}
height={260}
width={260}
slotProps={{
legend: { hidden: true },
}}
>
<PieCenterLabel primaryText="98.5K" secondaryText="Total" />
</PieChart>
</div>
);
}
function load() {
return new Promise(resolve => {
setTimeout(() => resolve({
default: ChartUserByCountry
}), 200);
});
}
export default function Bar() {
const Component = React.lazy(() => load());
return (
<NoSsr>
<React.Suspense fallback={<div aria-busy />}>
<Component />
</React.Suspense>
</NoSsr>
);
} Otherwise, there are ignore rules that we can't remove, from running the test regression env locally: ![]()
|
My (naive) expectation would be that it SSRs the chart content and that an initial animation is not necessary at all since there is no change happening. Assuming that this is not possible due to screen size differences, my real expectation is that it SSRs a placeholder, renders the same placeholder during hydration and then renders the chart content on the first render after hydration. with or without animation depending on the user preferences. Side-note: this is something that bugs me in most charting libraries, I'm interested in transitions between two states of the chart, but never in animation on the first render. It's really weird that this is the default everywhere, you wouldn't do that with e.g. a grid, animate in every row on the first render. If it were up to me the default would be to never animate the initial render of the chart content, and have an explicit option to turn that on. Not sure if it's related to the problem, but the component in the snippet calls
Right, you can animate without movement, like a fade in. But it also doesn't mean "just tone down the motion a bit as you see fit". As an a11y setting, I'm pretty sure "reduce" means "remove all motion except when essential for the UX". This does mean though that we need to globally turn off react-spring animations in our tests since for stabilizing the screenshots we really do want to disable all animations, even the ones that don't create movement. |
@alexfauquette I'm adding back the react spring global as we really want to disable all animation for screenshots, not just motion. Are you tracking the initial animation issue already somewhere? |
The issue is create 👍 |
Attempt at reducing flakeyness. This is a follow-up on #42530. I'm not aware of the reasons we could have for keeping animations enabled during screenshot taking. But would love to hear opinions on this.
prefers-reduced-motion
, to disable animations in libraries that respect it.