[Feature Request] Add lazy functionality to Progress components

Problem to solve

There have been various reports of the Progress components spiking CPU in different scenarios.

Various reports:

#2324, #785, #720, #553

Progress components:

https://vuetifyjs.com/en/components/progress-circular https://vuetifyjs.com/en/components/progress-linear/

Proposed solution

A member of my team discovered that if you wrap these components with VLazy you can greatly reduce the performance impact - especially if multiple instances of Progress components exist on the page.

The proposed solution is to add a lazy prop to the Progress components that gives them lazy functionality (i.e. not rendering if not visible on the page).

This would be either by wrapping in VLazy or using the v-intersect directive - likely requiring a minimal change to the render function and an added prop of lazy.

https://vuetifyjs.com/en/components/lazy https://vuetifyjs.com/en/directives/intersect/

P.S. some kind of lazy directive would be cool but not sure if it’s feasible/wanted and would for sure have a namespace clash with v-lazy

[KaelWD]

Yeah go ahead. This can be by default, doesn’t need a prop.

[KaelWD]

Don’t use VLazy, use the intersect directive to supply the transition only when the element is visible.