Vuetify: v-btn loader CPU usage

[Christilut]

Steps to reproduce

This is probably the same as #553 but I noticed it again

CPU usage is steady around 50% and it is very noticeable. Both my laptops are experiencing massive performance issues when a browser tab with a spinning loader is visible. My XPS 13 (only has onboard graphics card, also Linux mint) won't even re-render Visual Studio Code and on my XPS 15 the entire system just slows down and it is very noticeable.

On the v-progress demo page it wasn't a big deal because it's not really a practical example but for 1 spinner to cause this is crazy.

Versions

Vue 2.3.4, latest vuetify
Linux mint 18

What is expected ?

No performance loss

What is actually happening ?

Reproduction Link

https://codepen.io/anon/pen/pweyzp

[cawa-93]

[johnleider]

Can you check out https://dev.vuetifyjs.com and see if this issue still persist for you. We have made a few adjustments which should improve this already from a recent ticket.

[Christilut]

This is on my XPS13, I'll try on the XPS15 tomorrow

Can you fork the codepen with the vuetify dev version so I can test that too?

[johnleider]

You can just go to https://dev.vuetifyjs.com

[cawa-93]

@johnleider The first message says about a large load with one button and one loader. At https://dev.vuetifyjs.com we have a lot of loaders, which is why browser indicators may not be objective. It will be fair to create an identical template in the codepen with one button and one loader using the dev vuetifyjs

[dohomi]

@cawa-93 @Christilut you can use the dev version of vuetify inside of your package.json like this:
"vuetify": "https://github.com/vuetifyjs/vuetify-builds.git#dev
Here is the folder on github: https://github.com/vuetifyjs/vuetify-builds/tree/dev/dist you can link the files into you Codepen testing the current features

[Christilut]

Same codepen with dev version: https://codepen.io/anon/pen/EXXpqV

I'm getting ~20% CPU usage on that tab now, according to chrome task manager

[cawa-93]

+1

[Christilut]

I researched this problem a bit but I don't think there is a solution for it right now... Seems like most infinite animations have this problem.

[johnleider]

You are correct. I've been trying to tweak them so that we can move part of the processing to the GPU, but not very successful so far. Animation run off of the CPU, as you said, and will cause a load when running unfortunately.

I will continue to take steps to resolve this and see if I can make it any better.

[cawa-93]

By the way. I noticed that the animation does not stop when the component is hidden.
https://codepen.io/cawa-93/pen/LLLgOM
Probably it is necessary stop the animation, if the component is not active? This will allow you to save a little of the resources of the page as a whole.

[johnleider]

This is something that we fixed for next release already.

[johnleider]

This should be better for next release. We will continue to improve this as we find better methods.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord