search

siemens / ix

Siemens Industrial Experience is a design system for designers and developers, to consistently create the perfect digital experience for industrial software products.
https://ix.siemens.io/
MIT License
210 stars 68 forks source link

Performance issue when scrolling ag-grid with ix-elements in cell renderers #1286

Open SusiHorter opened 6 months ago

SusiHorter commented 6 months ago

Prerequisites

What happened?

We are using ag-grid with ix-elements inside cell renderers (e.g. buttons, icons, pills) and faced some performance issue when scrolling. The ix-elements diappear when scrolling fast through the list. This only occours when the cell renderers use ix-elements. see comparison: https://stackblitz.com/edit/hpufse?file=src%2Fapp%2Fapp.component.html)

What type of frontend framework are you seeing the problem on?

Angular

Which version of iX do you use?

v2.2.1

Code to produce this issue.

https://stackblitz.com/edit/hpufse?file=src%2Fapp%2Fapp.component.html
danielleroux commented 6 months ago

Looks like this is more related to ag-grid rendering. Here a example of rendering 2000 rows without aggrid https://stackblitz.com/edit/j8h8x4?file=src%2Fapp%2Fbuttons.ts

danielleroux commented 6 months ago

As soon we have more insights we give you feedback. Maybe as temp. workaround you can play with the rowBuffer to get better results

e.g rowBuffer of 15

https://github.com/siemens/ix/assets/2144313/66197894-dd70-4ea7-a033-0d378dfbe37a

SusiHorter commented 6 months ago

@danielleroux Thanks for the quick reply. We will try the workaround using the RowBuffer for now.

github-actions[bot] commented 6 months ago

🤖 Hello @SusiHorter

Your issue will be analyzed and is part of our internal workflow. To get informed about our workflow please checkout the Contributing Guidelines

JIRA: IX-1272

heipa89 commented 1 month ago

We have the same issue. When we add a cellRenderer showing one ix-icon-button we see an extrem drop of scroll performance. After replacing the button with a simple button-Tag styled with bootstrap we resolve the issue. So its seems to be an issue regarding the IX component. We also had such issues with other cellRenderes for translation and number formatting. We found out that this was solved with using "ViewEncapsolation: None" in Angular. So the browser is not loading styling for each cell separatly but only once for all cells. This also might be the issue here regarding the shadow-dom, which also will result in loading styling for each component separatly.

SusiHorter commented 1 month ago

Hi @danielleroux, can you please provide any update about this bug?