From bfb12142ab4ccffee53e592fb094cc956f8cad27 Mon Sep 17 00:00:00 2001
From: NIKITA <nikita@cloud.com>
Date: Tue, 26 Oct 2010 19:11:58 -0700
Subject: [PATCH] Added right panel loading

---
 ui/new/jsp/account.jsp         |  12 +--
 ui/new/jsp/alert.jsp           |  17 ++--
 ui/new/jsp/dashboard.jsp       |  13 +--
 ui/new/jsp/diskoffering.jsp    |  49 +++++-----
 ui/new/jsp/domain.jsp          |  28 ++++--
 ui/new/jsp/event.jsp           |  16 ++--
 ui/new/jsp/globalsetting.jsp   |  48 +++++-----
 ui/new/jsp/ipaddress.jsp       |  59 +++++++-----
 ui/new/jsp/iso.jsp             |  40 ++++----
 ui/new/jsp/resource.jsp        | 164 +++++++++++++++++++++------------
 ui/new/jsp/router.jsp          |  50 +++++-----
 ui/new/jsp/serviceoffering.jsp |  47 +++++-----
 ui/new/jsp/snapshot.jsp        |  22 +++--
 ui/new/jsp/template.jsp        |  30 +++---
 ui/new/jsp/volume.jsp          |  36 +++++---
 15 files changed, 349 insertions(+), 282 deletions(-)

diff --git a/ui/new/jsp/account.jsp b/ui/new/jsp/account.jsp
index 861c30b96db..b642b991eb5 100644
--- a/ui/new/jsp/account.jsp
+++ b/ui/new/jsp/account.jsp
@@ -8,14 +8,8 @@
 %>
 <!-- account detail panel (begin) -->
 <!-- Loading -->
-<div style="display:none;">
-    <div class="ui-widget-overlay">
-    </div>
-    <div class="rightpanel_mainloaderbox" >
-       <div class="rightpanel_mainloader_animatedicon"></div>
-       <p>Loading &hellip; </p>
-    </div>    
-</div>    
+    
+ 
 <div class="main_title" id="right_panel_header">
     <div class="main_titleicon">
         <img src="images/title_accountsicon.gif" alt="Accounts" /></div>
@@ -33,7 +27,7 @@
             <%=t.t("Details")%></div>
     </div> 
     <div id="tab_content_details">
-        <div class="rightpanel_mainloader_panel">
+        <div class="rightpanel_mainloader_panel" style="display:none;">
               <div class="rightpanel_mainloaderbox">
                    <div class="rightpanel_mainloader_animatedicon"></div>
                    <p>Loading &hellip;</p>    
diff --git a/ui/new/jsp/alert.jsp b/ui/new/jsp/alert.jsp
index bba6ea11c5c..8ebb8fd9ac7 100644
--- a/ui/new/jsp/alert.jsp
+++ b/ui/new/jsp/alert.jsp
@@ -6,15 +6,7 @@
     CloudResourceBundle t = CloudResourceBundle.getBundle("resources/resource", browserLocale);
 %>
 
-<!-- Loading -->
-<div style="display:none;">
-    <div class="ui-widget-overlay">
-    </div>
-    <div class="rightpanel_mainloaderbox" >
-       <div class="rightpanel_mainloader_animatedicon"></div>
-       <p>Loading &hellip; </p>
-    </div>    
-</div>
+
 <!-- alert detail panel (begin) -->
 <div class="main_title" id="right_panel_header">
     
@@ -34,6 +26,13 @@
             <%=t.t("Details")%></div>        
     </div>    
     <div id="tab_content_details">
+    	<!-- Loading -->
+         <div class="rightpanel_mainloader_panel" style="display:none;">
+              <div class="rightpanel_mainloaderbox">
+                   <div class="rightpanel_mainloader_animatedicon"></div>
+                   <p>Loading &hellip;</p>    
+              </div>               
+        </div> 
 	    <div class="grid_container">
 	        <div class="grid_rows odd">
 	            <div class="grid_row_cell" style="width: 20%;">
diff --git a/ui/new/jsp/dashboard.jsp b/ui/new/jsp/dashboard.jsp
index 13728489b2d..0f7a9e1d44c 100644
--- a/ui/new/jsp/dashboard.jsp
+++ b/ui/new/jsp/dashboard.jsp
@@ -7,14 +7,7 @@
     CloudResourceBundle t = CloudResourceBundle.getBundle("resources/resource", browserLocale);
 %>
 <!--Loading-->
-<div style="display:none;">
-    <div class="ui-widget-overlay">
-    </div>
-    <div class="rightpanel_mainloaderbox" >
-       <div class="rightpanel_mainloader_animatedicon"></div>
-       <p>Loading &hellip; </p>
-    </div> 
-</div>    
+    
    
 <div class="main_title" id="right_panel_header">
     <div class="main_titleicon">
@@ -27,6 +20,10 @@
 <!--Dashboard Admin (begin)-->
 <div id="dashboard_admin" style="display: none">
     <div class="contentbox">
+    	<div class="rightpanel_mainloaderbox" style="display:none;">
+               <div class="rightpanel_mainloader_animatedicon"></div>
+               <p>Loading &hellip; </p>
+        </div>  
         <div class="grid_container" id="system_wide_capacity_container">
             <div class="grid_header">
                 <div class="grid_header_cell" style="width: 60%; border: none;">
diff --git a/ui/new/jsp/diskoffering.jsp b/ui/new/jsp/diskoffering.jsp
index f449f8b6fd1..30ee420bce9 100644
--- a/ui/new/jsp/diskoffering.jsp
+++ b/ui/new/jsp/diskoffering.jsp
@@ -7,15 +7,7 @@
     CloudResourceBundle t = CloudResourceBundle.getBundle("resources/resource", browserLocale);
 %>
 
-<!-- Loading -->
-<div style="display:none;">
-    <div class="ui-widget-overlay">
-    </div>
-    <div class="rightpanel_mainloaderbox" >
-       <div class="rightpanel_mainloader_animatedicon"></div>
-       <p>Loading &hellip; </p>
-    </div>    
-</div>
+
 
 <div class="main_title" id="right_panel_header">
     
@@ -36,25 +28,36 @@
             <%=t.t("details")%></div>
     </div>
     <div id="tab_content_details">
+    	<div class="rightpanel_mainloader_panel" style="display:none;">
+              <div class="rightpanel_mainloaderbox">
+                   <div class="rightpanel_mainloader_animatedicon"></div>
+                   <p>Loading &hellip;</p>    
+              </div>               
+        </div>
         <div class="grid_actionpanel">
-            <div class="grid_actionbox" id="action_link">
-                <div class="grid_actionsdropdown_box" id="action_menu" style="display: none;">
-                    <ul class="actionsdropdown_boxlist" id="action_list">
-                        <li><%=t.t("no.available.actions")%></li>
-                    </ul>
-                </div>
-            </div>
             <div class="grid_editbox" id="edit_button">
             </div>
-            <div class="gridheader_loaderbox" id="spinning_wheel" style="border: 1px solid #999;
-                display: none;">
-                <div class="gridheader_loader" id="Div1">
-                </div>
-                <p id="description">
-                    Waiting &hellip;</p>
-            </div>                 
+                             
         </div>
+
         <div class="grid_container">
+        	<div class="grid_header">
+            	<div id="grid_header_title" class="grid_header_title">(title)</div>
+                <div id="action_link" class="grid_actionbox" id="account_action_link">
+                    <div class="grid_actionsdropdown_box" id="action_menu" style="display: none;">
+                        <ul class="actionsdropdown_boxlist" id="action_list">
+                        	<li><%=t.t("no.available.actions")%></li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="gridheader_loaderbox" id="spinning_wheel" style="border: 1px solid #999;
+                display: none;">
+                    <div class="gridheader_loader" id="Div1">
+                    </div>
+                    <p id="description">
+                        Waiting &hellip;</p>
+                </div>
+            </div>
             <div class="grid_rows odd">
                 <div class="grid_row_cell" style="width: 20%;">
                     <div class="row_celltitles">
diff --git a/ui/new/jsp/domain.jsp b/ui/new/jsp/domain.jsp
index 2eb570e1084..a85649e16aa 100644
--- a/ui/new/jsp/domain.jsp
+++ b/ui/new/jsp/domain.jsp
@@ -6,15 +6,7 @@
     CloudResourceBundle t = CloudResourceBundle.getBundle("resources/resource", browserLocale);
 %>
 
-<!-- Loading -->
-<div style="display:none;">
-    <div class="ui-widget-overlay">
-    </div>
-    <div class="rightpanel_mainloaderbox" >
-       <div class="rightpanel_mainloader_animatedicon"></div>
-       <p>Loading &hellip; </p>
-    </div>    
-</div>
+    
 
 <!-- domain detail panel (begin) -->
 <div class="main_title" id="right_panel_header">
@@ -41,6 +33,12 @@
     </div>  
     <!-- Details tab (start)-->
     <div id="tab_content_details">
+    	<div class="rightpanel_mainloader_panel" style="display:none;">
+              <div class="rightpanel_mainloaderbox">
+                   <div class="rightpanel_mainloader_animatedicon"></div>
+                   <p>Loading &hellip;</p>    
+              </div>               
+        </div>
         <div class="grid_container" id="domain_grid_container">
             <div class="grid_rows odd">
                 <div class="grid_row_cell" style="width: 20%;">
@@ -98,11 +96,23 @@
     
     <!-- Admin Account tab (start)-->
     <div style="display: none;" id="tab_content_admin_account">
+    		<div class="rightpanel_mainloader_panel" style="display:none;">
+                  <div class="rightpanel_mainloaderbox">
+                       <div class="rightpanel_mainloader_animatedicon"></div>
+                       <p>Loading &hellip;</p>    
+                  </div>               
+            </div>
     </div>
     <!-- Admin Account tab (end)-->
     
     <!-- Resource Limits tab (start)-->
     <div id="tab_content_resource_limits" style="display:none">
+    		<div class="rightpanel_mainloader_panel" style="display:none;">
+                  <div class="rightpanel_mainloaderbox">
+                       <div class="rightpanel_mainloader_animatedicon"></div>
+                       <p>Loading &hellip;</p>    
+                  </div>               
+            </div>
         <div class="grid_actionpanel">            
             <div class="grid_editbox" id="edit_button">
             </div>
diff --git a/ui/new/jsp/event.jsp b/ui/new/jsp/event.jsp
index add43c80d1c..3a5aaf62fa5 100644
--- a/ui/new/jsp/event.jsp
+++ b/ui/new/jsp/event.jsp
@@ -5,15 +5,7 @@
     Locale browserLocale = request.getLocale();
     CloudResourceBundle t = CloudResourceBundle.getBundle("resources/resource", browserLocale);
 %>
-<!-- Loading -->
-<div style="display:none;">
-    <div class="ui-widget-overlay">
-    </div>
-    <div class="rightpanel_mainloaderbox" >
-       <div class="rightpanel_mainloader_animatedicon"></div>
-       <p>Loading &hellip; </p>
-    </div>    
-</div>
+
 
 <!-- event detail panel (begin) -->
 <div class="main_title" id="right_panel_header">
@@ -34,6 +26,12 @@
             <%=t.t("Details")%></div>        
     </div>    
     <div id="tab_content_details">
+    	<div class="rightpanel_mainloader_panel" style="display:none;">
+              <div class="rightpanel_mainloaderbox">
+                   <div class="rightpanel_mainloader_animatedicon"></div>
+                   <p>Loading &hellip;</p>    
+              </div>               
+        </div>
 	    <div class="grid_container">
 	        <div class="grid_rows odd">
 	            <div class="grid_row_cell" style="width: 20%;">
diff --git a/ui/new/jsp/globalsetting.jsp b/ui/new/jsp/globalsetting.jsp
index 44cf7e84ad4..4362cdb055b 100644
--- a/ui/new/jsp/globalsetting.jsp
+++ b/ui/new/jsp/globalsetting.jsp
@@ -7,15 +7,7 @@
     CloudResourceBundle t = CloudResourceBundle.getBundle("resources/resource", browserLocale);
 %>
 
-<!-- Loading -->
-<div style="display:none;">
-    <div class="ui-widget-overlay">
-    </div>
-    <div class="rightpanel_mainloaderbox" >
-       <div class="rightpanel_mainloader_animatedicon"></div>
-       <p>Loading &hellip; </p>
-    </div>    
-</div>
+
 
 <div class="main_title" id="right_panel_header">
    
@@ -36,25 +28,35 @@
             <%=t.t("details")%></div>
     </div>
     <div id="tab_content_details">
+    	<div class="rightpanel_mainloader_panel" style="display:none;">
+              <div class="rightpanel_mainloaderbox">
+                   <div class="rightpanel_mainloader_animatedicon"></div>
+                   <p>Loading &hellip;</p>    
+              </div>               
+        </div>
         <div class="grid_actionpanel">
-            <div class="grid_actionbox" id="action_link">
-                <div class="grid_actionsdropdown_box" id="action_menu" style="display: none;">
-                    <ul class="actionsdropdown_boxlist" id="action_list">
-                        <li><%=t.t("no.available.actions")%></li>
-                    </ul>
-                </div>
-            </div>
             <div class="grid_editbox" id="edit_button">
             </div>
-            <div class="gridheader_loaderbox" id="spinning_wheel" style="border: 1px solid #999;
-                display: none;">
-                <div class="gridheader_loader" id="Div1">
-                </div>
-                <p id="description">
-                    Waiting &hellip;</p>
-            </div>                 
+                        
         </div>
         <div class="grid_container">
+        	<div class="grid_header">
+            	<div id="grid_header_title" class="grid_header_title">(title)</div>
+                <div id="action_link" class="grid_actionbox" id="account_action_link">
+                    <div class="grid_actionsdropdown_box" id="action_menu" style="display: none;">
+                        <ul class="actionsdropdown_boxlist" id="action_list">
+                        	<li><%=t.t("no.available.actions")%></li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="gridheader_loaderbox" id="spinning_wheel" style="border: 1px solid #999;
+                display: none;">
+                    <div class="gridheader_loader" id="Div1">
+                    </div>
+                    <p id="description">
+                        Waiting &hellip;</p>
+                </div>     
+            </div>
             <div class="grid_rows odd">
                 <div class="grid_row_cell" style="width: 20%;">
                     <div class="row_celltitles">
diff --git a/ui/new/jsp/ipaddress.jsp b/ui/new/jsp/ipaddress.jsp
index 875a1eb2f8d..b9bac9c839b 100644
--- a/ui/new/jsp/ipaddress.jsp
+++ b/ui/new/jsp/ipaddress.jsp
@@ -7,15 +7,6 @@
     CloudResourceBundle t = CloudResourceBundle.getBundle("resources/resource", browserLocale);
 %>
 
-<!-- Loading -->
-<div style="display:none;">
-    <div class="ui-widget-overlay">
-    </div>
-    <div class="rightpanel_mainloaderbox" >
-       <div class="rightpanel_mainloader_animatedicon"></div>
-       <p>Loading &hellip; </p>
-    </div>    
-</div>
 
 <!-- IP Address detail panel (begin) -->
 <div class="main_title" id="right_panel_header">
@@ -39,23 +30,31 @@
             <%=t.t("Load Balancer")%></div>
     </div>  
     <div id="tab_content_details">
-        <div class="grid_actionpanel">
-            <div class="grid_actionbox" id="action_link">
-                <div class="grid_actionsdropdown_box" id="action_menu" style="display: none;">
-                    <ul class="actionsdropdown_boxlist" id="action_list">
-                        <li><%=t.t("no.available.actions")%></li>
-                    </ul>
-                </div>
-            </div>           
-            <div class="gridheader_loaderbox" id="spinning_wheel" style="border: 1px solid #999;
-                display: none;">
-                <div class="gridheader_loader" id="icon">
-                </div>
-                <p id="description">
-                    Detaching Disk &hellip;</p>
-            </div>                  
+    	<div class="rightpanel_mainloader_panel" style="display:none;">
+              <div class="rightpanel_mainloaderbox">
+                   <div class="rightpanel_mainloader_animatedicon"></div>
+                   <p>Loading &hellip;</p>    
+              </div>               
         </div>
+
         <div class="grid_container">
+        	<div class="grid_header">
+            	<div id="grid_header_title" class="grid_header_title">(title)</div>
+                <div class="grid_actionbox" id="action_link">
+                    <div class="grid_actionsdropdown_box" id="action_menu" style="display: none;">
+                        <ul class="actionsdropdown_boxlist" id="action_list">
+                            <li><%=t.t("no.available.actions")%></li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="gridheader_loaderbox" id="spinning_wheel" style="border: 1px solid #999;
+                display: none;">
+                    <div class="gridheader_loader" id="icon">
+                    </div>
+                    <p id="description">
+                        Detaching Disk &hellip;</p>
+                </div>
+            </div>
             <div class="grid_rows odd">
                 <div class="grid_row_cell" style="width: 20%;">
                     <div class="row_celltitles">
@@ -141,6 +140,12 @@
     <!-- Details ends here-->
     <!-- Port Forwarding start here-->
     <div id="tab_content_port_forwarding" style="display:none">
+    	<div class="rightpanel_mainloader_panel" style="display:none;">
+              <div class="rightpanel_mainloaderbox">
+                   <div class="rightpanel_mainloader_animatedicon"></div>
+                   <p>Loading &hellip;</p>    
+              </div>               
+        </div>
         <div class="grid_container" id="grid_container">
             <div class="grid_header">
                 <div class="grid_header_cell" style="width: 15%">
@@ -195,6 +200,12 @@
     <!-- Port Forwarding ends here-->
     <!-- Load Balancer start here-->
     <div id="tab_content_load_balancer" style="display:none">
+    	<div class="rightpanel_mainloader_panel" style="display:none;">
+              <div class="rightpanel_mainloaderbox">
+                   <div class="rightpanel_mainloader_animatedicon"></div>
+                   <p>Loading &hellip;</p>    
+              </div>               
+        </div>
         <div class="grid_container">
             <div class="grid_header">
                 <div class="grid_header_cell" style="width: 25%">
diff --git a/ui/new/jsp/iso.jsp b/ui/new/jsp/iso.jsp
index 61afb4ca766..798d56eee0f 100644
--- a/ui/new/jsp/iso.jsp
+++ b/ui/new/jsp/iso.jsp
@@ -7,15 +7,7 @@
     CloudResourceBundle t = CloudResourceBundle.getBundle("resources/resource", browserLocale);
 %>
 
-<!-- Loading -->
-<div style="display:none;">
-    <div class="ui-widget-overlay">
-    </div>
-    <div class="rightpanel_mainloaderbox" >
-       <div class="rightpanel_mainloader_animatedicon"></div>
-       <p>Loading &hellip; </p>
-    </div>    
-</div>
+
 
 <!-- ISO detail panel (begin) -->
 <div class="main_title" id="right_panel_header">
@@ -35,25 +27,29 @@
             <%=t.t("Details")%></div>
     </div>
     <div id="tab_content_details">
-        <div class="grid_actionpanel">            
-            <div class="gridheader_loaderbox" id="spinning_wheel" style="border: 1px solid #999;
-                display: none;">
-                <div class="gridheader_loader" id="Div1">
-                </div>
-                <p id="description">
-                    Detaching Disk &hellip;</p>
-            </div>                 
+    	<div class="rightpanel_mainloader_panel" style="display:none;">
+              <div class="rightpanel_mainloaderbox">
+                   <div class="rightpanel_mainloader_animatedicon"></div>
+                   <p>Loading &hellip;</p>    
+              </div>               
         </div>
         <div class="grid_container">
         	<div class="grid_header">
             	<div class="grid_header_title">Title</div>
                 <div class="grid_actionbox" id="action_link">
-                <div class="grid_actionsdropdown_box" id="action_menu" style="display: none;">
-                    <ul class="actionsdropdown_boxlist" id="action_list">
-                        <li><%=t.t("no.available.actions")%></li>
-                    </ul>
+                    <div class="grid_actionsdropdown_box" id="action_menu" style="display: none;">
+                        <ul class="actionsdropdown_boxlist" id="action_list">
+                            <li><%=t.t("no.available.actions")%></li>
+                        </ul>
+                    </div>
                 </div>
-            </div>
+                <div class="gridheader_loaderbox" id="spinning_wheel" style="border: 1px solid #999;
+                display: none;">
+                    <div class="gridheader_loader" id="Div1">
+                    </div>
+                    <p id="description">
+                        Detaching Disk &hellip;</p>
+                </div>       
             </div>
             <div class="grid_rows odd">
                 <div class="grid_row_cell" style="width: 20%;">
diff --git a/ui/new/jsp/resource.jsp b/ui/new/jsp/resource.jsp
index a3e922b5b4f..7c767aa3524 100644
--- a/ui/new/jsp/resource.jsp
+++ b/ui/new/jsp/resource.jsp
@@ -7,15 +7,7 @@
     CloudResourceBundle t = CloudResourceBundle.getBundle("resources/resource", browserLocale);
 %>
 
-<!-- Loading -->
-<div style="display:none;">
-    <div class="ui-widget-overlay">
-    </div>
-    <div class="rightpanel_mainloaderbox" >
-       <div class="rightpanel_mainloader_animatedicon"></div>
-       <p>Loading &hellip; </p>
-    </div>    
-</div>
+
 
 <!-- domain detail panel (begin) -->
 <div class="main_title" id="right_panel_header">
@@ -43,7 +35,13 @@
                 <%=t.t("secondary.storage")%></div>
         </div>
         <!-- Details tab (start)-->
-        <div id="tab_content_details">        
+        <div id="tab_content_details"> 
+        	<div class="rightpanel_mainloader_panel" style="display:none;">
+                  <div class="rightpanel_mainloaderbox">
+                       <div class="rightpanel_mainloader_animatedicon"></div>
+                       <p>Loading &hellip;</p>    
+                  </div>               
+            </div>       
             <div class="grid_actionpanel">
 	                        
 	            <div class="gridheader_loaderbox" id="spinning_wheel" style="border: 1px solid #999;
@@ -150,6 +148,12 @@
         <!-- Details tab (end)-->
         <!-- Network tab (start)-->
         <div style="display: none;" id="tab_content_network">
+        	<div class="rightpanel_mainloader_panel" style="display:none;">
+                  <div class="rightpanel_mainloaderbox">
+                       <div class="rightpanel_mainloader_animatedicon"></div>
+                       <p>Loading &hellip;</p>    
+                  </div>               
+            </div>
             <div class="text_container">
                 <div class="network_dgbox">
                     <div class="networkdg_zonepanel">
@@ -181,6 +185,12 @@
         <!-- Secondary Storage tab (start)-->
         <div id="tab_content_secondarystorage" style="display: none">
             Secondary Storage
+            <div class="rightpanel_mainloader_panel" style="display:none;">
+                  <div class="rightpanel_mainloaderbox">
+                       <div class="rightpanel_mainloader_animatedicon"></div>
+                       <p>Loading &hellip;</p>    
+                  </div>               
+            </div>
         </div>
         <!-- Secondary Storage tab (end)-->
     </div>
@@ -190,24 +200,32 @@
                 <%=t.t("details")%></div>           
         </div>
         <!-- Details tab (start)-->
-        <div id="tab_content_details">         
-            <div class="grid_actionpanel">
-	            <div class="grid_actionbox" id="action_link">
-	                <div class="grid_actionsdropdown_box" id="action_menu" style="display: none;">
-	                    <ul class="actionsdropdown_boxlist" id="action_list">
-	                       <li><%=t.t("no.available.actions")%></li>
-	                    </ul>
-	                </div>
-	            </div>            
-	            <div class="gridheader_loaderbox" id="spinning_wheel" style="border: 1px solid #999;
-	                display: none;">
-	                <div class="gridheader_loader" id="icon">
-	                </div>
-	                <p id="description">
-	                    Waiting &hellip;</p>
-	            </div>                  
-	        </div>           
+        <div id="tab_content_details">
+        	<div class="rightpanel_mainloader_panel" style="display:none;">
+                  <div class="rightpanel_mainloaderbox">
+                       <div class="rightpanel_mainloader_animatedicon"></div>
+                       <p>Loading &hellip;</p>    
+                  </div>               
+            </div>         
+                       
             <div class="grid_container">
+            	<div class="grid_header">
+                    <div id="grid_header_title" class="grid_header_title">(title)</div>
+                    <div class="grid_actionbox" id="action_link">
+                        <div class="grid_actionsdropdown_box" id="action_menu" style="display: none;">
+                            <ul class="actionsdropdown_boxlist" id="action_list">
+                               <li><%=t.t("no.available.actions")%></li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="gridheader_loaderbox" id="spinning_wheel" style="border: 1px solid #999;
+	                display: none;">
+                        <div class="gridheader_loader" id="icon">
+                        </div>
+                        <p id="description">
+                            Waiting &hellip;</p>
+                    </div>
+                </div>
                 <div class="grid_rows odd">
                     <div class="grid_row_cell" style="width: 20%;">
                         <div class="row_celltitles">
@@ -270,6 +288,12 @@
         </div>
         <!-- Details tab (start)-->
         <div id="tab_content_details">
+        	<div class="rightpanel_mainloader_panel" style="display:none;">
+                  <div class="rightpanel_mainloaderbox">
+                       <div class="rightpanel_mainloader_animatedicon"></div>
+                       <p>Loading &hellip;</p>    
+                  </div>               
+            </div>
             <div class="grid_container">
                 <div class="grid_rows odd">
                     <div class="grid_row_cell" style="width: 20%;">
@@ -322,23 +346,31 @@
         </div>
         <!-- Details tab (start)-->
         <div id="tab_content_details">
-            <div class="grid_actionpanel">
-	            <div class="grid_actionbox" id="action_link">
-	                <div class="grid_actionsdropdown_box" id="action_menu" style="display: none;">
-	                    <ul class="actionsdropdown_boxlist" id="action_list">
-	                       <li><%=t.t("no.available.actions")%></li>
-	                    </ul>
-	                </div>
-	            </div>            
-	            <div class="gridheader_loaderbox" id="spinning_wheel" style="border: 1px solid #999;
-	                display: none;">
-	                <div class="gridheader_loader" id="icon">
-	                </div>
-	                <p id="description">
-	                    Waiting &hellip;</p>
-	            </div>                  
-	        </div>        
+        	<div class="rightpanel_mainloader_panel" style="display:none;">
+                  <div class="rightpanel_mainloaderbox">
+                       <div class="rightpanel_mainloader_animatedicon"></div>
+                       <p>Loading &hellip;</p>    
+                  </div>               
+            </div>
+                    
             <div class="grid_container">
+            	<div class="grid_header">
+                    <div id="grid_header_title" class="grid_header_title">(title)</div>
+                    <div class="grid_actionbox" id="action_link">
+                        <div class="grid_actionsdropdown_box" id="action_menu" style="display: none;">
+                            <ul class="actionsdropdown_boxlist" id="action_list">
+                               <li><%=t.t("no.available.actions")%></li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="gridheader_loaderbox" id="spinning_wheel" style="border: 1px solid #999;
+	                display: none;">
+                        <div class="gridheader_loader" id="icon">
+                        </div>
+                        <p id="description">
+                            Waiting &hellip;</p>
+                    </div>
+                </div>
                 <div class="grid_rows odd">
                     <div class="grid_row_cell" style="width: 20%;">
                         <div class="row_celltitles">
@@ -460,23 +492,31 @@
         </div>
         <!-- Details tab (start)-->
         <div id="tab_content_details">
-             <div class="grid_actionpanel">
-	            <div class="grid_actionbox" id="action_link">
-	                <div class="grid_actionsdropdown_box" id="action_menu" style="display: none;">
-	                    <ul class="actionsdropdown_boxlist" id="action_list">
-	                       <li><%=t.t("no.available.actions")%></li>
-	                    </ul>
-	                </div>
-	            </div>            
-	            <div class="gridheader_loaderbox" id="spinning_wheel" style="border: 1px solid #999;
-	                display: none;">
-	                <div class="gridheader_loader" id="icon">
-	                </div>
-	                <p id="description">
-	                    Waiting &hellip;</p>
-	            </div>                  
-	        </div>            
+        	<div class="rightpanel_mainloader_panel" style="display:none;">
+                  <div class="rightpanel_mainloaderbox">
+                       <div class="rightpanel_mainloader_animatedicon"></div>
+                       <p>Loading &hellip;</p>    
+                  </div>               
+            </div>
+                         
             <div class="grid_container">
+            	<div class="grid_header">
+                    <div id="grid_header_title" class="grid_header_title">(title)</div>
+                    <div class="grid_actionbox" id="action_link">
+                        <div class="grid_actionsdropdown_box" id="action_menu" style="display: none;">
+                            <ul class="actionsdropdown_boxlist" id="action_list">
+                               <li><%=t.t("no.available.actions")%></li>
+                            </ul>
+                        </div>
+                    </div>
+                    <div class="gridheader_loaderbox" id="spinning_wheel" style="border: 1px solid #999;
+	                display: none;">
+                        <div class="gridheader_loader" id="icon">
+                        </div>
+                        <p id="description">
+                            Waiting &hellip;</p>
+                    </div>
+                </div>
                 <div class="grid_rows odd">
                     <div class="grid_row_cell" style="width: 20%;">
                         <div class="row_celltitles">
@@ -598,6 +638,12 @@
         </div>
         <!-- Details tab (start)-->
         <div id="tab_content_details" class="grid_container">
+        	<div class="rightpanel_mainloader_panel" style="display:none;">
+                  <div class="rightpanel_mainloaderbox">
+                       <div class="rightpanel_mainloader_animatedicon"></div>
+                       <p>Loading &hellip;</p>    
+                  </div>               
+            </div>
             <div class="grid_rows odd">
                 <div class="vm_statusbox">
                     <div id="view_console_container">
diff --git a/ui/new/jsp/router.jsp b/ui/new/jsp/router.jsp
index 8bac7e927f0..e69e1cb6136 100644
--- a/ui/new/jsp/router.jsp
+++ b/ui/new/jsp/router.jsp
@@ -7,15 +7,7 @@
     CloudResourceBundle t = CloudResourceBundle.getBundle("resources/resource", browserLocale);
 %>
 
-<!-- Loading -->
-<div style="display:none;">
-    <div class="ui-widget-overlay">
-    </div>
-    <div class="rightpanel_mainloaderbox" >
-       <div class="rightpanel_mainloader_animatedicon"></div>
-       <p>Loading &hellip; </p>
-    </div>    
-</div>
+
 
 <!-- router detail panel (begin) -->
 <div class="main_title" id="right_panel_header">
@@ -37,23 +29,31 @@
             <%=t.t("Details")%></div>
     </div> 
     <div id="tab_content_details">
-        <div class="grid_actionpanel">
-            <div class="grid_actionbox" id="action_link">
-                <div class="grid_actionsdropdown_box" id="action_menu" style="display: none;">
-                    <ul class="actionsdropdown_boxlist" id="action_list">
-                        <li><%=t.t("no.available.actions")%></li>
-                    </ul>
-                </div>
-            </div>            
-            <div class="gridheader_loaderbox" id="spinning_wheel" style="border: 1px solid #999;
-                display: none;">
-                <div class="gridheader_loader" id="icon">
-                </div>
-                <p id="description">
-                    Detaching Disk &hellip;</p>
-            </div>                  
+    	<div class="rightpanel_mainloader_panel" style="display:block;">
+              <div class="rightpanel_mainloaderbox">
+                   <div class="rightpanel_mainloader_animatedicon"></div>
+                   <p>Loading &hellip;</p>    
+              </div>               
         </div>
-        <div class="grid_container">            
+        
+        <div class="grid_container">  
+        	<div class="grid_header">
+            	<div id="grid_header_title" class="grid_header_title">(title)</div>
+                <div id="action_link" class="grid_actionbox" id="account_action_link">
+                    <div class="grid_actionsdropdown_box" id="action_menu" style="display: none;">
+                        <ul class="actionsdropdown_boxlist" id="action_list">
+                        	<li><%=t.t("no.available.actions")%></li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="gridheader_loaderbox" id="spinning_wheel" style="border: 1px solid #999;
+                display: none;">
+                    <div class="gridheader_loader" id="icon">
+                    </div>
+                    <p id="description">
+                        Detaching Disk &hellip;</p>
+                </div>
+            </div>          
             <div class="grid_rows odd">
                 <div class="vm_statusbox">   
                     <div id="view_console_container">                       
diff --git a/ui/new/jsp/serviceoffering.jsp b/ui/new/jsp/serviceoffering.jsp
index cdb8adf9bf1..57d7537cdf9 100644
--- a/ui/new/jsp/serviceoffering.jsp
+++ b/ui/new/jsp/serviceoffering.jsp
@@ -7,15 +7,6 @@
     CloudResourceBundle t = CloudResourceBundle.getBundle("resources/resource", browserLocale);
 %>
 
-<!-- Loading -->
-<div style="display:none;">
-    <div class="ui-widget-overlay">
-    </div>
-    <div class="rightpanel_mainloaderbox" >
-       <div class="rightpanel_mainloader_animatedicon"></div>
-       <p>Loading &hellip; </p>
-    </div>    
-</div>
 
 <div class="main_title" id="right_panel_header">
     
@@ -36,25 +27,35 @@
             <%=t.t("details")%></div>
     </div>
     <div id="tab_content_details">
+    	<div class="rightpanel_mainloader_panel" style="display:block;">
+              <div class="rightpanel_mainloaderbox">
+                   <div class="rightpanel_mainloader_animatedicon"></div>
+                   <p>Loading &hellip;</p>    
+              </div>               
+        </div>
         <div class="grid_actionpanel">
-            <div class="grid_actionbox" id="action_link">
-                <div class="grid_actionsdropdown_box" id="action_menu" style="display: none;">
-                    <ul class="actionsdropdown_boxlist" id="action_list">
-                        <li><%=t.t("no.available.actions")%></li>
-                    </ul>
-                </div>
-            </div>
+            
             <div class="grid_editbox" id="edit_button">
-            </div>
-            <div class="gridheader_loaderbox" id="spinning_wheel" style="border: 1px solid #999;
-                display: none;">
-                <div class="gridheader_loader" id="Div1">
-                </div>
-                <p id="description">
-                    Waiting &hellip;</p>
             </div>                 
         </div>
         <div class="grid_container">
+        	<div class="grid_header">
+            	<div id="grid_header_title" class="grid_header_title">(title)</div>
+                <div id="action_link" class="grid_actionbox" id="action_link">
+                    <div class="grid_actionsdropdown_box" id="action_menu" style="display: none;">
+                        <ul class="actionsdropdown_boxlist" id="action_list">
+                        	<li><%=t.t("no.available.actions")%></li>
+                        </ul>
+                    </div>
+                </div>
+                <div class="gridheader_loaderbox" id="spinning_wheel" style="border: 1px solid #999;
+                display: none;">
+                    <div class="gridheader_loader" id="Div1">
+                    </div>
+                    <p id="description">
+                        Waiting &hellip;</p>
+                </div>
+            </div>
             <div class="grid_rows odd">
                 <div class="grid_row_cell" style="width: 20%;">
                     <div class="row_celltitles">
diff --git a/ui/new/jsp/snapshot.jsp b/ui/new/jsp/snapshot.jsp
index e2f46026100..c5cbeee7d64 100644
--- a/ui/new/jsp/snapshot.jsp
+++ b/ui/new/jsp/snapshot.jsp
@@ -35,25 +35,29 @@
             <%=t.t("Details")%></div>
     </div>    
     <div id="tab_content_details">
-        <div class="grid_actionpanel">                        
-            <div class="gridheader_loaderbox" id="spinning_wheel" style="border: 1px solid #999;
-                display: none;">
-                <div class="gridheader_loader" id="icon">
-                </div>
-                <p id="description">
-                    Waiting &hellip;</p>
-            </div>                  
+		<div class="rightpanel_mainloader_panel" style="display:none;">
+              <div class="rightpanel_mainloaderbox">
+                   <div class="rightpanel_mainloader_animatedicon"></div>
+                   <p>Loading &hellip;</p>    
+              </div>               
         </div>
         <div class="grid_container">
         	<div class="grid_header">
             	<div class="grid_header_title">Title</div>
-                    <div class="grid_actionbox" id="action_link">
+                   <div class="grid_actionbox" id="action_link">
                     <div class="grid_actionsdropdown_box" id="action_menu" style="display: none;">
                         <ul class="actionsdropdown_boxlist" id="action_list">
                             <li><%=t.t("no.available.actions")%></li>
                         </ul>
                     </div>
                 </div>
+                <div class="gridheader_loaderbox" id="spinning_wheel" style="border: 1px solid #999;
+                 display: none;">
+                    <div class="gridheader_loader" id="icon">
+                    </div>
+                    <p id="description">
+                        Waiting &hellip;</p>
+                </div>
             </div>
             <div class="grid_rows odd">
                 <div class="grid_row_cell" style="width: 20%;">
diff --git a/ui/new/jsp/template.jsp b/ui/new/jsp/template.jsp
index 23f67f3e8fc..f4472369e40 100644
--- a/ui/new/jsp/template.jsp
+++ b/ui/new/jsp/template.jsp
@@ -7,15 +7,7 @@
     CloudResourceBundle t = CloudResourceBundle.getBundle("resources/resource", browserLocale);
 %>
 
-<!-- Loading -->
-<div style="display:none;">
-    <div class="ui-widget-overlay">
-    </div>
-    <div class="rightpanel_mainloaderbox" >
-       <div class="rightpanel_mainloader_animatedicon"></div>
-       <p>Loading &hellip; </p>
-    </div>    
-</div>
+
 
 
 <!-- template detail panel (begin) -->
@@ -36,14 +28,11 @@
             <%=t.t("Details")%></div>
     </div>    
     <div id="tab_content_details">
-        <div class="grid_actionpanel">            
-            <div class="gridheader_loaderbox" id="spinning_wheel" style="border: 1px solid #999;
-                display: none;">
-                <div class="gridheader_loader" id="Div1">
-                </div>
-                <p id="description">
-                    Waiting &hellip;</p>
-            </div>               
+    	<div class="rightpanel_mainloader_panel" style="display:none;">
+              <div class="rightpanel_mainloaderbox">
+                   <div class="rightpanel_mainloader_animatedicon"></div>
+                   <p>Loading &hellip;</p>    
+              </div>               
         </div>
     
         <div class="grid_container">
@@ -56,6 +45,13 @@
                         </ul>
                     </div>
                 </div>
+                 <div class="gridheader_loaderbox" id="spinning_wheel" style="border: 1px solid #999;
+                display: none;">
+                    <div class="gridheader_loader" id="Div1">
+                    </div>
+                    <p id="description">
+                        Waiting &hellip;</p>
+                </div>   
             </div>
             <div class="grid_rows odd">
                 <div class="grid_row_cell" style="width: 20%;">
diff --git a/ui/new/jsp/volume.jsp b/ui/new/jsp/volume.jsp
index ebfed44a46f..965ea7e57c5 100644
--- a/ui/new/jsp/volume.jsp
+++ b/ui/new/jsp/volume.jsp
@@ -40,25 +40,29 @@
     </div>
     <!--Details tab (start)-->
     <div id="tab_content_details">
-        <div class="grid_actionpanel">
-                        
-            <div class="gridheader_loaderbox" id="spinning_wheel" style="border: 1px solid #999;
-                display: none;">
-                <div class="gridheader_loader" id="icon">
-                </div>
-                <p id="description">
-                    Detaching Disk &hellip;</p>
-            </div>                 
+    	<div class="rightpanel_mainloader_panel" style="display:none;">
+              <div class="rightpanel_mainloaderbox">
+                   <div class="rightpanel_mainloader_animatedicon"></div>
+                   <p>Loading &hellip;</p>    
+              </div>               
         </div>
+        
         <div class="grid_container">
         	<div class="grid_header">
             	<div class="grid_header_title">Title</div>
                     <div class="grid_actionbox" id="action_link">
-                    <div class="grid_actionsdropdown_box" id="action_menu" style="display: none;">
-                        <ul class="actionsdropdown_boxlist" id="action_list">
-                            <li><%=t.t("no.available.actions")%></li>
-                        </ul>
+                        <div class="grid_actionsdropdown_box" id="action_menu" style="display: none;">
+                            <ul class="actionsdropdown_boxlist" id="action_list">
+                                <li><%=t.t("no.available.actions")%></li>
+                            </ul>
+                        </div>
                     </div>
+                <div class="gridheader_loaderbox" id="spinning_wheel" style="border: 1px solid #999;
+                display: none;">
+                    <div class="gridheader_loader" id="icon">
+                    </div>
+                    <p id="description">
+                        Detaching Disk &hellip;</p>
                 </div>
             </div>
             <div class="grid_rows odd">
@@ -176,6 +180,12 @@
     <!--Details tab (end)-->
     <!--Snapshot tab (start)-->
     <div style="display: none;" id="tab_content_snapshot">
+    	<div class="rightpanel_mainloader_panel" style="display:none;">
+              <div class="rightpanel_mainloaderbox">
+                   <div class="rightpanel_mainloader_animatedicon"></div>
+                   <p>Loading &hellip;</p>    
+              </div>               
+        </div>
     </div> 
 </div>
 <!-- volume detail panel (end) -->