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,12 +42,19 @@ 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;
 
   /** The id of the indeterminate interval. */
   private _interdeterminateInterval: number;
+  get interdeterminateInterval() {
+    return this._interdeterminateInterval;
+  }
+  set interdeterminateInterval(interval: number) {
+    clearInterval(this._interdeterminateInterval);
+    this._interdeterminateInterval = interval;
+  }
 
   /** The current path value, representing the progres circle. */
   private _currentPath: string;
@@ -60,6 +68,11 @@ export class MdProgressCircle {
     this._changeDetectorRef.markForCheck();
   }
 
+  /** Clean up any animations that were running. */
+  ngOnDestroy() {
+    this._cleanupIndeterminateAnimation();
+  }
+
   /**
    * Value of the progress circle.
    *
@@ -160,10 +173,11 @@ export class MdProgressCircle {
       let temp = start;
       start = -end;
       end = -temp;
+      console.log(end);
     };
 
-    if (!this._interdeterminateInterval) {
-      this._interdeterminateInterval = setInterval(
+    if (!this.interdeterminateInterval) {
+      this.interdeterminateInterval = setInterval(
         animate, duration + 50, 0, false);
       animate();
     }
@@ -174,10 +188,7 @@ export class MdProgressCircle {
    * Removes interval, ending the animation.
    */
   private _cleanupIndeterminateAnimation() {
-    if (this._interdeterminateInterval) {
-      clearInterval(this._interdeterminateInterval);
-      this._interdeterminateInterval = null;
-    }
+    this.interdeterminateInterval = null;
   }
 }
 
@@ -219,7 +230,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();