Skip to content

fix(core): deferred blocks not removing content immediately when animations are enabled#51971

Closed
crisbeto wants to merge 1 commit intoangular:mainfrom
crisbeto:51970/defer-animations
Closed

fix(core): deferred blocks not removing content immediately when animations are enabled#51971
crisbeto wants to merge 1 commit intoangular:mainfrom
crisbeto:51970/defer-animations

Conversation

@crisbeto
Copy link
Member

@crisbeto crisbeto commented Oct 1, 2023

Fixes an issue where if animations are enabled, deferred blocks don't remove their placeholder blocks immediately from the DOM. The problem is that we register the event handlers in afterRender which runs outside the zone, but the logic that removes the DOM nodes during animations is tied to change detection.

These changes resolve the issue by binding the listeners inside the zone. This was the intention from the beginning, I just forgot that afterRender runs outside the zone.

Fixes #51970.

@crisbeto crisbeto added action: review The PR is still awaiting reviews from at least one requested reviewer area: core Issues related to the framework runtime target: major This PR is targeted for the next major release core: defer Issues related to @defer blocks. labels Oct 1, 2023
@crisbeto crisbeto requested a review from AndrewKushnir October 1, 2023 20:20
@ngbot ngbot bot added this to the Backlog milestone Oct 1, 2023
@crisbeto crisbeto force-pushed the 51970/defer-animations branch from 5499c15 to 8bc3395 Compare October 1, 2023 20:20
Copy link
Member Author

Choose a reason for hiding this comment

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

Note that I was having a hard time capturing this behavior in a unit test, because the testing APIs would trigger change detection which would flush the animations.

Copy link
Contributor

Choose a reason for hiding this comment

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

Thanks for the comment, I haven't seen it while leaving a review comment (#51971 (review)). May be we can have a test to make sure that we run event handlers inside NgZone?

Copy link
Member Author

Choose a reason for hiding this comment

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

Hmm, I don't know if we can observe the internal event handlers without introducing another DI token. I ended up adding a dev mode assertion that it's in the NgZone which should give us the same result.

Copy link
Contributor

Choose a reason for hiding this comment

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

I ended up adding a dev mode assertion that it's in the NgZone which should give us the same result.

That's a great idea!

Copy link
Member Author

Choose a reason for hiding this comment

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

It looks like the assertion isn't super reliable since Zone.js doesn't seem to patch addEventListener in the same way in Node and in the browser so we were getting different test results. I reworked it to spy on addEventListener and check that it's called within the zone instead.

Copy link
Contributor

@AndrewKushnir AndrewKushnir left a comment

Choose a reason for hiding this comment

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

@crisbeto thanks for the fix 👍

Just left a comment and I was also wondering if we can add a new test (or modify one of the existing one) to reproduce an original issue with animations?

@crisbeto crisbeto force-pushed the 51970/defer-animations branch from 8bc3395 to 58d6c27 Compare October 1, 2023 20:36
…ations are enabled

Fixes an issue where if animations are enabled, deferred blocks don't remove their placeholder blocks immediately from the DOM. The problem is that we register the event handlers in `afterRender` which runs outside the zone, but the logic that removes the DOM nodes during animations is tied to change detection.

These changes resolve the issue by binding the listeners inside the zone. This was the intention from the beginning, I just forgot that `afterRender` runs outside the zone.

Fixes angular#51970.
@crisbeto crisbeto force-pushed the 51970/defer-animations branch from 58d6c27 to 57634f6 Compare October 1, 2023 21:38
template: 'Primary block content.',
})
class NestedCmp {
@Input() block!: string;
Copy link
Member Author

Choose a reason for hiding this comment

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

This is unrelated, I just noticed that it was logging a warning.

@crisbeto crisbeto added action: merge The PR is ready for merge by the caretaker and removed action: review The PR is still awaiting reviews from at least one requested reviewer labels Oct 2, 2023
@alxhub
Copy link
Member

alxhub commented Oct 2, 2023

This PR was merged into the repository by commit 4f69d62.

@alxhub alxhub closed this in 4f69d62 Oct 2, 2023
@angular-automatic-lock-bot
Copy link

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-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Nov 2, 2023
ChellappanRajan pushed a commit to ChellappanRajan/angular that referenced this pull request Jan 23, 2024
…ations are enabled (angular#51971)

Fixes an issue where if animations are enabled, deferred blocks don't remove their placeholder blocks immediately from the DOM. The problem is that we register the event handlers in `afterRender` which runs outside the zone, but the logic that removes the DOM nodes during animations is tied to change detection.

These changes resolve the issue by binding the listeners inside the zone. This was the intention from the beginning, I just forgot that `afterRender` runs outside the zone.

Fixes angular#51970.

PR Close angular#51971
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

action: merge The PR is ready for merge by the caretaker area: core Issues related to the framework runtime core: defer Issues related to @defer blocks. target: major This PR is targeted for the next major release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

@defer: placeholder and loading blocks are not removed by BaseAnimationRenderer (TransitionAnimationEngine)

3 participants

Comments