Skip to content

fix(material/sort): simplify animations - #30057

Merged
crisbeto merged 1 commit into
angular:mainfrom
crisbeto:sort-animation-rework
Nov 27, 2024
Merged

fix(material/sort): simplify animations#30057
crisbeto merged 1 commit into
angular:mainfrom
crisbeto:sort-animation-rework

Conversation

@crisbeto

@crisbetocrisbeto commented Nov 21, 2024

Copy link
Copy Markdown
Member

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#7291.
Fixes#9758.
Fixes#9844.
Fixes#10088.
Fixes#15451.
Fixes#19441.
Fixes#10242.

@crisbetocrisbeto 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 ownerNovember 21, 2024 10:33
@crisbeto
crisbeto requested review from amysorto and mmalerba and removed request for a teamNovember 21, 2024 10:33
@crisbetocrisbeto 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.
Fixesangular#9758.
Fixesangular#9844.
Fixesangular#10088.
Fixesangular#15451.
Fixesangular#19441.
Fixesangular#10242.
@crisbeto
crisbetoforce-pushed the sort-animation-rework branch from 6fad88d to 775c7ceCompareNovember 21, 2024 12:11

@amysortoamysorto left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🎉 this is awesome!

@crisbetocrisbeto added the action: merge The PR is ready for merge by the caretaker label Nov 27, 2024
@crisbeto
crisbeto merged commit a08eeeb into angular:mainNov 27, 2024
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)
@angular-automatic-lock-bot

Copy link
Copy Markdown

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.

@angular-automatic-lock-botangular-automatic-lock-botBot locked and limited conversation to collaborators Jan 2, 2025
Sign up for freeto subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

action: mergeThe PR is ready for merge by the caretakerarea: material/sortdev-app previewWhen applied, previews of the dev-app are deployed to Firebasetarget: patchThis PR is targeted for the next patch release

Projects

None yet

2 participants

@crisbeto@amysorto