MatSort arrows are visible while table is animating

[eTallang]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

The sort arrows should not be visible while the animation is in progress.

What is the current behavior?

All of the sort arrows in the table are visible while the animation is in progress. Immediately after the animation is done, the sort arrows disappear.

What are the steps to reproduce?

I stumbled upon this issue when I created a table with expandable rows with an inner table as the expandable row. The expandable table was created using the when keyword to create two rows for each list element, where the latter represented the expandable part. The disadvantage of this approach is that the expandable rows are rendered in the DOM, even if they are not visible. To prevent this, we only show the "expanded row"-table when the row is selected using the *ngIf-directive. An example is given in the StackBlitz below. I've made the animation really slow so the issue with the sort arrows gets more apparent:

https://stackblitz.com/edit/expandable-table-rows

If we skip the *ngIf-directive on the "inner" table, the problem disappears. The problem also disappears if we toggle between two rows that have been rendered, e.g. going from row 1, to row 2, then back to row 1.

What is the use-case or motivation for changing an existing behavior?

Even though this bug doesn't introduce any functional problems with the table, the glitching of the sort arrows is confusing and ugly, and should not be as it is in the example above.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 6.0.5
Angular Material 6.2.1

Is there anything else we should know?

No

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}