P10 Mobile: How to delay ReactJS screen rendering while query not completed yet?

P10 Mobile: How to delay ReactJS screen rendering while query not completed yet?

  

My screens are bumpy because when aggregate/query not completed yet, screen still rendered.

Aggregates are killing for mobile scenario's. For large amounts of data in a mobile scenario you can better create server actions from where you can manage the 'finish' state. In this way you can better integrate them in syncing scenario's and create a 'loading' screen state or maybe even navigating by the user without having to wait on finishing dataload.

I had scenario like this:

Shopping cart screen:

- top container display selected products in card grid format. A click on product will move product from top container to bottom container.

- bottom container display all available products (only around 10+ products) in card grid format. A click on product will move product from bottom container to top container.

Top and bottom container each have it's own aggregate.

While moving product between top and bottom container, screen becomes bumpy during refreshing both aggregates.


Should I use if widget detecting aggregate list property like empty or fetch status, then displaying placeholder image when fetch not finished yet?

Will it help?

Or should I revamped it and use List operation (ListAppend, ListDelete) directly to List screen variable (memory) instead of continuous refreshing both aggregates?

Thanks.

Solution

If you can implement using list it will be faster for sure.

Solution

Ok, I'll try using List.

Thanks.