IdsDatagrid: Headers with filters/icons are slow to render

[eaenriquez]

Describe the bug
The current observations with the datagrid are:

1. That having the filters/icons on the column headings are affecting the performance.
2. Having many or few records doesnt affect the loading speed, we could load thousands of records fast, and with the same amount of records, loading it with filters/icons however is slow.

To Reproduce
To replicate the issue, we need an environment where we can toggle the data and the columns. We did that in a replication project with M3 ExD. Please follow the setup and the steps to reproduce.

Setup:

1. clone ssh://[[email protected]]:7999/William.Hernebrink/exd-light.git
2. run npm i -y
3. run npx nx run m3:serve, then open localhost:4200 in Chrome browser
4. click "Ids Datagrids" to show a page with a lot of datagrids

Steps to reproduce the behavior:

1. To toggle the data, we have buttons on each datagrid to set/unset the data, To see the difference, toggle the data a few times without the filter columns, then toggle the data again with filter columns.
2. To toggle the columns, with or without icons, we will need to comment/uncomment a line of code in the source. To do this, we can just edit this file libs > shared > ui > components > src > lib > ids-datagrid > ids-datagrid.component.ts. line 22 has no icons, line 23 has icons, just pick one to comment out and the other to render.

Expected behavior
Having filters/icons on the column headings shouldn't be as slow when loading/unloading records

Version

• sohoxi: 4.88.0
• ids enterprise ng: 16.8.0
• ids enterprise wc: 1.0.0-beta.16

Platform

• Infor Application/Team Name: M3 UI
• Device: Dell Laptop, i7-13th gen processor, 32 GB memory, on a 4x slowed down browser simulation
• Browser Name: chrome
• Browser Version: Version 127.0.6533.88 (Official Build) (64-bit)

[tmcconechy]

The filters have a lot of components in them. So putting a lot in there probably isnt going to be the fastest but maybe there are some tweaks we can do.