-
-
Notifications
You must be signed in to change notification settings - Fork 32.2k
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
CircularProgress, length of the line does not animate under load #10327
Comments
The circular progress animation requires CPU/GPU processing power to run, much more than a simple rotation. I don't think that we could do anything to improve the current situation. It's definitely a limitation. Under heavy load, we lose the stroke dash animation, the only thing that keeps working is the rotation. At least, we rely 100% on CSS to run the animation, some different implementation relies on JS too that makes it less efficient. Some benchmark on a single frame:The performance drawer when disabling the dash animation(the spike of CPU scripting is the hot reloading, the dash animation freeze) |
@henrylearn2rock My best advise would that you run scripting intensive operations in a web worker or by batch in order not to block the main rendering thread. Also, displaying a single circular progress on the page should cover 90% of the use cases. Don't overuse the component. Maybe we should warn if more than 10 instances are mounted? |
I ran into this problem using Apollo Client Query component, it allows to display different components on different situations (Loading, Error, Success). And when I render CircularProgress on Loading it freezes in an ugly way. The solution was to remove shrink animation from CircularProgress:
I suggest adding
|
@SergeyVolynkin Your example can be condensed down to: export default withStyles({
circleIndeterminate: {
animation: 'none',
strokeDasharray: '80px, 200px',
strokeDashoffset: '0px'
}
})(CircularProgress); Do you have a visual illustration of what's happening? |
@oliviertassinari Except in my case, the length of the line can become as small as 10px (that's what I describe it as "in an ugly way") |
@SergeyVolynkin Oh sure, this sounds like a great idea! It's what Facebook is doing: Do you want to open a pull request? :) |
@oliviertassinari |
@SergeyVolynkin Awesome :) |
@oliviertassinari will the shrinkAnimation prop only work on the indeterminate variant? |
@joshwooding Yes, we can add a warning to ensure that constraint. |
@oliviertassinari Is it okay if I work on this? Do you have a warning in mind? I was thinking: ''Material-UI: you have provided a Also I'm pretty sure I would have to change CircularProgress to a class component to prevent the warning from printing every render. Is this cool? |
@joshwooding The warning wording is great. Printing the warning at each render isn't great. However, it's something we are already doing. It's a valid option. The alternative is to use the |
Expected Behavior
CircularProgress animation should be smooth and predictable under load
Current Behavior
The animation is okay but the dynamic length of the line only updates once a while under load. Maybe my understanding of Promise is wrong? I thought it would move the load away from the main UI thread?
Steps to Reproduce (for bugs)
demo: https://codesandbox.io/s/j4xvnvv8nv (warning, Chrome pls, firefox crashes under this artificial load)
Context
My app uses canvas to resize a bunch of user selected files. I tried CircularProgress but to my surprise the animation is semi broken. My workaround: animated Gif.
Your Environment
The text was updated successfully, but these errors were encountered: