From abaa3e6f82e5687340821bc970c6f5398652d8f9 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Fri, 18 Dec 2020 15:16:07 +0100
Subject: [PATCH] fix(material-experimental/mdc-spinner): indeterminate
 animation not working

Seems like a regression from #21359. We can't use `:not` to apply the animation
styles, because MDC's mixins target `.mdc-progress-spinner`, rather than `&`.

These changes use the same manual approach as other components to disable
the animations.
---
 .../progress-spinner.scss                     | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/material-experimental/mdc-progress-spinner/progress-spinner.scss b/src/material-experimental/mdc-progress-spinner/progress-spinner.scss
index 580735bccd1c..27748a36dcd5 100644
--- a/src/material-experimental/mdc-progress-spinner/progress-spinner.scss
+++ b/src/material-experimental/mdc-progress-spinner/progress-spinner.scss
@@ -1,18 +1,28 @@
 @import '@material/circular-progress/mixins.import';
 @import '../mdc-helpers/mdc-helpers';
 
-@include mdc-circular-progress-core-styles($query: $mat-base-styles-without-animation-query);
+@include mdc-circular-progress-core-styles($query: $mat-base-styles-query);
 
 .mat-mdc-progress-spinner {
   // Prevents the spinning of the inner element from affecting layout outside of the spinner.
   overflow: hidden;
-}
 
-.mat-mdc-progress-spinner:not(._mat-animation-noopable) {
-  @include mdc-circular-progress-core-styles($query: animation);
-}
+  &._mat-animation-noopable {
+    &, .mdc-circular-progress__determinate-circle {
+      // The spinner itself has a transition on `opacity`.
+      transition: none;
+    }
+
+    .mdc-circular-progress__indeterminate-circle-graphic,
+    .mdc-circular-progress__spinner-layer,
+    .mdc-circular-progress__indeterminate-container {
+      // Disables the rotation animations.
+      animation: none;
+    }
 
-// Render the indeterminate spinner as a complete circle when animations are off
-._mat-animation-noopable .mdc-circular-progress__indeterminate-container circle {
-  stroke-dasharray: 0 !important;
+    .mdc-circular-progress__indeterminate-container circle {
+      // Render the indeterminate spinner as a complete circle when animations are off
+      stroke-dasharray: 0 !important;
+    }
+  }
 }