Hi! I’m using QList with potentially a lot of items in Cashier pwa to display the list of accounts.
The performance with circa 500 items being loaded from IndexedDB and loaded into the list is pretty bad. It takes several seconds to load and clicking the buttons in the toolbar take a few seconds too.
The performance of the list in the Select input, with the same data, is excellent, though.
I’m pretty sure I’m missing something here and there is a better way to do this.

The source for the page displaying the accounts is here: https://gitlab.com/alensiljak/cashier/blob/master/src/views/Accounts.vue

Any tips about optimizing list behaviour with Quasar v1 (beta24) is welcome! This could also be a general tip about lists.

I’m guessing that rendering all the nodes should not be necessary on start and I should look into the source of QSelect.

@metalsadman You’re right. I’m losing track of what’s what anymore.

@metalsadman said in Is it necessary to update CLI V2:

it’s just @quasar/app v2, not quasar/cli v2.

Isn’t it just the opposite? The CLI is v2 and the app is still 1.12.8?

Wonderful, I’ll try it out. It looks good in the demo. Thank you, @morlz !

Hi! I’m using QList with potentially a lot of items in Cashier pwa to display the list of accounts.
The performance with circa 500 items being loaded from IndexedDB and loaded into the list is pretty bad. It takes several seconds to load and clicking the buttons in the toolbar take a few seconds too.
The performance of the list in the Select input, with the same data, is excellent, though.
I’m pretty sure I’m missing something here and there is a better way to do this.

The source for the page displaying the accounts is here: https://gitlab.com/alensiljak/cashier/blob/master/src/views/Accounts.vue

Any tips about optimizing list behaviour with Quasar v1 (beta24) is welcome! This could also be a general tip about lists.

I’m guessing that rendering all the nodes should not be necessary on start and I should look into the source of QSelect.

The Input event provides enough detail to customize when the dialog gets closed:
@input -> function(value, reason, details)
I use ‘day’ and ‘today’ to close the dialog.
Thanks @s-molinari for the pointer as to which component to hide (proxy). I was trying to hide the date component in vain.