Vuetify: [Bug Report] VSkeletonLoader issue with transitions and multiple types

[pynner]

Environment

Vuetify Version: 2.1.5
Vue Version: 2.6.10
Browsers: Chrome 77.0.3865.90
OS: Mac OS 10.14.5

Steps to reproduce

When a transition is provided (transition="scale-transition"), and there are multiple types provided (types="table-heading, list-item-two-line, table-tfoot"), the skeleton will only display the first type and will not properly transition.

If the transition is removed, (delete transition="scale-transition"), the skeleton will properly display and function.

The console error is as follows and can be seen in the Codepen -> [Vue warn]: can only be used on a single element. Use for lists.

Expected Behavior

Transition and function properly

Actual Behavior

Only displays the first type and does not transition

Reproduction Link

https://codepen.io/piiner123/pen/abbBOgO?editors=1010

[bluwy]

Encountered this today, the current workaround would be to move the type's comma-separated value into types, and use the new declared skeleton type instead so it's encapsulated in a bone (div), hence being a single element in the transition.

<v-skeleton-loader
  transition="scale-transition"
  :types="{ skeleton: 'article, actions' }"
  type="skeleton"
>
  ...
</v-skeleton-loader>

It would be great if Vuetify is able to detect the number of values of type and wrap with a div accordingly. Or just wrap a div by default. Currently, it's just pushing all the skeleton bones into the transition component.

https://github.com/vuetifyjs/vuetify/blob/bb1554276ec177167d31a8a7b906b6905f72b643/packages/vuetify/src/components/VSkeletonLoader/VSkeletonLoader.ts#L142

[acdcjunior]

This workaround didn't seem to work well with the loading prop. I had to resort to the <transition> alternative, unfortunately.