Components: mat-progress-bar Indeterminate mode bad animation when long process is made

[roelzkie15]

Bug, feature request, or proposal:

Bug?

What is the expected behavior?

Smooth animation flow of progressbar despite long process.

What is the current behavior?

Progressbar animation is stretching in the same particular place and not moving.

What are the steps to reproduce?

Just simply add a for loop process with max 100k items iteration.

Demo and Editor link

What is the use-case or motivation for changing an existing behavior?

Better UI experience.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular v5.2.4
Material v5.2.1
Windows 10 64 bit
Typescript 2.4.2
Chrome Version 64.0.3282.167

Is there anything else we should know?

Nothing else

[josephperrott]

Unfortunately, because of javascript's single threadedness, there is not anything we can do to prevent the animation from being affected by other things running in the UI thread.

To prevent this kind of issue from appearing, you will need to split you long running tasks into something asycronous, or use something akin to service workers to move the processing outside of the single UI thread.

[AskYous]

I'm having this problem too. When my data comes in from a web service, I have to process it which then causes this issue.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}