perf(progress-circle): clean up animation on destroy

The indeterminate animation is based on an interval that keeps running, even after the element has been destroyed.
This change cleans up when the element is destroyed.

Also adds an extra null check for `performance.now`.

Author: crisbeto

src/components/progress-circle/progress-circle.spec.ts

@@ -74,6 +74,22 @@ describe('MdProgressCircular', () => {
         done();
       });
   });
+
+  it('should clean up the indeterminate animation when the element is destroyed', (done: () => void) => {
+      builder
+        .overrideTemplate(TestApp, '<md-progress-circle mode="indeterminate" *ngIf="!isHidden"></md-progress-circle>')
+        .createAsync(TestApp)
+        .then((fixture) => {
+          fixture.detectChanges();
+          let progressElement = getChildDebugElement(fixture.debugElement, 'md-progress-circle');
+          expect(progressElement.componentInstance._interdeterminateInterval).toBeTruthy();
+
+          fixture.debugElement.componentInstance.isHidden = true;
+          fixture.detectChanges();
+          expect(progressElement.componentInstance._interdeterminateInterval).toBeFalsy();
+          done();
+        });
+    });
 });
 
 

src/components/progress-circle/progress-circle.ts

@@ -3,6 +3,7 @@ import {
   HostBinding,
   ChangeDetectorRef,
   ChangeDetectionStrategy,
+  OnDestroy,
   Input
 } from '@angular/core';
 
@@ -41,7 +42,7 @@ type EasingFn = (currentTime: number, startValue: number,
   styleUrls: ['progress-circle.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MdProgressCircle {
+export class MdProgressCircle implements OnDestroy {
   /** The id of the last requested animation. */
   private _lastAnimationId: number = 0;
 
@@ -60,6 +61,11 @@ export class MdProgressCircle {
     this._changeDetectorRef.markForCheck();
   }
 
+  /** Clean up any animations that were running. */
+  ngOnDestroy() {
+    this._cleanupIndeterminateAnimation();
+  }
+
   /**
    * Value of the progress circle.
    *
@@ -219,7 +225,7 @@ function clamp(v: number) {
  * Returns the current timestamp either based on the performance global or a date object.
  */
 function now() {
-  if (typeof performance !== 'undefined') {
+  if (typeof performance !== 'undefined' && performance.now) {
     return performance.now();
   }
   return Date.now();