fixed animation glitch on first load

client/app/scripts/app.js

@@ -26,7 +26,7 @@ angular.module('app', ['ui.router.compat' /* this is for ui-router */, 'ngAnimat
 	// Parse is initialised by injecting the ParseService into the Angular app
 	$rootScope.$state = $state;
     $rootScope.$stateParams = $stateParams;
-
+    $rootScope.isViewLoading = true;
 
 
     // loading animation
@@ -37,16 +37,18 @@ angular.module('app', ['ui.router.compat' /* this is for ui-router */, 'ngAnimat
 	    $rootScope.isViewLoading = false;
 	};
 
-	$rootScope.isViewLoading = false;
 
 	$rootScope.$on('$stateChangeStart', function(ev, to, toParams, from, fromParams) {
-		// $rootScope.setBigLoading();
-		$rootScope.contentLoaded = false;
+		$rootScope.setLoading();
+		console.log('state change start')
+
+		// $rootScope.contentLoaded = false;
 	})
 
 	$rootScope.$on('$stateChangeSuccess', function (ev, to, toParams, from, fromParams) {
 		$rootScope.unsetLoading();
-		$rootScope.contentLoaded = true;
+		console.log('state change complete')
+		console.log($rootScope.isViewLoading);
 	});
 
 }]);

client/app/scripts/controllers/master-detail.js

@@ -4,7 +4,10 @@ angular.module('demo')
 
   // this controller controls navigation, navigation animations, menu and master-detail layout
 
+
+
 
+  // NB: there are a number of implementations for a menu. This one is not great, but simple enough to start with
   $scope.masterDetailCtrl = {
     // waiting on ui-router to support angular 1.2 dynamic animations properly, for now everything is 'crossfade'
     // https://github.com/angular-ui/ui-router/issues/320
@@ -110,35 +113,6 @@ angular.module('demo')
 
 
 
-
-
-  // $rootScope.$on('$stateChangeSuccess', function (ev, to, toParams, from, fromParams) {
-
-  //   if(from.name == to.name) {
-  //       // same state
-  //       $scope.masterDetailCtrl.animate = "crossfade";
-
-  //     } else if (from.name.indexOf(to.name) >= 0) {
-
-  //       // going up the tree
-  //       $scope.masterDetailCtrl.animate = "moveleft";
-
-  //     } else if(to.name.indexOf(from.name) >= 0){
-
-  //       // going deep into the tree
-  //       $scope.masterDetailCtrl.animate = "moveright";  
-
-  //     } else {
-
-  //       // no relation, fade it
-  //       $scope.masterDetailCtrl.animate = "crossfade";
-  //     }
-
-  // })
-
-    // return { enter: 'waveBackward-enter', leave: 'waveBackward-leave' };
-
-
   $scope.goBackTo = function(state) {
 
     $state.transitionTo(state);

client/app/scripts/modules/directives/templates/loading.html

@@ -1,4 +1,4 @@
-<div class="loadingMessage center-align ani ani-fast tinUpIn" style="position:fixed; margin-left: -100px; left:50%; top:100px; width:180px; z-index:9999999">
+<div class="loadingMessage center-align ani ani-fast tinUpIn" style="position:fixed; margin-left: -100px; left:50%; top:140px; width:180px; z-index:9999999">
 	<div class="row-fluid black-back opacity-6 withRadius width-padding small-top-padding small-bottom-padding">
 		<div class="pull-left loading-dark line height-med" style="width:60px"></div>
 		<div class="pull-left">

client/app/styles/ng-animate/angular-1.2/_crossfade.scss

@@ -24,3 +24,27 @@
 	// @include transition-delay(1s);
 	@include ani-delay(500ms);
 }
+
+
+// for the root ui-view on first page load
+.first-load.ng-enter {
+	@extend .ani;
+	@include ani-duration(500ms);
+}
+
+.first-load.ng-enter.ng-enter-active {
+	@include ani-name(fadeIn);
+}
+// .crossfade.ng-leave {
+// 	@include ani-duration(500ms);
+// }
+
+.first-load.ng-enter {
+	// position: absolute;
+	// width: 100%;
+	// top:0;
+	// left:0;
+	// z-index: -1;
+	// @include transition-delay(1s);
+	// @include ani-delay(500ms);
+}

client/index.html

@@ -37,14 +37,11 @@
         Please enable Javascript to experience this site :)
     </noscript>
 
-    <div class="row-fluid med-grey-back dark-dust">
+    <div class="row-fluid med-grey-back dark-dust min-height-1500">
 
       <div ng-include src="'app/views/header.html'"></div>
-      <div view-loading ng-if="isViewLoading"></div>
-      <div ui-view class="crossfade"></div>
-      <div style="z-index:-1" ng-hide="contentLoaded" class="big-top-padding absolute top left row-fluid black-back fullHeight fullWidth top-padding bottom-padding">
-            <div class="row-fluid big-top-margin line height-large loading-dark"></div>
-        </div>
+      <div view-loading ng-show="isViewLoading"></div>
+      <div ui-view class="first-load"></div>
 
     </div>