#30 Add a page loader

TheHive-Project · May 22, 2017 · 2de4fe8 · 2de4fe8
1 parent 4dcb6b9
commit 2de4fe8
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 3 deletions.
diff --git a/ui/app/index.html b/ui/app/index.html
@@ -23,6 +23,7 @@
     <link rel="stylesheet" href="bower_components/angular-ui-notification/dist/angular-ui-notification.css" />
     <link rel="stylesheet" href="bower_components/dropzone/dist/min/dropzone.min.css" />
     <link rel="stylesheet" href="bower_components/css-spaces/dist/spaces.css" />
+    <link rel="stylesheet" href="bower_components/angular-page-loader/dist/angular-page-loader.css" />
     <!-- endbower -->
     <!-- endbuild -->
     <!-- build:css(.tmp) styles/main.css -->
@@ -39,7 +40,8 @@
 		<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
 	<![endif]-->
 </head>
-<body ng-app="cortex" class="hold-transition skin-blue layout-top-nav">
+<body ng-app="cortex" ng-cloak class="hold-transition skin-blue layout-top-nav">
+	<page-loader bg-color="#ecf0f5"></page-loader>
 	<app-container class="wrapper"></app-container>
 
     <!-- build:js(.) scripts/vendor.js -->
@@ -59,6 +61,7 @@
     <script src="bower_components/dropzone/dist/min/dropzone.min.js"></script>
     <script src="bower_components/lodash/lodash.js"></script>
     <script src="bower_components/underscore/underscore.js"></script>
+    <script src="bower_components/angular-page-loader/dist/angular-page-loader.js"></script>
     <!-- endbower -->
     <!-- endbuild -->
 

diff --git a/ui/app/scripts/app.js b/ui/app/scripts/app.js
@@ -14,7 +14,8 @@ angular.module('cortex', [
         'ui-notification',
         'angularMoment',
         'ngSanitize',
-        'angularUtils.directives.dirPagination'
+        'angularUtils.directives.dirPagination',
+        'angular-page-loader'
     ])
     .config(function(NotificationProvider) {
         NotificationProvider.setOptions({

diff --git a/ui/app/styles/main.css b/ui/app/styles/main.css
@@ -149,3 +149,7 @@ a.text-white, a.text-white:hover {
 .box-tools .pagination {
     margin: 0;
 }
+
+[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
+    display: none !important;
+}
diff --git a/ui/bower.json b/ui/bower.json
@@ -16,7 +16,8 @@
     "dropzone": "^4.3.0",
     "lodash": "^4.15.0",
     "css-spaces": "^0.3.5",
-    "underscore": "^1.8.3"
+    "underscore": "^1.8.3",
+    "angular-page-loader": "*"
   },
   "devDependencies": {
     "angular-mocks": "1.5.10"

diff --git a/ui/test/karma.conf.js b/ui/test/karma.conf.js
@@ -35,6 +35,7 @@ module.exports = function(config) {
       'bower_components/dropzone/dist/min/dropzone.min.js',
       'bower_components/lodash/lodash.js',
       'bower_components/underscore/underscore.js',
+      'bower_components/angular-page-loader/dist/angular-page-loader.js',
       'bower_components/angular-mocks/angular-mocks.js',
       // endbower
       'app/scripts/**/*.js',