From 383d5527bb4559e52a7de7756829d8f2483ecdcb Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 14 Jun 2018 13:48:51 +0200
Subject: [PATCH] fixes slow UI by restricting angular animations to only work
 on elements with the umb-animated css class

---
 src/Umbraco.Web.UI.Client/src/app.js                 | 12 ++++++++++++
 .../components/overlays/umb-overlay-backdrop.html    |  2 +-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/Umbraco.Web.UI.Client/src/app.js b/src/Umbraco.Web.UI.Client/src/app.js
index 97096c9733..6a6555198a 100644
--- a/src/Umbraco.Web.UI.Client/src/app.js
+++ b/src/Umbraco.Web.UI.Client/src/app.js
@@ -16,6 +16,18 @@ var app = angular.module('umbraco', [
     'LocalStorageModule'
 ]);
 
+// I configure the $animate service during bootstrap.
+angular.module("umbraco").config(
+    function configureAnimate( $animateProvider ) {
+        // By default, the $animate service will check for animation styling
+        // on every structural change. This requires a lot of animateFrame-based
+        // DOM-inspection. However, we can tell $animate to only check for
+        // animations on elements that have a specific class name RegExp pattern
+        // present. In this case, we are requiring the "umb-animated" class.
+        $animateProvider.classNameFilter( /\bumb-animated\b/ );
+    }
+);
+
 var packages = angular.module("umbraco.packages", []);
 
 //this ensures we can inject our own views into templateCache and clear
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/overlays/umb-overlay-backdrop.html b/src/Umbraco.Web.UI.Client/src/views/components/overlays/umb-overlay-backdrop.html
index dd94f8627c..170ae605f4 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/overlays/umb-overlay-backdrop.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/overlays/umb-overlay-backdrop.html
@@ -1 +1 @@
-<div class="umb-overlay-backdrop animate" ng-if="numberOfOverlays > 0"></div>
+<div class="umb-overlay-backdrop animate umb-animated" ng-if="numberOfOverlays > 0"></div>