v-table Content view loading slow

[u12206050]

Describe the Bug

Viewing the network tab I see that loading 500-1000 items fetches pretty fast, but still takes a long time before the table is populated, and even hangs the page a bit.

This is just to have an open issue about it, but I have already found a number of improvements that can be made to drastically increase performance.

PR coming soon.

To Reproduce

Simple select 500 to 1000 items per page to get the effect.

Errors Shown

No response

What version of Directus are you using?

9.22.4

What version of Node.js are you using?

18.12.1

What database are you using?

Mysql

What browser are you using?

Chrome

How are you deploying Directus?

GCP

[github-actions]

Linear: ENG-612

[br41nslug]

Simple select 500 to 1000 items per page

How many columns per item are you rendering? There are definitely performance improvements to be gained here im sure but rendering lets say 1000 items * 10 columns = >10.000 DOM elements will always be problematic for the browser 😬

[rijkvanzanten]

Usually, "things are slow" isn't really a thing we can action on, so unless we know of a particular bottleneck / problem to fix, I'm inclined to close this (you can make things "faster" forever, so can never be done!) 🤔

[u12206050]

Don't even need many columns, just loading 250 with 5 columns is "slowish".
Here is a performance snapshot of some slight changes that already cut the time by 30% and this is just one of the few changes I have in mind:

Loading 1000rows.
Before:

After:

And just too show the potential. Loading 12000 rows with another vue-table (that arguable doesn't have as many events) but still, loads the data in 1s.

[u12206050]

Basic steps to improve performance is to reduce the amount of checks being run per row, if it can rather just be checked per table and then rather using different component. eg. Don't use draggable component if sorting/dragging is disabled or not going to be used, this immediately gave me the 1.5s boost you see above.

[koksikus]

I also have a problem with this, it looks quite strange, because first the bottom menu with the page amount appears, I wait for 2-3 seconds and only the whole table is loaded.

[u12206050]

Same 1000 row table loaded now down to 2.5s!

[u12206050]

Ok, so will need to strike balance between code readability/maintainability and performance. The benefits are quite certain.
From avg. 5.5s down to 2.8s almost 50% better.

I do have two versions however, that are separated as two commits in the PR.

The first is probably easier to read, but the second is better performant.

Overall less nodes, listeners and memory.