performance: prevent redraws when adding items

[openhouse]

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 with ember-group-by?

Thanks! j a m i e

pagination render times (ms)

page	ember-infinity	ember-infinity + groupBy
1	738.36	1469.06
2	535.02	1741.34
3	693.96	2157.17
4	518.81	2673.14
5	420.21	2816.98
6	408.54	3678.72
7	618.75	3680.13
8	468.07	4205.32
9	606.09	4354.98
10	443.51	4976.33