feat(core): adds app loading screen

Show loading screen before ng starts up Adds ngAnimate Closes #118
NCI-GDC · Nov 17, 2014 · 229823d · 229823d
1 parent 2ff4c16
commit 229823d
Show file tree

Hide file tree

Showing 8 changed files with 69 additions and 7 deletions.
diff --git a/app/index.html b/app/index.html
@@ -36,7 +36,13 @@
 <body>
 
 <nga-header></nga-header>
+<div data-ng-if="!loaded" class="app-loading">
+  <i class="fa fa-circle-o-notch fa-spin fa-5x"></i>
+</div>
 <noscript>
+  <style>
+    #loadingScreen { display: none; }
+  </style>
   <header class="navbar navbar-default navbar-static-top">
     <div class="container-fluid">
       <div class="navbar-header">
@@ -54,6 +60,7 @@
     Javascript is required to use the features of this website.
   </p>
 </noscript>
+
 <div data-ui-view></div>
 
 <!-- CDN Vendor Files -->
@@ -70,6 +77,7 @@
 <!-- Angular Plugins -->
 <!-- build:js /js/ng-plugins.js -->
 <script src="/libs/angular-cache/dist/angular-cache.js"></script>
+<script src="/libs/angular-animate/angular-animate.js"></script>
 <script src="/libs/angular-ui-router/release/angular-ui-router.js"></script>
 <script src="/libs/angular-ui-bootstrap-bower/ui-bootstrap-tpls.js"></script>
 <script src="/libs/restangular/dist/restangular.js"></script>

diff --git a/app/scripts/app.ts b/app/scripts/app.ts
@@ -1,6 +1,7 @@
 declare module ngApp {
   interface IRootScope extends ng.IScope {
     pageTitle: string;
+    loaded: boolean;
   }
 }
 
@@ -20,6 +21,7 @@ function appRun(gettextCatalog) {
 
 angular
     .module("ngApp", [
+      "ngAnimate",
       "ui.router.state",
       "ui.bootstrap",
       "restangular",

diff --git a/app/scripts/core/core.services.ts b/app/scripts/core/core.services.ts
@@ -7,12 +7,12 @@ module ngApp.core.services {
   class CoreService implements ICoreService {
     /* @ngInject */
     constructor(private $rootScope: ngApp.IRootScope) {
+      this.$rootScope.loaded = true
     }
 
     setPageTitle(title: string): void {
       this.$rootScope.pageTitle = title;
     }
-
   }
 
   angular

diff --git a/app/scripts/home/home.controllers.ts b/app/scripts/home/home.controllers.ts
@@ -1,16 +1,19 @@
 module ngApp.home.controllers {
+  import ICoreService = ngApp.core.services.ICoreService;
+
   export interface IHomeController {
   }
 
   class HomeController implements IHomeController {
     /* @ngInject */
-    constructor(private $rootScope: ngApp.IRootScope) {
-      $rootScope.pageTitle = "Home";
+    constructor(private CoreService: ICoreService) {
+      CoreService.setPageTitle("Welcome");
     }
   }
 
   angular
       .module("home.controller", [
+        "core.services"
       ])
       .controller("HomeController", HomeController);
 }
diff --git a/app/scripts/home/module.ts b/app/scripts/home/module.ts
@@ -6,7 +6,7 @@ module ngApp.home {
     $stateProvider.state("home", {
       url: "/",
       controller: "HomeController as hc",
-      templateUrl: "home/templates/index.html"
+      templateUrl: "home/templates/home.html"
     });
   }
 

diff --git a/app/scripts/home/templates/index.html → app/scripts/home/templates/home.html b/app/scripts/home/templates/index.html → app/scripts/home/templates/home.html
diff --git a/app/styles/app.less b/app/styles/app.less
@@ -1,6 +1,13 @@
-// angular-ui-bootstrap fix
+// angular cloak
+[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
+  display: none !important;
+
+}
 
-.nav, .pagination, .carousel, a { cursor: pointer; }
+// angular-ui-bootstrap fix
+.nav, .pagination, .carousel, a {
+  cursor: pointer;
+}
 
 /* UTILS */
 .no-padding-left {
@@ -11,6 +18,46 @@
   padding-left: 15px;
 }
 
+.app-loading {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background: #A90101;
+  z-index: 1000;
+}
+
+.app-loading i {
+  color: #fff;
+  z-index: 1010;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  margin-top: -50px;
+  margin-left: -50px;
+  line-height: 100px;
+  text-align: center;
+  vertical-align: bottom;
+  height: 100px;
+  width: 100px;
+}
+
+.app-loading.ng-enter, .app-loading.ng-leave {
+  -webkit-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
+  transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
+}
+
+.app-loading.ng-enter,
+.app-loading.ng-leave.ng-leave-active {
+  opacity: 0;
+}
+
+.app-loading.ng-leave,
+.app-loading.ng-enter.ng-enter-active {
+  opacity: 1;
+}
+
 // Styling override to prevent having an extra thick border on first row
 // when there is also a header
 .table-bordered > thead > tr > th,

diff --git a/bower.json b/bower.json
@@ -15,7 +15,9 @@
     "jquery": "2.1.1",
     "lodash": "2.4.1",
     "restangular": "1.4.0",
-    "angular-gettext": "~1.1.4"
+    "angular-gettext": "~1.1.4",
+    "moment": "~2.8.3",
+    "angular-animate": "~1.3.2"
   },
   "resolutions": {
     "angular": "~1.3.1"