Return a Deferred object when tab is browsing, and use it do show & hide a loader div while loading an app for the first time.

phpgwapi/js/framework/fw_base.js

@@ -152,6 +152,8 @@ var fw_base =  Class.extend({
 	 * @param {bool} _hidden specifies, whether the application should be set active
 	 *   after opening the tab
 	 * @param {int} _pos
+	 *
+	 * @return {Deferred|null} Deferred Promise, will be resolved when the tab is loaded
 	 */
 	applicationTabNavigate: function(_app, _url, _hidden, _pos)
 	{
@@ -162,6 +164,9 @@ var fw_base =  Class.extend({
 		//Create the tab for that application
 		this.createApplicationTab(_app, _pos);
 
+		// Response
+		var deferred = new jQuery.Deferred();
+
 		if (typeof _url == 'undefined' || _url == null)
 		{
 			_url = _app.indexUrl;
@@ -178,7 +183,8 @@ var fw_base =  Class.extend({
 			{
 				this.setActiveApp(_app);
 			}
-			return;
+			deferred.resolve();
+			return deferred.promise();
 		}
 
 		if (_app.browser == null)
@@ -191,13 +197,15 @@ var fw_base =  Class.extend({
 
 		if (typeof _hidden == 'undefined' || !_hidden)
 		{
-			_app.browser.browse(_url);
+			deferred = _app.browser.browse(_url);
 			this.setActiveApp(_app);
 		}
 		else
 		{
-			this.notifyTabChange();
+			this.notifyTabChange(deferred);
 		}
+
+		return deferred.promise();
 	},
 
 	/**
@@ -348,9 +356,11 @@ var fw_base =  Class.extend({
 		}
 	},
 	/**
+	 * Notify a tab that it was changed, update preferences
 	 *
+	 * @param {Deferred} deferred Someone is listening, and wants to know when done.
 	 */
-	notifyTabChange: function()
+	notifyTabChange: function(deferred)
 	{
 		// Call the "resize" function of the currently active app
 		if (this.activeApp)
@@ -373,6 +383,10 @@ var fw_base =  Class.extend({
 					{
 						window.focus();
 					}
+					if(deferred)
+					{
+						deferred.resolve();
+					}
 				}, 100);
 			}
 		}
@@ -722,7 +736,7 @@ var fw_base =  Class.extend({
 				this.tabsUi.showTab(_app.tab);
 
 				//Going to a new tab changes the tab state
-				this.notifyTabChange(_app.tab);
+				this.notifyTabChange();
 			}
 		}
 	},

phpgwapi/js/framework/fw_browser.js

@@ -36,6 +36,8 @@ var fw_browser =  Class.extend({
 		this.heightCallback = _heightCallback;
 		this.app = _app;
 		this.currentLocation = '';
+		this.ajaxLoaderDiv = null;
+		this.loadingDeferred = null;
 	},
 	
 	/**
@@ -88,7 +90,10 @@ var fw_browser =  Class.extend({
 			$j(this.baseDiv).empty();
 			this.iframe = null;
 			this.contentDiv = null;
-			this.ajaxLoaderDiv = null;
+			if(this.loadingDeferred && this.type)
+			{
+				this.loadingDeferred.reject();
+			}
 
 			switch (_type)
 			{
@@ -121,6 +126,7 @@ var fw_browser =  Class.extend({
 	/**
 	 * Sets url to browse and load the content in proper content browser
 	 * @param {string} _url
+	 * @return {Deferred} Returns a Deferred promise object
 	 */
 	browse: function(_url)
 	{
@@ -139,6 +145,24 @@ var fw_browser =  Class.extend({
 		}
 		var useIframe = true;
 		var targetUrl = _url;
+		if(_url == this.currentLocation && this.loadingDeferred != null)
+		{
+			// Still loading
+			return this.loadingDeferred.promise();
+		}
+
+		// Show loader div, start blocking
+		var self = this;
+		this.ajaxLoaderDiv = jQuery('<div class="loading ui-widget-overlay ui-front">'+egw.lang('please wait...')+'</div>').insertBefore(this.baseDiv);
+		this.loadingDeferred = new jQuery.Deferred();
+		this.loadingDeferred.always(function() {
+			if(self.ajaxLoaderDiv)
+			{
+				self.ajaxLoaderDiv.hide().remove();
+				self.ajaxLoaderDiv = null;
+			}
+			self.loadingDeferred = null;
+		});
 
 		// Check whether the given url is a pseudo url which should be executed
 		// by calling the ajax_exec function
@@ -204,7 +228,6 @@ var fw_browser =  Class.extend({
 
 			//Postpone the actual "navigation" - gives some speedup with internet explorer
 			//as it does no longer blocks the complete page until all frames have loaded.
-			var self = this;
 			window.setTimeout(function() {
 				//Load the iframe content
 				self.iframe.src = _url;
@@ -225,6 +248,11 @@ var fw_browser =  Class.extend({
 						// ignoer SecurityError: Blocked a frame ..., caused by different origin
 					}
 				}
+
+				if(self.loadingDeferred)
+				{
+					self.loadingDeferred.resolve();
+				}
 			}, 1);
 		}
 		else
@@ -257,6 +285,7 @@ var fw_browser =  Class.extend({
 				req.sendRequest();
 			}
 		}
+		return this.loadingDeferred.promise();
 	},
 	
 	/**
@@ -299,6 +328,11 @@ var fw_browser =  Class.extend({
 		// Run the javascript code
 		//console.log(content.js);
 		$j(this.contentDiv).append(content.js);
+
+		if(this.loadingDeferred)
+		{
+			this.loadingDeferred.resolve();
+		}
 	},
 	
 	/**

pixelegg/css/mobile.css

@@ -2527,6 +2527,11 @@ body {
   background-position: center;
   float: right;
 }
+.egw_fw_ui_tab_content > .loading {
+  background-image: url('../images/ajax-loader.gif');
+  text-align: center;
+  line-height: 400px;
+}
 /**
  * EGroupware: Stylite Pixelegg template
  *

pixelegg/css/pixelegg.css

@@ -2516,6 +2516,11 @@ body {
   background-position: center;
   float: right;
 }
+.egw_fw_ui_tab_content > .loading {
+  background-image: url('../images/ajax-loader.gif');
+  text-align: center;
+  line-height: 400px;
+}
 /**
  * EGroupware: Stylite Pixelegg template
  *

pixelegg/less/layout_ajaxLoader.less

@@ -24,3 +24,9 @@
     background-position: center;
     float: right;
 }
+
+.egw_fw_ui_tab_content > .loading {
+    background-image:url('../images/ajax-loader.gif');
+	text-align: center;
+	line-height: 400px;
+}