Skip to content

Commit c7a6abf

Browse files
committed
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`.
1 parent b24d321 commit c7a6abf

File tree

2 files changed

+35
-8
lines changed

2 files changed

+35
-8
lines changed

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,22 @@ describe('MdProgressCircular', () => {
7474
done();
7575
});
7676
});
77+
78+
it('should clean up the indeterminate animation when the element is destroyed', (done: () => void) => {
79+
builder
80+
.overrideTemplate(TestApp, '<md-progress-circle mode="indeterminate" *ngIf="!isHidden"></md-progress-circle>')
81+
.createAsync(TestApp)
82+
.then((fixture) => {
83+
fixture.detectChanges();
84+
let progressElement = getChildDebugElement(fixture.debugElement, 'md-progress-circle');
85+
expect(progressElement.componentInstance.interdeterminateInterval).toBeTruthy();
86+
87+
fixture.debugElement.componentInstance.isHidden = true;
88+
fixture.detectChanges();
89+
expect(progressElement.componentInstance.interdeterminateInterval).toBeFalsy();
90+
done();
91+
});
92+
});
7793
});
7894

7995

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

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {
33
HostBinding,
44
ChangeDetectorRef,
55
ChangeDetectionStrategy,
6+
OnDestroy,
67
Input
78
} from '@angular/core';
89

@@ -41,12 +42,19 @@ type EasingFn = (currentTime: number, startValue: number,
4142
styleUrls: ['progress-circle.css'],
4243
changeDetection: ChangeDetectionStrategy.OnPush,
4344
})
44-
export class MdProgressCircle {
45+
export class MdProgressCircle implements OnDestroy {
4546
/** The id of the last requested animation. */
4647
private _lastAnimationId: number = 0;
4748

4849
/** The id of the indeterminate interval. */
4950
private _interdeterminateInterval: number;
51+
get interdeterminateInterval() {
52+
return this._interdeterminateInterval;
53+
}
54+
set interdeterminateInterval(interval: number) {
55+
clearInterval(this._interdeterminateInterval);
56+
this._interdeterminateInterval = interval;
57+
}
5058

5159
/** The current path value, representing the progres circle. */
5260
private _currentPath: string;
@@ -60,6 +68,11 @@ export class MdProgressCircle {
6068
this._changeDetectorRef.markForCheck();
6169
}
6270

71+
/** Clean up any animations that were running. */
72+
ngOnDestroy() {
73+
this._cleanupIndeterminateAnimation();
74+
}
75+
6376
/**
6477
* Value of the progress circle.
6578
*
@@ -160,10 +173,11 @@ export class MdProgressCircle {
160173
let temp = start;
161174
start = -end;
162175
end = -temp;
176+
console.log(end);
163177
};
164178

165-
if (!this._interdeterminateInterval) {
166-
this._interdeterminateInterval = setInterval(
179+
if (!this.interdeterminateInterval) {
180+
this.interdeterminateInterval = setInterval(
167181
animate, duration + 50, 0, false);
168182
animate();
169183
}
@@ -174,10 +188,7 @@ export class MdProgressCircle {
174188
* Removes interval, ending the animation.
175189
*/
176190
private _cleanupIndeterminateAnimation() {
177-
if (this._interdeterminateInterval) {
178-
clearInterval(this._interdeterminateInterval);
179-
this._interdeterminateInterval = null;
180-
}
191+
this.interdeterminateInterval = null;
181192
}
182193
}
183194

@@ -219,7 +230,7 @@ function clamp(v: number) {
219230
* Returns the current timestamp either based on the performance global or a date object.
220231
*/
221232
function now() {
222-
if (typeof performance !== 'undefined') {
233+
if (typeof performance !== 'undefined' && performance.now) {
223234
return performance.now();
224235
}
225236
return Date.now();

0 commit comments

Comments
 (0)