Merge branch 'sprint/sunhao/apps_loading_state'

module/index/css/index.css

@@ -48,6 +48,8 @@ body.menu-hide {padding-left: 0;}
 #apps {position: fixed; left: 96px; bottom: 0; right: 0; top: 0;}
 .app-container {position: absolute; left: 0; bottom: 40px; right: 0; top: 0; background-color: #efefef;}
 .menu-hide #apps {left: 40px;}
+.app-container.loading:before {background-color: rgba(0,0,0,.1);}
+.app-container.loading:before, .app-container.loading::after {transition-delay: 1s;}
 
 #appsBar {position: fixed; left: 96px; bottom: 0; right: 0; height: 40px; z-index: 1012; background: #fff; border-top: 1px solid #eff1f7;}
 .menu-hide #appsBar {left: 40px;}

module/index/js/index.js

@@ -234,7 +234,7 @@
                     'style="width: 100%; height: 100%; left: 0px;"',
                 '/>'
             ].join(' '));
-            var $app = $('<div class="app-container" id="app-' + appCode + '"></div>')
+            var $app = $('<div class="app-container load-indicator" id="app-' + appCode + '"></div>')
                 .append($iframe)
                 .appendTo('#apps');
 
@@ -247,7 +247,7 @@
             var iframe = $iframe.get(0);
             iframe.onload = iframe.onreadystatechange = function(e)
             {
-                $app.trigger('loadapp', app);
+                $app.removeClass('loading').trigger('loadapp', app);
             };
         }
 
@@ -456,6 +456,14 @@
         }
 
         if(!notTriggerEvent) app.$app.trigger('reloadapp', app);
+
+        app.$app.addClass('loading');
+        if(app._loadTimer) clearTimeout(app._loadTimer);
+        app._loadTimer = setTimeout(function()
+        {
+            app.$app.removeClass('loading');
+            app._loadTimer = null;
+        }, 10000);
     }
 
     /**