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(scrolling): viewport ruler events being run inside zone #15814

Merged
merged 1 commit into from
Jul 21, 2020

Conversation

crisbeto
Copy link
Member

@crisbeto crisbeto commented Apr 14, 2019

Fixes the resize and orientationchange events of the ViewportRuler being run inside the NgZone, if the subscription comes from inside the zone.

Fixes #18471.

@crisbeto crisbeto added the target: patch This PR is targeted for the next patch release label Apr 14, 2019
@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Apr 14, 2019
Copy link
Member

@jelbourn jelbourn left a comment

Choose a reason for hiding this comment

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

LGTM

@jelbourn jelbourn added pr: lgtm action: merge The PR is ready for merge by the caretaker labels Sep 5, 2019
@crisbeto crisbeto added the P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent label Oct 27, 2019
@crisbeto
Copy link
Member Author

Bumping to a P2 since we got a report about this potentially affecting perf.

@crisbeto crisbeto added P2 The issue is important to a large percentage of users, with a workaround and removed P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent labels Feb 12, 2020
Comment on lines 40 to 62
this._change = _platform.isBrowser ?
merge(fromEvent(window, 'resize'), fromEvent(window, 'orientationchange')) :
observableOf();

// Note that we need to do the subscription inside `runOutsideAngular`
// since subscribing is what causes the event listener to be added.
this._invalidateCache = this.change().subscribe(() => this._updateViewportSize());
if (_platform.isBrowser) {
// Note that bind the events ourselves, rather than going through something like RxJS's
// `fromEvent` so that we can ensure that they're bound outside of the NgZone.
window.addEventListener('resize', this._changeListener);
window.addEventListener('orientationchange', this._changeListener);
}

// We don't need to keep track of the subscription,
// because we complete the `change` stream on destroy.
this.change().subscribe(() => this._updateViewportSize());
Copy link
Contributor

Choose a reason for hiding this comment

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

Here I would change a little bit the piece code, I would do something like:

    this._change = _platform.isBrowser ?
      merge(fromEvent(window, 'resize'), fromEvent(window, 'orientationchange'))
        .pipe(runOutsideZone(ngZone)) :
      observableOf();

where:

/** Runs this observable outside the zone */
function runOutsideZone<T>(zone: NgZone): any {
  return (source: Observable<T>): Observable<T> => {
      return new Observable(observer => {
          return zone.runOutsideAngular<Subscription>(() => source.subscribe(observer));
      });
  };
}

Seems cleaner and more understandable IMO, also is less code.

@llorenspujol
Copy link
Contributor

Is there any blocking issue that causes this MR to not be merged? Just for know.

I also miss the 'zone re-entering' of the subscriptions that need it. For example the select component & the paginated-tab-header.

Here I have a proposal MR (same of this one, I actually copy the tests, thanks @crisbeto) where I do this 'zone re-enterings':

https://github.com/angular/components/pull/18548/files

@jelbourn jelbourn added this to PRs in P2 PRs Jul 9, 2020
@andrewseguin andrewseguin moved this from PRs to In Progress in P2 PRs Jul 17, 2020
Fixes the `resize` and `orientationchange` events of the `ViewportRuler` being run inside the `NgZone`, if the subscription comes from inside the zone.

Fixes angular#18471.
@wagnermaciel wagnermaciel merged commit ea9293d into angular:master Jul 21, 2020
P2 PRs automation moved this from In Progress to Done Jul 21, 2020
wagnermaciel pushed a commit that referenced this pull request Jul 21, 2020
Fixes the `resize` and `orientationchange` events of the `ViewportRuler` being run inside the `NgZone`, if the subscription comes from inside the zone.

Fixes #18471.

(cherry picked from commit ea9293d)
@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 Aug 21, 2020
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 cla: yes PR author has agreed to Google's Contributor License Agreement P2 The issue is important to a large percentage of users, with a workaround target: patch This PR is targeted for the next patch release
Projects
P2 PRs
  
Done
Development

Successfully merging this pull request may close these issues.

mat-drawer-container triggers angular detection cycles on window:resize
7 participants