Add nice loader for dialogs with an iframe

skins/elastic/styles/styles.less

@@ -177,6 +177,32 @@ button, input, select, textarea {
     -webkit-user-select: none;
 }
 
+.iframe-loader {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    background-color: rgba(255, 255, 255, 0.95);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .spinner {
+        position: relative;
+        display: inline-block;
+        width: 5rem;
+        height: 5rem;
+        overflow: hidden;
+        text-indent: -999em;
+        border: .5em solid;
+        border-color: currentColor transparent currentColor currentColor;
+        border-radius: 50%;
+        animation-name: fa-spin;
+        animation-duration: 1s;
+        animation-timing-function: linear;
+        animation-iteration-count: infinite;
+    }
+}
 
 /*** Widgets ***/
 

skins/elastic/ui.js

@@ -712,6 +712,9 @@ function rcube_elastic_ui()
             }
         }
 
+        // Display loader when the dialog has an iframe
+        iframe_loader($('div.popup > iframe', me));
+
         // TODO: style buttons/forms
         bootstrap_style(dialog.uiDialog);
     };
@@ -1567,6 +1570,25 @@ function rcube_elastic_ui()
             $(obj)[state ? 'removeClass' : 'addClass']('changed');
         });
     };
+
+    /**
+     * Displays loading... overlay for iframes
+     */
+    function iframe_loader(frame)
+    {
+        frame = $(frame);
+
+        if (frame.length) {
+            var loader = $('<div>').attr('class', 'iframe-loader')
+                .append($('<div>').attr('class', 'spinner').text(rcmail.gettext('loading')));
+
+            frame.on('load error', function() {
+                    // wait some time to make sure the iframe stopped loading
+                    setTimeout(function() { loader.remove(); }, 500);
+                })
+                .parent().append(loader);
+        }
+    }
 }
 
 var UI = new rcube_elastic_ui();