bug(mat-sort-header): performance & change detection issue with the whole table

[woteska]

trafficstars

Reproduction

With Stackblitz I can't reproduce it as dev tools is not working there.

https://ibb.co/XXjZw1r

Steps to reproduce:

1. Go to official Material page (https://material.angular.io/components/table/overview#sorting)
2. Press F12
3. Enable Paint flashing tool
4. See that if you hover mat-sort-header (not clicking it, just hover), the whole table will be rendered again and again for nothing (even if you leave the sort header).

Expected Behavior

If I have a complex page with Material table, I would not expect performance issues because of re-rendering the whole table on hovering mat-sort-header. Table's data definetely should not connect to mat-sort-header on hover event by default.

Actual Behavior

Causes performance issues. https://ibb.co/XXjZw1r

Environment

• Angular: 9 latest
• CDK/Material: 9 latest
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[andrewseguin]

Here is the stackblitz example as a separate site: https://oemlkyybkmp.angular.stackblitz.io/

If I enable paint flashing, I do not see the entire table flashing green when hovering over the sort headers. Can you confirm that you see the same thing?

[woteska]

Here is the stackblitz example as a separate site: https://oemlkyybkmp.angular.stackblitz.io/

If I enable paint flashing, I do not see the entire table flashing green when hovering over the sort headers. Can you confirm that you see the same thing?

Unfortunately I can't check it, because it does not load in... "Starting dev server"

[wesselvdv]

Isn't this the same as the mat-tooltip issue, where it was ultimately the cdk-overlay that's being re-drawn but because it covers the whole table it appears as if it's the table itself?

[crisbeto]

I don't see any paint flashing issues either and as mentioned above, the multiple change detections are because we manage the arrow animations inside the NgZone which fires off several events. We should look into doing something similar to https://github.com/angular/components/pull/19432 for the sort header, but I suspect that it'll be more difficult since the animation is more complicated.

[AshotAleqs]

here is the reproductio nexample of this bug: https://stackblitz.com/edit/stackoverflow-table-example?file=src%2Fapp%2Ftable-basic-example.html I have opened the issue I didn't saw this one.

https://github.com/angular/components/issues/21667

[MeMeMax]

Just experienced the same and saw this github issue. This also breaks animations of e.g. charts which destroys the look and feel of my page. A solution is really much appreciated. Ofcourse I know you guys have a lot to do.