fix(progressCircular): rAF is still running when using ng-show or ng-hide

[feichao]

fix(progressCircular): requestAnimationFrame is still running when using ng-show or ng-hide #10668

[googlebot]

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

📝 Please visit https://cla.developers.google.com/ to sign.

Once you've signed, please reply here (e.g. I signed it!) and we'll verify. Thanks.

---

• If you've already signed a CLA, it's possible we don't have your GitHub username or you're using a different email address. Check your existing CLA data and verify that your email is set on your git commits.
• If your company signed a CLA, they designated a Point of Contact who decides which employees are authorized to participate. You may need to contact the Point of Contact for your company and ask to be added to the group of authorized contributors. If you don't know who your Point of Contact is, direct the project maintainer to go/cla#troubleshoot.
• In order to pass this check, please resolve this problem and have the pull request author add another comment and the bot will run again.

[feichao]

I signed it!

[googlebot]

CLAs look good, thanks!

[ThomasBurleson]

@feichao - lgtm, thx.

[clshortfuse]

Looks rather expensive to evaluate DOM attributes on every Angular tick. MutationObserver would give better performance.

Also, using ng-if instead of ng-show would solve the underlying issue, so a recommendation could be added in the documentation. Another alternative would be to only use the watcher if ng-show or ng-hide are being used.

[Splaktar]

@clshortfuse any ideas on how to use the watcher only when ng-show or ng-hide are being used?

@feichao can you please add some tests for this?
For example: Verify that the md-mode-indeterminate is applied after the element is displayed via toggling ng-show and verify that the md-mode-indeterminate is removed after the element is hidden via toggling ng-hide.

[clshortfuse]

@Splaktar Sure, you can use a MutationObserver to watch for the ng-show or ng-hide class. If the value exists then a watcher should be created to handle its computed value.

You can see a similar implementation created with md-visible with md-tooltip in #7822

[Splaktar]

@feichao Thank you very much for your contribution! Can you please update your implementation to only apply the watcher when ng-show or ng-hide are present as described in #10745 (comment)?

Since this whole PR is about performance, it would be best to use this more optimally performing approach.

[Splaktar]

We'll need to make sure that the MutationObserver has a fallback since we'll need to do something else on IE10.