[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!

[piliadis]

Hi there,
Is there any update on this performance issue?
@robertzak did you managed to get it working?
Thank you!

[robertzak]

No. I've put it on hold. I couldn't figure out how to set the flag mentioned.

I also tried a few things to work around the slow performance, like only loading the root list and none of the child nodes, then dynamically adding them from a store when the node expands but other bugs with the tree component was preventing me from getting it working how it needs to.

At this point I'm just stuck either with the slow performance or simply removing the tree and coming up with an alternative way to show the data to our users

[piliadis]

Thanks @robertzak for the info. I'm in the same position, stuck using vuejs-tree.
Regards!

[lukinoe]

@pilladis

How we solved it was loading the nodes dynamically for each branch when the extend is clicked. In this way we could mitigate performance issues.

[robertzak]

That's my plan as well. However the load on expand wasn't working. It looks like they fixed that in 3.7.2 so I'm going to give it another try.

[klimekszymon]

How we solved it was loading the nodes dynamically for each branch when the extend is clicked. In this way we could mitigate performance issues.

@lukinoe Could you provide with some code example, I would much appreciate.

I have to render tree with 200 parent nodes containing 5-10 childs each, without the performance optimisation the tree component is dramatically slow and impossible to interact with.

[robertzak]

I made a quick and dirty (and vastly oversimplified) example of how I'm doing it. In my example it always loads the same children. In reality you need to look up the correct child array from your full tree and append them. It also isn't handling the recursive case (if you have a tree with more than 2 levels).

In my own app, I have methods that first truncate the tree so it's just the root nodes. I also call the same truncate method on the children when I "load" them, so any grandchildren would also be "dynamically" loaded only when the user expands again. It is basically just setting the children to an empty array instead of the actual children. An empty array will let the underlying code call off to the loadChildren method you write when the user expands the node.

In you case since your tree has 200 root nodes, I'm not sure this will really help you that much. My tree has only about 10 root nodes, each with a varying number of children (10, 25, 75, 100, etc) so this makes the initial tree load really quick for us. The more the user expands, the slower the tree becomes. Since you're still going to have to render 200 nodes no matter what, it may still be slow even if you don't load the children right away.

https://play.vuetifyjs.com/#eNqtVW1r2zAQ/iuHGdRhqZMUNphJCmX7AfsQ9qUpVNjnRkyWjHROGkL++06KHdtZ0m5QYSzr7vQ89yb5cR85m00eqirZ1Bil0ZywrJQgvF9pgPnmliziRuIWUskqt1hFYV5FkCoj8ttsLVVuUbPCr783y1V0P590uxltPulB89JlVlYUaBQStDiwAM1sD9aKXXw3nU5HSSGVikd+E/TN2s+kFFUcb4Qag8xfR7C4h703BbBItdXtClidwowhp/DZm45bOUlSmMJzcB6W6Ag+7dng8NyYHPx0aFzA18pYghwLUStq0Uuktcld2rH10xFrk+Oo0wFMJrBcSwf8bMUOzAYtOMkJkoXEPAFJLiBI/QK0RnCixC76wlhA3rIDDzxAldoRihx2poatqTkgZczvugooIqNaqBYHCmtKb2ghM0yNhOArBkLnUNVuPQSmG9d5IIsiINaOHeeU8BYXBAGADISmYUHZgTT18PX9yczSYWzRGbXBXtGOwyEtZYmmpjjul7QdsoCQ0+TUBQr1C61hsYDpINHHMbT1scVJchJwZfvGodzdaHw81rCvOoxh1hP4BmkVTd80cy5IpHAMJO7a0R+kFB47hIHboVtPPdrr0xs+rkpmgqTRDtKbgU0bEuM+9RStJxdZvlxk+WGyukTNfXidYpiov7Luwb8O9vYJ+MYhWezO4d+I4jySq6Sz6VXWkm8gK4W6e4f3XHWB6cQ2LNM5I9+wl7jeifNSrABvZ+OfKz67VvKt9pfOh3TV7NtFjl8yR/P/BK30MAoffETnk9MvJDqMda1UeD39AUpH2sg=

[PhilippeTh]

For anyone that doesn't have a solution for their application, I personally gave up on the VTreeview entirely and I instead remade a treeview from scratch to fit my needs:

LinkVuetifyPlayTooBig2.txt

Edit: If anyone knows how I can put this huge link in a normal link in my issues I would appreciate greatly, right now if I use the [name](url) it simply doesn't appear and if I put the entire link it takes like 4 pages of scroll to get to the end and won't even be clickable you'll have to copy the entire thing and paste it...