From ed80087f734d3e4ea71c33415da5ec9b4f9319e8 Mon Sep 17 00:00:00 2001
From: feichao <len.may@foxmail.com>
Date: Fri, 16 Jun 2017 19:39:28 +0800
Subject: [PATCH] fix(progressCircular): requestAnimationFrame is still running
 when using ng-show or ng-hide

---
 .../js/progressCircularDirective.js             | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/components/progressCircular/js/progressCircularDirective.js b/src/components/progressCircular/js/progressCircularDirective.js
index 5134bdd9017..64f4e220ba9 100644
--- a/src/components/progressCircular/js/progressCircularDirective.js
+++ b/src/components/progressCircular/js/progressCircularDirective.js
@@ -211,6 +211,23 @@ function MdProgressCircularDirective($window, $mdProgressCircular, $mdTheming,
 
     });
 
+    
+    // When using ng-show or ng-hide, 
+    // the animation won't stop because requestAnimationFrame is still running.
+    // Do this to stop requestAnimationFrame can save some usage of system resources.
+    scope.$watch(function() {
+      var style = $window.getComputedStyle(node);
+      return style && style.display;
+    }, function(newValue, oldValue) {
+      if(newValue && newValue !== oldValue) {
+        if(newValue === 'none') {
+          cleanupIndeterminateAnimation();
+        } else {
+          startIndeterminateAnimation();
+        }
+      }
+    });
+
     function renderCircle(animateFrom, animateTo, easing, duration, iterationCount, maxValue) {
       var id = ++lastAnimationId;
       var startTime = $mdUtil.now();