Add loading style; fix random pet generator.

assets/app/controllers/pets/detail/random-controller.js

@@ -24,7 +24,7 @@
 				$scope.isLoading = true;
 
 				var promise = petService.getRandomPetExcluding( $scope.categoryID, $scope.petID );
-					
+
 				promise.then(
 					function( response ) {
 
@@ -53,7 +53,7 @@
 
 
 			// Get the render context local to this controller (and relevant params).
-			var renderContext = requestContext.getRenderContext( "standard.pets.detail.random", [ "categoryID", "petID" ] );
+			var renderContext = requestContext.getRenderContext( "standard.pets.detail", [ "categoryID", "petID" ] );
 
 
 			// --- Define Scope Variables. ---------------------- //

assets/app/css/main.css

@@ -35,6 +35,24 @@ h4 {
 a {
   color: #333333 ;
 }
+div.l-loading {
+  background-color: #262626 ;
+  bottom: 0px ;
+  left: 0px ;
+  position: fixed ;
+  right: 0px ;
+  top: 0px ;
+}
+div.l-loading p {
+  color: #F0F0F0 ;
+  font-size: 12px ;
+  font-style: italic ;
+  left: 0px ;
+  position: absolute ;
+  text-align: center ;
+  top: 48% ;
+  width: 100% ;
+}
 div.l-splash {
   margin: 30px auto 50px auto ;
   width: 600px ;

assets/app/less/loading.less

@@ -0,0 +1,20 @@
+
+div.l-loading {
+	background-color: #262626 ;
+	bottom: 0px ;
+	left: 0px ;
+	position: fixed ;
+	right: 0px ;
+	top: 0px ;
+
+	p {
+		color: #F0F0F0 ;
+		font-size: 12px ;
+		font-style: italic ;
+		left: 0px ;
+		position: absolute ;
+		text-align: center ;
+		top: 48% ;
+		width: 100% ;
+	}
+}

assets/app/less/main.less

@@ -5,6 +5,7 @@
 @import "core.less" ;
 
 // Layouts.
+@import "loading.less" ;
 @import "splash.less" ;
 @import "standard.less" ;
 

index.htm

@@ -16,10 +16,10 @@
 			the page. Once the app kicks in, however, the calculated subview will determine the
 			appropriate layout to render.
 		-->
-		<div ng-switch-when="loading">
+		<div ng-switch-when="loading" class="l-loading">
 
 			<p>
-				Loading.
+				Loading Application
 			</p>	
 
 		</div>