Some UI/UX improvements:

- Fix tabs headers alignment and resize
- Implement a loading page to obscure actual DOM rendering from user's view

api/js/framework/fw_desktop.js

@@ -395,8 +395,14 @@
 		createApplicationTab: function(_app, _pos)
 		{
 			this._super.apply(this, arguments);
-			this.checkTabOverflow();
+		},
 
+		/**
+		 * Runs after et2 is loaded
+		 *
+		 */
+		et2_loadingFinished: function() {
+			this.checkTabOverflow();
 		},
 
 		/**

pixelegg/css/mobile.css

@@ -4211,7 +4211,6 @@ td.message span.message {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  margin: 0px 5px 0px 0px;
   padding: 0px 5px 0px 0px;
   cursor: pointer;
   background-repeat: repeat-x;

pixelegg/css/monochrome.css

@@ -4200,7 +4200,6 @@ td.message span.message {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  margin: 0px 5px 0px 0px;
   padding: 0px 5px 0px 0px;
   cursor: pointer;
   background-repeat: repeat-x;

pixelegg/css/pixelegg.css

@@ -4211,7 +4211,6 @@ td.message span.message {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  margin: 0px 5px 0px 0px;
   padding: 0px 5px 0px 0px;
   cursor: pointer;
   background-repeat: repeat-x;
@@ -6405,6 +6404,29 @@ form[id^="ranking-"] .dialogHeadbar {
   background-color: rgba(0, 51, 102, 0.3);
   border-left: 4px solid #003366 !important;
 }
+#egw_fw_firstload {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  background: white;
+  height: 100%;
+  width: 100%;
+}
+#egw_fw_firstload:before {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-image: url(../../pixelegg/images/loading.svg);
+  background-position: center;
+  background-repeat: no-repeat;
+  -webkit-animation: fw-firstload 2s infinite;
+  animation: fw-firstload 2s infinite;
+  -moz-animation: fw-firstload 2s infinite;
+  background-size: 50%;
+}
 #egw_fw_sidebar #egw_fw_sidemenu #addressbook_sidebox_content .egw_fw_ui_category_active {
   background-color: #003366 !important;
 }

pixelegg/css/pixelegg.less

@@ -17,7 +17,29 @@
 	background-color: fade(@addressbook-color, 30%);
 	border-left:4px solid @addressbook-color !important;
 }
-
+#egw_fw_firstload {
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	background: white;
+	height: 100%;
+	width: 100%;
+	&:before{
+		content:"";
+		display: inline-block;
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		background-image: url(../../pixelegg/images/loading.svg);
+		background-position: center;
+		background-repeat: no-repeat;
+		-webkit-animation: fw-firstload 2s infinite;
+		animation: fw-firstload 2s infinite;
+		-moz-animation: fw-firstload 2s infinite;
+		background-size: 50%;
+	}
+}
 #egw_fw_sidebar {
 	#egw_fw_sidemenu {
 		#addressbook_sidebox_content {

pixelegg/head.tpl

@@ -51,4 +51,5 @@
 			</div>
 			<div id="egw_fw_sidebar_r"></div>
 		</div>
+		<div id="egw_fw_firstload"></div>
 <!-- END framework -->

pixelegg/js/fw_pixelegg.js

@@ -33,7 +33,46 @@
 			var height = this._super.apply(this, arguments);
 
 			return height;
-		}
+		},
+
+		/**
+		 * Check to see if the tab header will overflow and want to wrap.
+		 * Deal with it by setting some smaller widths on the tabs.
+		 */
+		checkTabOverflow: function()
+		{
+			var topmenuWidth = jQuery('#egw_fw_topmenu_info_items').outerWidth();
+			var width = 0;
+			var counter = 0;
+			var marginR = parseInt(jQuery("#egw_fw_main").css('margin-right'));
+			jQuery(this.tabsUi.contHeaderDiv).css('padding-right',topmenuWidth - marginR);
+			var outer_width = jQuery(this.tabsUi.contHeaderDiv).width();
+			var spans = jQuery(this.tabsUi.contHeaderDiv).children('span');
+			spans.css('max-width','');
+			spans.each(function() {
+				// Do not count and add up node if the width is not set (e.g. status app)
+				if (this.clientWidth > 0)
+				{
+					width += jQuery(this).outerWidth(true);
+					counter++;
+				}
+			});
+			if(width > outer_width)
+			{
+				var max_width = Math.floor(outer_width / counter) - (spans.outerWidth(true) - spans.width());
+				spans.css('max-width', max_width + 'px');
+			}
+		},
+
+		/**
+		 * Runs after et2 is loaded
+		 *
+		 */
+		et2_loadingFinished: function() {
+			this._super.apply(this, arguments);
+			jQuery('#egw_fw_firstload').remove();
+		},
+
 	});
 
 	/**

pixelegg/less/layout_raster_main.less

@@ -82,7 +82,6 @@
 				overflow: hidden;
 				white-space: nowrap;
 				text-overflow: ellipsis;
-				margin: 0px 5px 0px 0px;
 				padding: 0px 5px 0px 0px;
 				cursor: pointer;
 				background-repeat:repeat-x;

pixelegg/mobile/fw_mobile.css

@@ -4222,7 +4222,6 @@ td.message span.message {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  margin: 0px 5px 0px 0px;
   padding: 0px 5px 0px 0px;
   cursor: pointer;
   background-repeat: repeat-x;