Add a simple loading indicator for titlePane and contentPane widgets.

cmv · Dec 4, 2016 · 2837cdb · 2837cdb
1 parent ec10204
commit 2837cdb
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 0 deletions.
diff --git a/viewer/css/main.css b/viewer/css/main.css
@@ -210,6 +210,16 @@ body, html {
 #help_parent_underlay {
     display: block;
 }
+.widgetLoader {
+    color: #333;
+    display: block;
+    font-size: 18px;
+    left: 0;
+    margin: 4px;
+    text-align: center;
+    top: 0;
+    width:  100%;
+}
 
 /*
     media queries bootstrap style

diff --git a/viewer/js/viewer/_WidgetsMixin.js b/viewer/js/viewer/_WidgetsMixin.js
@@ -112,6 +112,7 @@ define([
                     pnl = this._createFloatingWidget(parentId, widgetConfig);
                 }
                 widgetConfig.parentWidget = pnl;
+                this._showWidgetLoader(pnl);
             }
 
             // 2 ways to use require to accommodate widgets that may have an optional separate configuration file
@@ -145,6 +146,7 @@ define([
             if (widgets[key] && widgets[key].startup && !widgets[key]._started) {
                 widgets[key].startup();
             }
+            this._hideWidgetLoader(pnl);
         },
 
         _setWidgetOptions: function (widgetConfig, options) {
@@ -186,6 +188,20 @@ define([
             return options;
         },
 
+        _showWidgetLoader: function (pnl) {
+            if (pnl && pnl.containerNode) {
+                pnl.loadingNode = put(pnl.containerNode, 'div.widgetLoader i.fa.fa-spinner.fa-pulse.fa-fw').parentNode;
+            }
+        },
+
+        _hideWidgetLoader: function (pnl) {
+            if (pnl && pnl.loadingNode) {
+                require(['dojo/domReady!'], function () {
+                    put(pnl.loadingNode, '!');
+                });
+            }
+        },
+
         _createTitlePaneWidget: function (parentId, widgetConfig) {
             var tp,
                 options = lang.mixin({