CODEWITHSUNDEEP
angularangular-material
Stavm
Stavm

Reputation: 8131

MatProgressBar - How to avoid staggering animation when update rate is high

I'm using Angular material MatProgressBar component.

I'm facing a problem with determinate mode. when the update interval for the value is lower than 250msec i'm getting animation staggers.

Stackblitz example

Component.ts

export class ProgressBarDeterminateExample implements OnInit {
  progressA = 0;
  progressB = 0;

  ngOnInit() {
    const VALID_UPDATE_RATE_IN_MSEC = 250;
    const INVALID_UPDATE_RATE_IN_MSEC = 100;

    interval(VALID_UPDATE_RATE_IN_MSEC).subscribe(val => this.progressA = val)
    interval(INVALID_UPDATE_RATE_IN_MSEC).subscribe(val => this.progressB = val)
  }
}

Component.HTML

<!-- at 250sec update rate - all valid -->
<mat-progress-bar mode="determinate" [value]="progressA"></mat-progress-bar>

<!-- under 250sec update rate - staggering animation -->
<mat-progress-bar mode="determinate" [value]="progressB" color="warn"></mat-progress-bar>

I am well aware the main issue lies somewhere around the transition-duration of the bar element but can't quite put my finger where exactly.

Losing events is not an option so rxjs's throttleTime(250) or so won't solve it.

EDIT: I could not find a CSS way to fully work this issue out, so went with @observingstream's suggestion to separate event handling logic.

so instead of:

interval.subscribe(v => // event handling)

I separated logic to two handlers:

interval(INVALID_UPDATE_RATE_IN_MSEC)
  .pipe(
    // business logic with event
    tap(val => console.log(val) ),
    // throttle for animation
    throttleTime(250),
    // animation logic
    tap(val => this.progressB++)
  )
  .subscribe()

Solution Stackblitz example

Upvotes: 1

Views: 2209

Answers (1)

observingstream
observingstream

Reputation: 466

You can edit the css for the animation by using :host ::ng-deep to change which transition. If you change it to the following, it appears to work.

:host ::ng-deep {
  .updating-animation.mat-progress-bar .mat-progress-bar-fill {
    transition: transform 100ms linear;
  }
}

That being said, if you have that many updates coming in, it would be good to throttle them in some way and fill the gap with the animation.

See https://stackblitz.com/angular/yojaylpekgn?file=app%2Fprogress-bar-configurable-example.ts

Upvotes: 2

Related Questions