Q-Tree - Expanding and collapsing nodes is extremely slow

Question

I have a q-tree loaded with a massive data (>1000 nodes, 5 or more levels nested). It loads fine but when I do an expandAll(), then everything becomes very very slow.

Tried the following and it gets a bit improved, but it is still slow:

deep freezing object
use q-virtual-scroll (not sure if this was done correctly since it only supports items and tables)
setting duration prop to 1
removing connectors using no-connectors prop
disabling QSlideTransition (I modified QTree.js internally) - helped quite significantly

So during debugging, I noticed the following:

when trying to expand/collapse a node, click is recognized, but Quasar Q-Tree re-renders the entire tree (iterates through the entire __getChildren() and __getNode() every single time a node is clicked - which takes a while because of the massive node data)
- So to achieve what I want (skip/do not repeatedly re-iterate through the __getChildren() and __getNode()) - I tried to save the previously rendered component in __getNode() as on my code below. But with this, clicked nodes do not expand at all anymore -- any idea how can I achieve what I want and if it is possible?

__getNode (h, node) {
   // Check if we have a pre-saved rendered output, return it if so
   if (this.outputArray?.[node?.nodeId]) {
      return this.outputArray[node.nodeId]
   }

   // ... a chunk of code goes here ...

   // Save the rendered output in this.output
   this.output = h('div', {
        key,
        staticClass: 'q-tree__node relative-position',
        class: { 'q-tree__node--parent': isParent, 'q-tree__node--child': !isParent }
      }, [
        h('div', {
        // ... codes codes codes ...
        }, [
        // ... codes codes codes ...
        ]
     ]
   )

   // Save the rendered output for re-use later
   this.outputArray[node.nodeId] = {}
   this.outputArray[node.nodeId] = {...this.output}
   return this.output
}

Here is my tree, for reference:

I was also thinking of using lazy-load, but not sure how to go about it since the expandAll() feature is a must-have.

Here is a sample CodePen: https://codepen.io/keechan/pen/zYomMyR

To see the tree at its slowest, click on Expand All button (wait for a while for it to finish expanding) then try to collapse/expand different nodes. Notice the delay. The tree object is only a sample - in real case, it is constructed based on the contents of a json/xml file.

So 2 issues here:

ExpandAll() is extremely slow (solved when I disable QSlideTransition)
Expanding/collapsing nodes is too slow/delayed when all nodes are expanded.

Help!!! Thanks in advance!

Q-Tree - Expanding and collapsing nodes is extremely slow

0 Answers