Progress bar/spinner animations with NoopAnimationsModule

[bennyboer]

What is the expected behavior?

I expect progress bar and spinner animations to still work even when the NoopAnimationsModule is imported.

What is the current behavior?

Animations are commonly disabled using the NoopAnimationsModule in order to gain additional performance especially on mobile devices. Still progress spinners (indeterminate) and bars do not make sense without animation. As mentioned under the pull request which disabled the animations, it might make sense to import the NoopAnimationsModule for e2e and screenshot tests. But wouldn't it make sense to rather introduce a hidden switch for that especially for those tests instead of turning off animations completely?

What are the steps to reproduce?

Use mat-spinner with NoopAnimationsModule imported.

See StackBlitz example

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

Angular & Angular Material 7

[maic333]

You can use the injection token MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS, providing it with different configuration in the module where you need it (or globally in AppModule), e.g.:

import { MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS } from '@angular/material';

@NgModule({
    ...
    providers: [
        {
            provide: MAT_PROGRESS_SPINNER_DEFAULT_OPTIONS,
            useValue: {
                _forceAnimations: true
            }
        }
    ],
    ...
})
export class AppModule {
}

Check the docs for all the available configuration params: https://material.angular.io/components/progress-spinner/api#interfaces

[bennyboer]

@maic333 Yes, that's the solution I am currently using, though it is unavailable for progress bars.

[vinod-amt]

@maic333 Yes, that's the solution I am currently using, though it is unavailable for progress bars.

yes, not available for progress bars. any work around?

[alperozhan]

actually @maic333's solution works with @angular/material 11.0.0 in my case.

[k290]

This would be a useful fix as we use NoopAnimations to disable animations only in some places in our software