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.

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.
    *