Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(material/sort): simplify animations #30057

Merged
merged 1 commit into from
Nov 27, 2024

Conversation

crisbeto
Copy link
Member

@crisbeto crisbeto commented Nov 21, 2024

For a long time the sort header's animation was set up by rendering out 4 div elements and then arranging them to look like an arrow. This is somewhat complicated to maintain, difficult to customize, in some cases it leads to weird visual bugs and ends up triggering excessive change detections. On top of that, because it depends on @angular/animations, it is prone to memory leaks (see angular/angular#54149).

These changes aim to simplify the component and make it more robust by using an svg icon and dealing with the animations using CSS.

Fixes #9758.
Fixes #9844.
Fixes #10088.
Fixes #15451.
Fixes #19441.
Fixes #10242.

@crisbeto crisbeto added the target: patch This PR is targeted for the next patch release label Nov 21, 2024
@crisbeto crisbeto requested a review from a team as a code owner November 21, 2024 10:33
@crisbeto crisbeto requested review from amysorto and mmalerba and removed request for a team November 21, 2024 10:33
@crisbeto crisbeto added the dev-app preview When applied, previews of the dev-app are deployed to Firebase label Nov 21, 2024
For a long time the sort header's animation was set up by rendering out 4 `div` elements and then arranging them to look like an arrow. This is somewhat complicated to maintain, difficult to customize, in some cases it leads to weird visual bugs and ends up triggering excessive change detections. On top of that, because it depends on `@angular/animations`, it is prone to memory leaks (see angular/angular#54149).

These changes aim to simplify the component and make it more robust by using an `svg` icon and dealing with the animations.

Fixes angular#9758.
Fixes angular#9844.
Fixes angular#10088.
Fixes angular#15451.
Fixes angular#19441.
Fixes angular#10242.
Copy link
Contributor

@amysorto amysorto left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉 this is awesome!

@crisbeto crisbeto added the action: merge The PR is ready for merge by the caretaker label Nov 27, 2024
@crisbeto crisbeto merged commit a08eeeb into angular:main Nov 27, 2024
21 of 23 checks passed
crisbeto added a commit that referenced this pull request Nov 27, 2024
For a long time the sort header's animation was set up by rendering out 4 `div` elements and then arranging them to look like an arrow. This is somewhat complicated to maintain, difficult to customize, in some cases it leads to weird visual bugs and ends up triggering excessive change detections. On top of that, because it depends on `@angular/animations`, it is prone to memory leaks (see angular/angular#54149).

These changes aim to simplify the component and make it more robust by using an `svg` icon and dealing with the animations.

Fixes #9758.
Fixes #9844.
Fixes #10088.
Fixes #15451.
Fixes #19441.
Fixes #10242.

(cherry picked from commit a08eeeb)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
action: merge The PR is ready for merge by the caretaker area: material/sort dev-app preview When applied, previews of the dev-app are deployed to Firebase target: patch This PR is targeted for the next patch release
Projects
None yet
2 participants