Index: components/artifactView/html/view.html
===================================================================
--- components/artifactView/html/view.html	(revision 9456)
+++ components/artifactView/html/view.html	(working copy)
@@ -48,26 +48,32 @@
         <script type="text/javascript" src="../../../../fluid-engage-core/components/guestbook/js/guestbook.js"></script>
         <script type="text/javascript" src="../../../../fluid-engage-core/framework/js/user.js"></script>
     </head>   
-    <body class="fl-theme-iphone"> 
-        <div class="flc-artifact fl-artifact">
-            <!-- Navigation Bar and Header -->
-	        <div class="flc-navigationBar fl-navbar fl-col-mixed">
-	            <!-- Back button -->
-	            <div class="fl-col-fixed fl-force-left">
-	                <a rsf:id="scr=null" class="flc-navigationBar-back fl-button fl-backButton" href="#">
-	                    <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/back.png" alt="Go back"/>
-	                </a>
-	            </div>
-	            <!-- Home button -->
-	            <div class="fl-col-fixed fl-force-left">
-	                <a rsf:id="scr=null" class="flc-navigationBar-home fl-button" href="#">
-	                    <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/home.png" alt="Go home"/>
-	                </a>
-	            </div>
-	            <!-- Page header -->
-	            <h1 class="flc-artifact-navBarTitle fl-navbar-title fl-col-flex">Catalogue for This Exhibition</h1>
-	        </div>
-	        
+    <body class="fl-theme-iphone flc-artifact fl-artifact ">
+        
+        <!-- Navigation Bar and Header -->
+        <div class="flc-navigationBar fl-navbar fl-col-mixed">
+            <!-- Back button -->
+            <div class="fl-col-fixed fl-force-left">
+                <a rsf:id="scr=null" class="flc-navigationBar-back fl-button fl-backButton fl-page-transition-link" href="#">
+                    <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/back.png" alt="Go back"/>
+                </a>
+            </div>
+            <!-- Home button -->
+            <div class="fl-col-fixed fl-force-left">
+                <a rsf:id="scr=null" class="flc-navigationBar-home fl-button fl-page-transition-link" href="#">
+                    <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/home.png" alt="Go home"/>
+                </a>
+            </div>
+            <!-- Page header -->
+            <h1 class="flc-artifact-navBarTitle fl-navbar-title fl-col-flex">Catalogue for This Exhibition</h1>
+        </div>
+        
+        <!-- loading message -->
+        <div class="fl-component-loadMessage">
+            <img class="fl-component-spinner" src="../../../../fluid-engage-core/shared/images/spinner.png" />
+        </div>
+     
+        <div class="fl-component-contents">	        
 	        <!-- My Collection sub-header -->
 	        <div class="flc-artifact-actionPanel fl-artifact-actionPanel">
 	            <div class="flc-artifact-actionButtons fl-artifact-actionButtons">
Index: components/browse/css/Browse.css
===================================================================
--- components/browse/css/Browse.css	(revision 9456)
+++ components/browse/css/Browse.css	(working copy)
@@ -1,18 +1,3 @@
-@-webkit-keyframes spinner {
-    from {
-        -webkit-transform: rotate(0deg);
-        -webkit-animation-timing-function:linear;
-    } 
-    to {
-        -webkit-transform: rotate(-360deg);
-        -webkit-animation-timing-function:linear;
-    }
-}
-
-.fl-theme-iphone {
-    background: none;
-}
-
 [class*=fl-container] [class*=fl-list]:not(.fl-thumbnails-expanded) > li a .fl-icon,
 [class*=fl-container] .fl-list-thumbnails:not(.fl-thumbnails-expanded) > li,
 [class*=fl-container] .fl-list-thumbnails:not(.fl-thumbnails-expanded) > li a {
@@ -21,29 +6,3 @@
     border-bottom-right-radius: 0px;
     border-bottom-left-radius:  0px;
 }
-
-.fl-browse-loading .fl-browse-loadMessage {
-    display: block;
-    text-align:center;
-    margin-top:100px;
-}
-
-.fl-browse-spinner {
-    -webkit-animation-name:spinner;
-    -webkit-animation-iteration-count:infinite;
-    -webkit-animation-duration:1s;
-    
-    width:50px;
-    height:50px;
-    margin:10px auto;
-    background-color:#fff;
-    
-    -webkit-mask-box-image: url(../images/spinner_large_mask.png);
-    
-}
-
-.fl-browse-loadMessage,
-.fl-browse-loading  .fl-browse-contents, 
-.fl-browse-loading .fl-browse-descriptionContainer {
-    display: none;
-}
Index: components/browse/html/browse.html
===================================================================
--- components/browse/html/browse.html	(revision 9456)
+++ components/browse/html/browse.html	(working copy)
@@ -34,18 +34,18 @@
         <script type="text/javascript" src="../../../../fluid-engage-core/framework/js/loadData.js"></script>
         
     </head>
-    <body class="flc-browse fl-theme-iphone fl-browse-loading">
+    <body class="flc-browse fl-theme-iphone">
         <!-- Navigation Bar and Header -->
         <div class="flc-navigationBar fl-navbar fl-col-mixed">
             <!-- Back button -->
             <div class="fl-col-fixed fl-force-left">
-                <a rsf:id="scr=null" class="flc-navigationBar-back fl-button fl-backButton" href="#">
+                <a rsf:id="scr=null" class="flc-navigationBar-back fl-button fl-backButton fl-page-transition-link" href="#">
                     <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/back.png" alt="Go back"/>
                 </a>
             </div>
             <!-- Home button -->
             <div class="fl-col-fixed fl-force-left">
-                <a rsf:id="scr=null" class="flc-navigationBar-home fl-button" href="#">
+                <a rsf:id="scr=null" class="flc-navigationBar-home fl-button fl-page-transition-link" href="#">
                     <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/home.png" alt="Go home"/>
                 </a>
             </div>
@@ -61,9 +61,8 @@
         </div>
         
         <!-- loading message -->
-        <div class="fl-browse-loadMessage fl-note fl-bevel-white">
-            Loading...
-            <div class="fl-browse-spinner"></div>
+        <div class="fl-component-loadMessage">
+            <img class="fl-component-spinner" src="../../../../fluid-engage-core/shared/images/spinner.png" />
         </div>
         
         <div class="flc-browse-descriptionContainer fl-browse-descriptionContainer">
@@ -71,7 +70,7 @@
                 Description
             </p>
         </div>
-        <div class="flc-browse-contents fl-browse-contents">
+        <div class="flc-browse-contents fl-browse-contents fl-component-contents">
             <div class="flc-cabinet-drawer">
                 <div class="flc-cabinet-handle fl-engage-tappable">
                     <h2 class="flc-cabinet-header">Header</h2>
Index: components/browse/js/Browse.js
===================================================================
--- components/browse/js/Browse.js	(revision 9456)
+++ components/browse/js/Browse.js	(working copy)
@@ -16,24 +16,6 @@
 
 (function ($) {
     
-    /**
-     * Removes the loading style from the component, so that the rendered page is displayed
-     * 
-     * @param {Object} that, the component
-     */
-    var removeLoadStyling = function (that) {
-        that.container.removeClass(that.options.styles.load);
-    };
-    
-    /**
-     * Binds the after render event to a lister that calls the removeLoadStyling function
-     * 
-     * @param {Object} that, the component
-     */
-    var bindEvents = function (that) {
-        that.events.afterRender.addListener(removeLoadStyling);
-    };
-    
     var initSubcomponents = function (that) {
         if (that.options.useCabinet) {
             that.cabinet = fluid.initSubcomponent(that, "cabinet", [that.locate("browseContents"), fluid.COMPONENT_OPTIONS]);
@@ -115,7 +97,6 @@
      * @param {Object} that, the component
      */
     var setup = function (that) {
-        bindEvents(that);
         var messageLocator = fluid.messageLocator(that.options.strings, fluid.stringTemplate);
         var selectorsToIgnore = ["browseDescription", "browseContents"];
         
@@ -201,7 +182,6 @@
         },
         
         styles: {
-            load: "fl-browse-loading",
             browseContents: "fl-browse-contents",
             browseDescription: "fl-browse-description",
             listHeaderDescription: "fl-cabinet-headerWithDescription"
Index: components/catalogue/html/view.html
===================================================================
--- components/catalogue/html/view.html	(revision 9456)
+++ components/catalogue/html/view.html	(working copy)
@@ -31,33 +31,39 @@
         <script type="text/javascript" src="../../../../fluid-engage-core/components/navigationList/js/NavigationList.js"></script>
         <script type="text/javascript" src="../../../../fluid-engage-core/framework/js/loadData.js"></script>
     </head>   
-    <body class="fl-theme-iphone">
-        <div class="flc-catalogue-container fl-catalogue">
-            
-            <!-- Navigation Bar and Header -->
-            <div class="flc-navigationBar fl-navbar fl-col-mixed">
-                <!-- Back button -->
-                <div class="fl-col-fixed fl-force-left">
-                    <a rsf:id="scr=null" class="flc-navigationBar-back fl-button fl-backButton" href="#">
-                        <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/back.png" alt="Go back"/>
-                    </a>
-                </div>
-                <!-- Home button -->
-                <div class="fl-col-fixed fl-force-left">
-                    <a rsf:id="scr=null" class="flc-navigationBar-home fl-button" href="#">
-                        <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/home.png" alt="Go home"/>
-                    </a>
-                </div>
-                <!-- Toggle button -->
-                <div class="fl-col-fixed fl-force-right">
-                    <a rsf:id="scr=null" class="flc-navigationBar-toggle fl-button" href="#">
-                        <img class="flc-navigationBar-toggle-grid fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/toggle-grid.png" alt="Switch to grid layout"/>
-                        <img class="flc-navigationBar-toggle-list fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/toggle-list.png" alt="Switch to list layout"/>
-                    </a>
-                </div>
-                <!-- Page header -->
-                <h1 class="flc-catalogue-title fl-navbar-title fl-col-flex">Catalogue for This Exhibition</h1>
+    <body class="fl-theme-iphone flc-catalogue-container fl-catalogue">
+    
+        <!-- Navigation Bar and Header -->
+        <div class="flc-navigationBar fl-navbar fl-col-mixed">
+            <!-- Back button -->
+            <div class="fl-col-fixed fl-force-left">
+                <a rsf:id="scr=null" class="flc-navigationBar-back fl-button fl-backButton fl-page-transition-link" href="#">
+                    <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/back.png" alt="Go back"/>
+                </a>
             </div>
+            <!-- Home button -->
+            <div class="fl-col-fixed fl-force-left">
+                <a rsf:id="scr=null" class="flc-navigationBar-home fl-button fl-page-transition-link" href="#">
+                    <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/home.png" alt="Go home"/>
+                </a>
+            </div>
+            <!-- Toggle button -->
+            <div class="fl-col-fixed fl-force-right">
+                <a rsf:id="scr=null" class="flc-navigationBar-toggle fl-button" href="#">
+                    <img class="flc-navigationBar-toggle-grid fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/toggle-grid.png" alt="Switch to grid layout"/>
+                    <img class="flc-navigationBar-toggle-list fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/toggle-list.png" alt="Switch to list layout"/>
+                </a>
+            </div>
+            <!-- Page header -->
+            <h1 class="flc-catalogue-title fl-navbar-title fl-col-flex">Catalogue for This Exhibition</h1>
+        </div>
+        
+        <!-- loading message -->
+        <div class="fl-component-loadMessage">
+            <img class="fl-component-spinner" src="../../../../fluid-engage-core/shared/images/spinner.png" />
+        </div>
+    
+        <div class="fl-component-contents">
  
             <div class="fl-catalogue-linkToArtifactsHeader fl-list-menu">
                 <a href="#" class="flc-catalogue-linkToArtifacts fl-catalogue-linkToArtifacts">
Index: components/codeEntry/html/codeEntry.html
===================================================================
--- components/codeEntry/html/codeEntry.html	(revision 9456)
+++ components/codeEntry/html/codeEntry.html	(working copy)
@@ -17,24 +17,30 @@
         <script type="text/javascript" src="../../../../fluid-infusion/src/webapp/lib/jquery/core/js/jquery.js"></script>
         <script type="text/javascript" src="../../../../fluid-infusion/src/webapp/lib/json/js/json2.js"></script>
         <script type="text/javascript" src="../../../../fluid-infusion/src/webapp/framework/core/js/Fluid.js"></script>
+        <script type="text/javascript" src="../../../../fluid-engage-core/framework/js/iPhoneChromeless.js"></script>
         <script type="text/javascript" src="../../../../fluid-engage-core/components/navigationBar/js/NavigationBar.js"></script>	
    		<script type="text/javascript" src="../../../../fluid-engage-core/components/codeEntry/js/CodeEntryView.js"></script>
 	</head>
-	<body class="fl-theme-iphone">
+	<body class="fl-theme-iphone flc-codeEntry">
 		
-		<div class="flc-codeEntry">
-		    
-            <!-- Navigation Bar and Header -->
-            <div class="flc-navigationBar fl-navbar fl-col-mixed">
-                <!-- Back button -->
-                <div class="fl-col-fixed fl-force-left">
-                    <a rsf:id="scr=null" class="flc-navigationBar-back fl-button fl-backButton" href="#">
-                        <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/back.png" alt="Go back"/>
-                    </a>
-                </div>
-                <!-- Page header -->
-                <h1 class="flc-codeEntry-title fl-navbar-title fl-col-flex">Enter an Object Code</h1>
+		<!-- Navigation Bar and Header -->
+        <div class="flc-navigationBar fl-navbar fl-col-mixed">
+            <!-- Back button -->
+            <div class="fl-col-fixed fl-force-left">
+                <a rsf:id="scr=null" class="flc-navigationBar-back fl-button fl-backButton fl-page-transition-link" href="#">
+                    <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/back.png" alt="Go back"/>
+                </a>
             </div>
+            <!-- Page header -->
+            <h1 class="flc-codeEntry-title fl-navbar-title fl-col-flex">Enter an Object Code</h1>
+        </div>
+        
+        <!-- loading message -->
+        <div class="fl-component-loadMessage">
+            <img class="fl-component-spinner" src="../../../../fluid-engage-core/shared/images/spinner.png" />
+        </div>
+		
+		<div class="fl-component-contents">
 			
         	<div class="flc-codeEntry-headMessage fl-codeEntry-headMessage"></div>            
 	
Index: components/exhibition/html/about.html
===================================================================
--- components/exhibition/html/about.html	(revision 9456)
+++ components/exhibition/html/about.html	(working copy)
@@ -27,27 +27,31 @@
         <script type="text/javascript" src="../../../../fluid-engage-core/framework/js/loadData.js"></script>
         <script type="text/javascript" src="../../../../fluid-engage-core/framework/js/iPhoneChromeless.js"></script>
     </head>   
-    <body class="fl-theme-iphone">
-        <div class="flc-exhibition-container">
-            
-            <!-- Navigation Bar and Header -->
-            <div class="flc-navigationBar fl-navbar fl-col-mixed">
-                <!-- Back button -->
-                <div class="fl-col-fixed fl-force-left">
-                    <a rsf:id="scr=null" class="flc-navigationBar-back fl-button fl-backButton" href="#">
-                        <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/back.png" alt="Go back"/>
-                    </a>
-                </div>
-                <!-- Home button -->
-                <div class="fl-col-fixed fl-force-left">
-                    <a rsf:id="scr=null" class="flc-navigationBar-home fl-button" href="#">
-                        <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/home.png" alt="Go home"/>
-                    </a>
-                </div>
-                <!-- Page header -->
-                <h1 class="flc-exhibition-navBarTitle fl-navbar-title fl-col-flex">About This Exhibition</h1>
+    <body class="fl-theme-iphone flc-exhibition-container">
+        <!-- Navigation Bar and Header -->
+        <div class="flc-navigationBar fl-navbar fl-col-mixed">
+            <!-- Back button -->
+            <div class="fl-col-fixed fl-force-left">
+                <a rsf:id="scr=null" class="flc-navigationBar-back fl-button fl-backButton fl-page-transition-link" href="#">
+                    <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/back.png" alt="Go back"/>
+                </a>
             </div>
-            
+            <!-- Home button -->
+            <div class="fl-col-fixed fl-force-left">
+                <a rsf:id="scr=null" class="flc-navigationBar-home fl-button fl-page-transition-link" href="#">
+                    <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/home.png" alt="Go home"/>
+                </a>
+            </div>
+            <!-- Page header -->
+            <h1 class="flc-exhibition-navBarTitle fl-navbar-title fl-col-flex">About This Exhibition</h1>
+        </div>
+        
+        <!-- loading message -->
+        <div class="fl-component-loadMessage">
+            <img class="fl-component-spinner" src="../../../../fluid-engage-core/shared/images/spinner.png" />
+        </div>
+        
+        <div class="fl-component-contents">            
             <div class="fl-exhibition-content">
                 <div class="fl-col-mixed">
                     <img src="../images/a.jpg" alt="Exhibition Image" class="flc-exhibition-image fl-exhibition-image fl-col-fixed fl-force-left" />
Index: components/exhibition/html/view.html
===================================================================
--- components/exhibition/html/view.html	(revision 9456)
+++ components/exhibition/html/view.html	(working copy)
@@ -43,27 +43,32 @@
         <link type="text/css" rel="stylesheet" href="../../guestbook/css/guestbook.css" />
         
     </head>   
-    <body class="fl-theme-iphone">
-        <div class="flc-exhibition-container fl-exhibition">
-            
-            <!-- Navigation Bar and Header -->
-            <div class="flc-navigationBar fl-navbar fl-col-mixed">
-                <!-- Back button -->
-                <div class="fl-col-fixed fl-force-left">
-                    <a rsf:id="scr=null" class="flc-navigationBar-back fl-button fl-backButton" href="#">
-                        <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/back.png" alt="Go back"/>
-                    </a>
-                </div>
-                <!-- Home button -->
-                <div class="fl-col-fixed fl-force-left">
-                    <a rsf:id="scr=null" class="flc-navigationBar-home fl-button" href="#">
-                        <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/home.png" alt="Go home"/>
-                    </a>
-                </div>
-                <!-- Page header -->
-                <h1 class="flc-exhibition-navBarTitle fl-navbar-title fl-col-flex">Exhibition View</h1>
+    <body class="fl-theme-iphone flc-exhibition-container fl-exhibition">
+    
+        <!-- Navigation Bar and Header -->
+        <div class="flc-navigationBar fl-navbar fl-col-mixed">
+            <!-- Back button -->
+            <div class="fl-col-fixed fl-force-left">
+                <a rsf:id="scr=null" class="flc-navigationBar-back fl-button fl-backButton fl-page-transition-link" href="#">
+                    <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/back.png" alt="Go back"/>
+                </a>
             </div>
-
+            <!-- Home button -->
+            <div class="fl-col-fixed fl-force-left">
+                <a rsf:id="scr=null" class="flc-navigationBar-home fl-button fl-page-transition-link" href="#">
+                    <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/home.png" alt="Go home"/>
+                </a>
+            </div>
+            <!-- Page header -->
+            <h1 class="flc-exhibition-navBarTitle fl-navbar-title fl-col-flex">Exhibition View</h1>
+        </div>
+        
+        <!-- loading message -->
+        <div class="fl-component-loadMessage">
+            <img class="fl-component-spinner" src="../../../../fluid-engage-core/shared/images/spinner.png" />
+        </div>
+    
+        <div class="fl-component-contents">
             <ol class="fl-list-menu">
                 <li>
                     <h2 class="flc-exhibition-title fl-exhibition-title">title</h2>
Index: components/guestbook/html/comment.html
===================================================================
--- components/guestbook/html/comment.html	(revision 9456)
+++ components/guestbook/html/comment.html	(working copy)
@@ -27,21 +27,28 @@
         <script type="text/javascript" src="../../../../fluid-engage-core/framework/js/loadData.js" rsf:id="scr=ignore"></script>
         <script type="text/javascript" src="../../../../fluid-engage-core/framework/js/iPhoneChromeless.js"></script>
     </head>
-    <body class="fl-theme-iphone">
+    <body class="fl-theme-iphone flc-guestbook-container">
+    
+        <!-- Navigation Bar and Header -->
+        <div class="flc-navigationBar fl-navbar fl-col-mixed">
+            <!-- Back button -->
+            <div class="fl-col-fixed fl-force-left">
+                <a class="flc-navigationBar-back fl-button fl-backButton fl-page-transition-link" href="#">
+                    <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/back.png" alt="Go back"/>
+                </a>
+            </div>
+            <!-- Page header -->
+            <h1 class="flc-guestbook-commentEntry fl-navbar-title fl-col-flex">Comment entry</h1>
+        </div>
+        
+        <!-- loading message -->
+        <div class="fl-component-loadMessage">
+            <img class="fl-component-spinner" src="../../../../fluid-engage-core/shared/images/spinner.png" />
+        </div>
+    
         <!--DISREPUTABLE TEMPLATE BOUNDARY-->
-        <div class="flc-guestbook-container" >
+        <div class="fl-component-contents" >
         
-            <!-- Navigation Bar and Header -->
-            <div class="flc-navigationBar fl-navbar fl-col-mixed">
-                <!-- Back button -->
-                <div class="fl-col-fixed fl-force-left">
-                    <a class="flc-navigationBar-back fl-button fl-backButton" href="#">
-                        <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/back.png" alt="Go back"/>
-                    </a>
-                </div>
-                <!-- Page header -->
-                <h1 class="flc-guestbook-commentEntry fl-navbar-title fl-col-flex">Comment entry</h1>
-            </div>
             <form class="flc-guestbook-form">
 	            <textarea class="flc-guestbook-text fl-guestbook-textarea-width fl-guestbook-textarea-height"></textarea>
 	            <div class="fl-push"> </div>
Index: components/guestbook/html/guestbook.html
===================================================================
--- components/guestbook/html/guestbook.html	(revision 9456)
+++ components/guestbook/html/guestbook.html	(working copy)
@@ -37,27 +37,33 @@
         <script type="text/javascript" src="../../../../fluid-engage-core/framework/js/loadData.js" rsf:id="scr=ignore"></script>
         <script type="text/javascript" src="../../../../fluid-engage-core/framework/js/iPhoneChromeless.js"></script>
     </head>
-    <body class="fl-theme-iphone">
+    <body class="fl-theme-iphone flc-guestbook-container fl-guestbook">
+    
+        <!-- Navigation Bar and Header -->
+        <div class="flc-navigationBar fl-navbar fl-col-mixed">
+            <!-- Back button -->
+            <div class="fl-col-fixed fl-force-left">
+                <a class="flc-navigationBar-back fl-button fl-backButton fl-page-transition-link" href="#">
+                    <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/back.png" alt="Go back"/>
+                </a>
+            </div>
+            <!-- Home button -->
+            <div class="fl-col-fixed fl-force-left">
+                <a class="flc-navigationBar-home fl-button fl-page-transition-link" href="#">
+                    <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/home.png" alt="Go home"/>
+                </a>
+            </div>
+            <!-- Page header -->
+            <h1 class="flc-catalogue-title fl-navbar-title fl-col-flex">Guestbook for This Exhibition</h1>
+        </div>
+        
+        <!-- loading message -->
+        <div class="fl-component-loadMessage">
+            <img class="fl-component-spinner" src="../../../../fluid-engage-core/shared/images/spinner.png" />
+        </div>
+        
         <!--DISREPUTABLE TEMPLATE BOUNDARY-->
-        <div class="flc-guestbook-container fl-guestbook" >
-                        <!-- Navigation Bar and Header -->
-            <div class="flc-navigationBar fl-navbar fl-col-mixed">
-                <!-- Back button -->
-                <div class="fl-col-fixed fl-force-left">
-                    <a class="flc-navigationBar-back fl-button fl-backButton" href="#">
-                        <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/back.png" alt="Go back"/>
-                    </a>
-                </div>
-                <!-- Home button -->
-                <div class="fl-col-fixed fl-force-left">
-                    <a class="flc-navigationBar-home fl-button" href="#">
-                        <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/home.png" alt="Go home"/>
-                    </a>
-                </div>
-                <!-- Page header -->
-                <h1 class="flc-catalogue-title fl-navbar-title fl-col-flex">Guestbook for This Exhibition</h1>
-            </div>
-            
+        <div class="fl-component-contents" >
             <div class="flc-guestbook-addnote fl-guestbook-addnote">
                <div class="fl-centered">
                    <a class="flc-guestbook-addnote-control" href="comment.html">
Index: components/myCollection/html/myCollection.html
===================================================================
--- components/myCollection/html/myCollection.html	(revision 9469)
+++ components/myCollection/html/myCollection.html	(working copy)
@@ -32,32 +32,39 @@
 		
 	</head>
 	<body class="flc-myCollection fl-theme-iphone">
-		<div class="flc-myCollection-container">
+	
+	    <!-- Navigation Bar and Header -->
+        <div class="flc-navigationBar fl-navbar fl-col-mixed">
+            <!-- Back button -->
+            <div class="fl-col-fixed fl-force-left">
+                <a rsf:id="scr=null" class="flc-navigationBar-back fl-button fl-backButton fl-page-transition-link" href="#">
+                    <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/back.png" alt="Go back"/>
+                </a>
+            </div>
+            <!-- Home button -->
+            <div class="fl-col-fixed fl-force-left">
+                <a rsf:id="scr=null" class="flc-navigationBar-home fl-button fl-page-transition-link" href="#">
+                    <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/home.png" alt="Go home"/>
+                </a>
+            </div>
+            <!-- Toggle button -->
+            <div class="fl-col-fixed fl-force-right">
+                <a rsf:id="scr=null" class="flc-navigationBar-toggle fl-button" href="#">
+                    <img class="flc-navigationBar-toggle-grid fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/toggle-grid.png" alt="Switch to grid layout"/>
+                    <img class="flc-navigationBar-toggle-list fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/toggle-list.png" alt="Switch to list layout"/>
+                </a>
+            </div>
+            <!-- Page header -->
+            <h1 class="flc-myCollection-title fl-navbar-title fl-col-flex">My Collection</h1>
+        </div>
+        
+        <!-- loading message -->
+        <div class="fl-component-loadMessage">
+            <img class="fl-component-spinner" src="../../../../fluid-engage-core/shared/images/spinner.png" />
+        </div>
+	
+		<div class="flc-myCollection-container fl-component-contents">
 					
-		    <!-- Navigation Bar and Header -->
-            <div class="flc-navigationBar fl-navbar fl-col-mixed">
-                <!-- Back button -->
-                <div class="fl-col-fixed fl-force-left">
-                    <a rsf:id="scr=null" class="flc-navigationBar-back fl-button fl-backButton" href="#">
-                        <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/back.png" alt="Go back"/>
-                    </a>
-                </div>
-                <!-- Home button -->
-                <div class="fl-col-fixed fl-force-left">
-                    <a rsf:id="scr=null" class="flc-navigationBar-home fl-button" href="#">
-                        <img class="fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/home.png" alt="Go home"/>
-                    </a>
-                </div>
-                <!-- Toggle button -->
-                <div class="fl-col-fixed fl-force-right">
-                    <a rsf:id="scr=null" class="flc-navigationBar-toggle fl-button" href="#">
-                        <img class="flc-navigationBar-toggle-grid fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/toggle-grid.png" alt="Switch to grid layout"/>
-                        <img class="flc-navigationBar-toggle-list fl-button-inner fl-button-icon" src="../../../../fluid-engage-core/shared/images/toggle-list.png" alt="Switch to list layout"/>
-                    </a>
-                </div>
-                <!-- Page header -->
-                <h1 class="flc-myCollection-title fl-navbar-title fl-col-flex">My Collection</h1>
-            </div>
             <div class="fl-myCollection-actionPanel">
                 <div class="fl-myCollection-actionButtons">
                     <a rsf:id="scr=null" class="flc-myCollection-sendEmailButton fl-myCollection-action-button fl-myCollection-send fl-button" href="#">Send</a>
Index: framework/js/iPhoneChromeless.js
===================================================================
--- framework/js/iPhoneChromeless.js	(revision 9456)
+++ framework/js/iPhoneChromeless.js	(working copy)
@@ -13,12 +13,20 @@
 "use strict";
 
 (function ($) {
+    
+    var enableSpinner = function () {
+        $("body").addClass("fl-component-loading");
+    };
 
     $(function () {
         $("a:not([href^=#])").live("click", function (evt) {
+            enableSpinner();
             window.location = $(this).attr("href");
             evt.preventDefault();
         });
+        $(".fl-page-transition-link").live("click", function (evt) {
+            enableSpinner();
+        });
     });
     
 })(jQuery);
Index: shared/css/engage-mobile.css
===================================================================
--- shared/css/engage-mobile.css	(revision 9456)
+++ shared/css/engage-mobile.css	(working copy)
@@ -2,6 +2,37 @@
     background: none;
 }
 
+@-webkit-keyframes spinner {
+    from {
+        -webkit-transform: rotate(0deg);
+        -webkit-animation-timing-function:linear;
+    } 
+    to {
+        -webkit-transform: rotate(-360deg);
+        -webkit-animation-timing-function:linear;
+    }
+}
+
+.fl-component-loading .fl-component-loadMessage {
+    display: block;
+    text-align:center;
+    margin-top:100px;
+}
+
+.fl-component-spinner {
+    -webkit-animation-name:spinner;
+    -webkit-animation-iteration-count:infinite;
+    -webkit-animation-duration:1s;    
+    width:50px;
+    height:50px;
+    margin:10px auto;
+}
+
+.fl-component-loadMessage,
+.fl-component-loading  .fl-component-contents {
+    display: none;
+}
+
 .fl-theme-iphone a,
 .fl-theme-iphone input,
 .fl-theme-iphone textarea,
Index: shared/images/spinner.gif
===================================================================
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream

Property changes on: shared\images\spinner.gif
___________________________________________________________________
Added: svn:mime-type
   + application/octet-stream

Index: shared/images/spinner.png
===================================================================
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream

Property changes on: shared\images\spinner.png
___________________________________________________________________
Added: svn:mime-type
   + application/octet-stream

Index: shared/images/spinner2.png
===================================================================
Cannot display: file marked as a binary type.
svn:mime-type = application/octet-stream

Property changes on: shared\images\spinner2.png
___________________________________________________________________
Added: svn:mime-type
   + application/octet-stream

