Missing Ways to Disable Ripple and/or Animation Programmatically about adonis-ui

[benruehl]

There are 3 kinds of those effects. All of them received large performance improvements in v1.9 so make sure you have at least that version.

1. Ripple Effect
Appears on click (e.g. for buttons). Docs can be found at https://benruehl.github.io/adonis-ui/pages/ripple. It would surprise me if that one causes performance problems. Maybe for very large controls. But as one can only click on one control at a time, the effect is never rendered multiple times in parallel or something. It cannot really be disabled in the sense of taking it out of the visual tree but it can be kind of deactivated in 2 ways. FIrst is setting its duration to 0 so that there is no animation anymore making it look like a normal color change on click. The other is to set its background color to transparent so that the effect is simply not visible.

2. Cursor Spotlight
This is the effect being seen when hovering over buttons, text boxes, listbox items, etc. Docs are over here at https://benruehl.github.io/adonis-ui/pages/cursor-spotlight. This one is still limited to single controls (or small groups of controls in some cases, e.g. menu items). But the performance implications might be higher for this one as it is rendered on every mouse move event instead of just mouse clicks. To disable it, almost the same rules apply as for the ripple effect meaning that it cannot be removed from the controls. But the color can be set to transparent or its size can be set to 0. Additionally the blur radius can be reduced which makes the effect less smooth but it might result in slightly better performance on slow systems (although I did not really feel a difference).

3. Progress Animation
This one is exclusive to progress bars. It looks like the ripple effect but is not triggered by a mouse click but instead is always active for determinate progress bars as long as they are not disabled. Docs are at https://benruehl.github.io/adonis-ui/pages/loading. This effect really has the potential to drain performance in case many progress bars are rendered at the same time. That's why it has an actual option to disable it which takes it out of the visual tree so that it is not processed at all. It can be set using the ProgressBarExtension and its IsProgressBarAnimationEnabled property as stated in the docs.

Hope this helps. In case there is still something you are missing in the docs or you find is not clearly expressed, I am open to feedback. Maybe I will create a page about performace based on this answer.

[benruehl]

As there has not been any activity here for a while, I assume that all questions have been answered and will close this issue now.