[Bug Report][3.3.19] VDataTable always shows loading text when loading prop is set

[mathiasstamm]

Environment

Vuetify Version: 3.3.19
Last working version: 3.3.18
Vue Version: 3.3.4
Browsers: Chrome 117.0.0.0
OS: Windows 10

Steps to reproduce

Click on the "TOGGLE LOADING PROP" button and compare the results between vuetify version 3.3.18 and 3.3.19.

Expected Behavior

Table rows remain visible while loading, just grayed out.

Actual Behavior

Table rows always disappear, default loading text is shown.

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

deb7683

I belive that this commit introduced the change which always hides the table rows. If the loading prop is set, the rows are always replaced. There should be an extra flag which allows the actual rows to remain visible, or something similar.

[diaeai]

+1

[hendrikbl]

Just upgraded from vuetify 3.3.16 to 3.4.0 and this behaviour still exists. In 3.3.16 labs version it was working as expected.

[dm4t2]

+1

Always replacing the rows causes page jumps and feels very disturbing.
It would be better to display the rows unless the loading-text prop is set.

[gduliscouet-ubitransport]

I had the same issue when upgrading. @nekosaur this functional change of the loading came with this commit to handle the loading-text prop. Was it expected ? What do you think about @dm4t2 proposition ? Would it work to check for props.loading && (slots.loading || props.loadingText) ?

[BenShelton]

The documentation is also inconsistent with this behaviour, for example the loading slot states at https://vuetifyjs.com/en/api/v-data-table/#slots-loading:

Defines content for when loading is true and no items are provided.

Other documentation talking about the loading prop says similar things, the loading text is not shown if there are items.

To line up with that there'd also need to be a check in the render function mentioned above that there aren't any items first before showing the loading slot or loading text.

if (props.loading && !props.items.length && (slots.loading || props.loadingText)) {

[abdu-udwz]

Additional gifs to further clarify the expected behavior. A comparison between the old Vuetify 2 and the current behavior.

In Vuetify 2 docs the example:

In the latest version of Vuetify 3 docs example:

Currently, I work around this by wrapping my table in a VCard and relying on it for loading state. It is somehow better than having layout shifts