FormidableLabs / FormidableLabs/victory

Components flashing and re-rendering when `animate` is set to true

Open
#1,997 12 comments 2 reactions 0 assignees View on GitHub
Issue: Accepted Type: Bug :bug: Type: Performance :chart_with_upwards_trend:
Dominant language
TypeScript
Stars
11.2k
Forks
536
PR merge metrics
No merged PRs in 30d

Description

Setting the `animation` prop to `true` impacts the performance of a component even when it is not actively animating.

If I enable paint flashing in the Chrome dev tools to show which parts of the chart are re-painting, there is a big difference between a chart where `animate` is set to false vs. a chart where `animate` is set to true.

With animation:
![bar-chart-flashing-animation](https://user-images.githubusercontent.com/13334214/137391091-466e5ddf-c73a-4f5c-857e-a034ae4f15dc.gif)

Without animation:
![Kapture 2021-10-14 at 13 30 29](https://user-images.githubusercontent.com/13334214/137391060-838f4a0b-0dec-4228-9750-18d9f9a1d65b.gif)

In the second example, only the tooltip is re-rendering, as expected. In the first, there is some visible flashing in the axis labels, as they are re-rendering along with a lot of the data as the tooltip moves.

Steps to reproduce:
1.[Enable Paint flashing in the chrome dev tools](https://developer.chrome.com/docs/devtools/evaluate-performance/reference/#paint-flashing)
2. Compare the stacked bar chart performance of https://victory-testing-dashboard.netlify.app/?animate=true vs https://victory-testing-dashboard.netlify.app/

Related issues: #1993

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.