[Bug Report][3.6.8] VTreeview slow performance on expand

[yuwu9145]

Environment

Vuetify Version: 3.6.8
Vue Version: 3.4.27
Browsers: Chrome 125.0.0.0
OS: Mac OS 10.15.7

Steps to reproduce

1. Load reproduction link
2. Expand a node

Expected Behavior

Should be as fast as using VList:
https://play.vuetifyjs.com/#eNp1k02P2jAQhv/KKKoEaMlCW/WShpVW26qnXlrtCZDWjQ24dWzLH5QK5b93kuDEhHBJ7JlnPt6xvT4n1hSLZ60fj54lWZI7VmpBHHvaSID8mBbEUCgEsXa1ScpTSrxTmwT+cuoOaPm4XG6Shm1owa2DY7pTBn2/gUv4EAEdku6N8hqORHiG4DMtuYwo5EIbmMwK5TJSOH4krsl7Bm2UtlBdhfTJOQZj3C8uKdINix077kRcLF9EeFx6EY0gMkd0XDSIndaOOfBZLbpeY82Yy/6wf4jxgTV0VUc8NpsBEGbUAJzG3kU/1qClmWs4jouxPUnc1EeJm4HA3BaG65ZiJ62MA8p2xAsH5zYRJY5kMJ3B6gmmFxuA0kxmsJ68WmbsZDsPdlLP16Knb3Q9+U4k2bOSSTeZw6SkPCVFobx0aYmFuBYsVd4JLlmUqQ78yZzjcm9DWKH2I2S/Koynw+IvhqHYkEELb+8U+8EIDdiO3+3pVeNEuny+3V0jX5hgPULb3W2/1eyyKFSpvWM0CzOH9g6FsXdWPPUF0hKf2TfmXg5cUMMkrIDTW67OW5NSUWaRWW8Hbry6MMXegKN3+Rl/Obz/VC8eHmY3yaBN9Ki9PfT3oHNiy9j/27szp1WK3+otGknHNHccsa8ngpeQQVFLaMTCnZhqNjBVg71hzhvZNnflisD7gxidwXJkBvfkB+U8an1M6ajGa3lRw2OiqnBtmj/C+aJ7vEk1l16I5rP9DxkApl0=

Actual Behavior

Slow and frozen

Reproduction Link

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

[KaelWD]

The equivalent list example has 200 list groups not 200 lists https://play.vuetifyjs.com/#eNp1Uk1vGjEQ/SujVSRAYYG2t+0SKWp77KVVToCEuzbEqde2/EGp0P73jL2YNSThwM7He/NmxrM6FdY080etZwfPiqqoHWu1II49rCVAfSgbYig0gli7XBftsSTeqXUB/zh1zxj5slisi4iNaMGtO3sXv9wb5TVUByI8Q8r2kbZc3p1eui0WOpQ7ZTD6AlzC56xarJC6QZgVylWkcfxAXGScQBulLXRXlEGWIxl5f7ikiI5Y1HPcidBFbAKZ9TyD59LzbBNZOEPnommMcUhMgU/COMFGzRxX/WX/EcZvoqmrwJhF5waQlhcBnObZ+bDwNEvceHqVc7B/UHTCi6JzM2BtG8N1j2JHrYwDynbECwenvhAljlQwnsDyAcbnGIDSTFawGj1ZZuxoM01xEvZrMTM0uhr9JJLsWcukG01h1FJekqZRXrqyRSGuBSuVd4JLllUKxN/MOS73NtEatX8HOViN8fRW/JthOGyqoIW3H4j9YoQm2I5/2NOTxo1c6vneu4Z8Z4INENp7b/vtJmejUa32jtEq7Rz6G0prv0QDVFoHUlFmYQmrzZDBQ4QxKgHHxOIrfmr4tAjG/f0kLwE9faa9fR4e9CyLPfBslvCLd1nB9seR4OGw2BrcnXi3vQJ2k8HrBtMw543sJVO0SwuIXwTX88sZFt1UeiHi3+YV08BbjQ==

Still faster though, treeview seems to be rerendering every node at least twice.

[yuwu9145]

Yeah, there are unnecessary renderings

[uke5tar]

+1 on this issue. It is also a huge problem for me. I am currently trying to mitigate it by loading all items initially with an empty children array and then using the load-children prop to "fill" the children with the remaining items by resolving a fake Promise. It's a rather hacky workaround and not yet fully working for me as I need it but the only way to get a decent speed.

Any ideas on timeline for resolving this issue?

[TheInvoker]

+1

[yuwu9145]

Concluded two redundant renderings, on every open event:

• Treeview re-renders, caused by v-model:opened change
• Every Treeview-Item re-renders, caused by When JSX is used, v-slots cause child component does unnecessary rendering during parent component re-rendering vuejs/babel-plugin-jsx#712

[uke5tar]

Hi,
just want to let you know that even after upgrading to vuetify 3.6.9 the performance of the treeview is still quite slow with a big amount of items. I assume thats why you re-opened the issue @yuwu9145 ?
Any ideas on the timeline for fixing this issue?

Thank you for working on this btw :)

[yuwu9145]

Hi,

just want to let you know that even after upgrading to vuetify 3.6.9 the performance of the treeview is still quite slow with a big amount of items. I assume thats why you re-opened the issue @yuwu9145 ?

Any ideas on the timeline for fixing this issue?

Thank you for working on this btw :)

The remaining latency is from vuejs/babel-plugin-jsx#712

[jakeflorentine]

https://play.vuetifyjs.com/#eNq1Vm1v2jAQ/isnNKlB4y2sL2tEK7Huy75sX6rtQ1upxj6EJcfOHCeAEP99NhBiSHip1n4hOL7nufPdPec8LRqppt1hknTyDBtRY2AwTgQxeP8sAQZ522jEnOMUIm630rvnxur53LgfdMtdaz3oelC7TKnmiVnRCDRAJ1wwjRLuQFq2odZkHvR7vV6zM+ZCBE0HAt+s+NuJSRIEOREt4GzWhLt7WDhTAI0m07JYgd2OILSUPfjsTFvFe8ONwAheHxwjPGJq4NPCGixfNyZL91huQsBZorQBhmOSCVOwM2JIBMHKfVB6dLmI4KlYQxnMNqBtGF4oFzbjglNiuJIpRBc7NsXBd3hX3CvCfmvL8kAESkY0RECS5AKWOzwF4IsHmGgV43Hzy9L8D45So3RcD3jpUCXtGYIi4Ka37ZtWcnJVm5PvimYxSvOGhOwu1+TXe6cqHdgWN3w836c/6qLWTeHqpsLju7PKqnN10l1Ziq9lKbhkOLN1MGm1brug2xI0UsqkRpPkKPCl5m3Vct+q0jx1tQh7B4sR20mhORH99ytHuKu1969H6Gkvb4+MPKsgoSfAvE2JZufBPCHm7altAGWn8AfX0d89KuHwkIanUijC3jrUwuvysL+oUSN0Qy1h40NTKrwpAT9VjvFphKemx8yONdt8FjExsahMtrOzcFubhd+cofrPMdY/LJ0i+oqH09JZU4dlJr6RlFMQZK4yN3ghTi7r+2sD9RQwZDmRFBkYpBPJ/2Z4DoEnhqEQQEbWsbtdLJRxXQc9OXnWxJ5cfkijlYtF5Ye6oX/l3YpKjtGmjCJwh2QZdRezu/Vyfl5vFG+X6zvQflAMutsvoMayJTMhVj8v/wBzyliN

[lukinoe]

+1

also facing big problems with performance with > 100 items

[Colorfulstan]

Edit: First things first: Thanks for all you guys working on this ❤️

I managed to get the expand issue mitigated a bit by using mutliple VTreeviews with v-for. That way the performance issue does not scale that much and is only really noticeable in big branches of the tree-view.

However, I have another big Issue in terms of performance which is the initial rendering of a big treeview.
It blocks UI for a couple of seconds.

Is that the same Issue as already tackled here, or rather its own Ticket?

And any Tips on dealing with that? I'm sure we can come up with some ways when using the sub-components and basically re-build it with that with some kind of staggered addition to the DOM on the various trees or depth-levels, but maybe there is something planned for that already or something I don't see yet?

[robertzak]

Would it be possible to get an update on what the plans are for this issue?

This is a major blocker for our migration to vue3 right now. I'd like to have an idea if I need to try to figure out an alternative to using VTreeview, or if I can modify the configuration in someway so it can support our tree of about 225 nodes, or if we have to stay on vuetify2 for the time being.

I saw a comment from @yuwu9145 on the upstream ticket (vuejs/babel-plugin-jsx#712 (comment)) last week that setting the stable flag to true "resolves our performance issues".

Is there anyway I can manually set that on the component or in the vuetify config? Reading the related docs on that ticket didn't make it clear to me how I could leverage that flag.

I see that 3.7 was released, but it seems like VTreeview remained in Labs, and now 3.8 is on hold/TBD due to funding issues? I assume that's because this one is a blocker for considering it a production ready component?

Thank you.

[PhilippeTh]

Hi,

I'm using the VTreeview with a looooot of nodes and, while I was coding to transition to Vue3 Vuetify3, I came across this very problem where the treeview is crashing my application. I thought I'd provide a minimum reproducible example with a single one of the trees I currently have in my application:

Here's the Vue2 Vuetify2 codesandbox (mdi font not working but example still works):
Huge treeview CodeSandbox

Here's the Vue3 Vuetify3 version using play vuetify
(link is too long I needed to put it in a txt file)
LinkVuetifyPlayTooBig.txt

Something to note is also that adding the "activatable" flag on the newer version completely crashes it and you won't even be able to load it anymore (in my dev environment I see an infinite loop of [Vue warn]: Failed to resolve directive: ripple ...).

Here's my actual webpage running now where you can see the treeview working super smoothly with Vue2 Vuetify2 and with 4 of these huge trees instead of 1 like this example (2 in english and 2 in french):
https://eccc-msc.github.io/msc-animet

And the link to the github for the treeview I have that I'm absolutely unable to transition at the moment:
https://github.com/ECCC-MSC/msc-animet/blob/main/src/components/Layers/LayerTree.vue#L48

Hope this helps and hopefully this will unblock in the future.

Thank you!