Clarity: Datagrid high records delay to render

[Dedme]

Describe the bug

When the Datagrid is processing client side, even with pagination, it is taking up to 3 seconds to render datagrid.

this is happening with my app that has the data stored in a store, i have timestamped the output of the last bit of processing on the component, to when the screen becomes interactive at 3-4 seconds.

How to reproduce

Steps to reproduce the behavior:

1. Go to https://clarity.design/documentation/datagrid/full
2. set the number of users to 3100
3. Click Apply
4. the browser will become render blocked.

Expected behavior

This did not happen with the previous version:
https://vmware.github.io/clarity/documentation/v0.13/datagrid/full
The Datagrid should be rendered with the 10 (page size) items displayed with similar speed to a datagrid with similar size.

Versions

App

• Angular: v7.1.4
• Node: v8.11.1
• Clarity: v1.0.3-patch

Device:

• Type: HP Desktop
• OS: Windows 10
• Browser: Chrome
• Version: 71.0.3578.98 (Official Build) (64-bit)

[whizkidwwe1217]

I'm having the same experience. In Chrome, the speed for me is considerable (I don't think my user will be frustrated for waiting 1 sec.) but it gradually slows down when more rows are added, especially when there's 50 or 100 rows in the grid. In Microsoft Edge, it seems like the rendering speed is maybe 5 times slower. It only took 500 ms for the API to output the HTTP response and it took 5 sec to create the DOM for the grid rows & cells. If only I could implement virtual scrolling to it that would be lightning fast :). I wonder how GrapeCity's Wijmo FlexGrid is implemented. It loads millions of records (without paging) like in a speed of sound.

_I'm not sure if I understand the this chart correctly but even without it the slowness in rendering is very noticeable in the naked eye._

[youdz]

Thanks for reporting this. The fact that there is such a difference between 0.13 and 1.0 means we really have a performance bug in here somewhere, but it's going to take some investigation to figure out what's the problem within the complex datagrid rendering lifecycle.

My first intuition is that we might have a lifecycle issue where we try to render before the pagination is instantiated, which means we'd create the DOM nodes for thousands of items instead of just the displayed one. Matt quickly checked by profiling our documentation page and it seems to point in the same direction.

Not sure how we missed this, to be honest.

[Dedme]

Hello,
looking for any update on this. :)

[Jinnie]

@youdz is absolutely right.
At some point we moved the page size initialization from the constructor to ngOnInit.
After moving it back to the constructor it renders 30k item datagrid without a visible delay.
I need to investigate if there is a valid use case that required the move from the constructor and will proceed with a fix after this.

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.