[Bug Report] expension panels open laggy

[ricardovanlaarhoven]

Environment

Vuetify Version: 2.2.1
Vue Version: 2.6.11
Browsers: Chrome 79.0.3945.88
OS: Windows 10

Steps to reproduce

In the codepen click on the blue blocks to open the next expansion panel

Expected Behavior

open fluently

Actual Behavior

it opens laggy, perhaps because the v-for is still rendering

Reproduction Link

https://codepen.io/ricardovanlaarhoven/pen/WNbwvev

Other comments

perhaps the expension panel is just missing an eager prop?

[YipingRuan]

FPS remains high at 60, maybe the animation curve need to be adjust?

[KaelWD]

Not performance or animation related, it opens fine if eager or the header is clicked on.

[ricardovanlaarhoven]

How could i make it eager?

perhaps the expension panel is just missing an eager prop?

Does the eager option exist? is it just undocumented?

[MajesticPotatoe]

[ricardovanlaarhoven]

ah sorry! you are right!
I did check the expansion panels and the expansion panel component but not the content..

thanks!

[arxanas]

The issue happens whenever you control the panel content externally. It reproduces in this example in the docs as well: https://vuetifyjs.com/en/components/expansion-panels/#external-control

It's very strange that the user clicking a panel to open it doesn't trigger the lag, but programmatically opening it does. I think this should be treated as a bug.

I also looked in the wrong place in the documentation. If not a bug, it should at least be addressed in the documentation, and the "external control" example should be updated to use eager and explain why it's necessary.

[alechewitt]

Just trying out Vuetify today and I've also noticed this behaviour. As @arxanas says, it only happens when you programmatically open the panel for the the first time. Setting eager to true on the v-expansion-panel-content prevents it happening.