Merge pull request #4087 from Icinga/feature/redesign-container-loading-effect

Redesign container loading effects

public/css/icinga/base.less

@@ -188,13 +188,35 @@ td, th {
           transition: none !important;
 }
 
-// Styles for when containers are loading. JS will remove this once the containers are ready
-.impact {
-    .transition(background-color 2s 1s linear !important);
-    background-color: @gray-lighter !important;
-}
+.container {
+  &:before {
+    content: "";
+    display: block;
 
-.impact > .controls, .impact li.active a {
-    .transition(background-color 2s 1s linear !important);
-    background-color: @gray-lighter !important;
+    background: @body-bg-color url(/img/icinga-loader.gif) no-repeat center center;
+    background-size: 4em 4em;
+
+    opacity: 0;
+    z-index: -10;
+    pointer-events: none;
+    .transition(none);
+  }
+
+  &.impact {
+    overflow: hidden;
+    position: relative;
+  }
+
+  &.impact:before {
+    position: absolute;
+    top: 2.5em;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    opacity: .7;
+    z-index: 10;
+    pointer-events: all;
+    .transition(opacity 1s 2s linear);
+  }
 }

public/js/icinga/loader.js

@@ -299,7 +299,11 @@
                 this.requests[id] = req;
             }
             if (! autorefresh) {
-                req.$target.addClass('impact');
+                setTimeout(function () {
+                    // The column may have not been shown before. To make the transition
+                    // delay working we have to wait for the column getting rendered
+                    req.$target.addClass('impact');
+                }, 0);
             }
             this.icinga.ui.refreshDebug();
             return req;