I notice a performance problem when ember-infinity adds more items into the model being grouped. I think the cause is that the entire groupBy list is being redrawn in the DOM every time a new item is added to the model.
Profiling my app with ember inspector shows that render times with ember-infinity alone are flat as each new page of data comes in. But when I display model items grouped, each added page takes longer than the one before. Comparing median render times, grouped takes 6x longer than non-grouped. (see profiling data at bottom)
Inspecting an item component's element shows that it gets a fresh id each time a new page of data is added.
I think preserving the component element, rather than destroying it and creating it again, is the key to flatter render times when adding to grouped data.
Is this something I could help develop a solution to? Or am I missing something about how to use ember-group-by or a way to take advantage of Glimmer with ember-group-by?
Hi! Thank you for ember-group-by. It makes things so simple and fast to develop!
I'm having a performance question. I'm grouping model items that are being loaded by
ember-infinity
.Here's a mockup of what I'm doing in an ember-twiddle (which is also awesome btw because it can load addons). https://ember-twiddle.com/bca5d20862a2db9a93a2dd62fa09d0df
I notice a performance problem when ember-infinity adds more items into the model being grouped. I think the cause is that the entire groupBy list is being redrawn in the DOM every time a new item is added to the model.
Profiling my app with ember inspector shows that render times with ember-infinity alone are flat as each new page of data comes in. But when I display model items grouped, each added page takes longer than the one before. Comparing median render times, grouped takes 6x longer than non-grouped. (see profiling data at bottom)
Inspecting an item component's element shows that it gets a fresh
id
each time a new page of data is added.I think preserving the component element, rather than destroying it and creating it again, is the key to flatter render times when adding to grouped data.
Is this something I could help develop a solution to? Or am I missing something about how to use
ember-group-by
or a way to take advantage of Glimmer withember-group-by
?Thanks! j a m i e
pagination render times (ms)