Skip to content

Commit 26804b6

Browse files
j-keckj-keck
committed
frontend: show spinner when loading in process
1 parent 9e5c3f7 commit 26804b6

File tree

3 files changed

+88
-9
lines changed

3 files changed

+88
-9
lines changed

‎webapp/app.js‎

Lines changed: 47 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,36 @@ zsd.config(['$routeProvider', function($routeProvider){
1616

1717
zsd.config(['$httpProvider', function($httpProvider){
1818
$httpProvider.interceptors.push('HTTPErrorInterceptor');
19+
$httpProvider.interceptors.push('HTTPActivityInterceptor');
1920
}]);
2021

21-
zsd.factory('HTTPErrorInterceptor', ['$q', '$rootScope', function($q, $rootScope){
22+
zsd.factory('HTTPActivityInterceptor', ['$q', '$rootScope', '$timeout', function($q, $rootScope, $timeout){
23+
var activityCounter = 0;
24+
var timeoutHandlers = [];
2225
return {
23-
'requestError': function(rejection){
24-
console.log("requestError");
25-
console.log(rejection);
26-
return $q.reject(rejection);
26+
'request': function(config){
27+
activityCounter++;
28+
$rootScope.$broadcast('http-activity', activityCounter);
29+
30+
return config
31+
},
32+
'response': function(response){
33+
activityCounter--;
34+
$rootScope.$broadcast('http-activity', activityCounter);
35+
36+
return response;
2737
},
38+
'responseError': function(rejection){
39+
activityCounter--;
40+
$rootScope.$broadcast('http-activity', activityCounter);
41+
42+
return $q.reject(rejection);
43+
}
44+
};
45+
}]);
46+
47+
zsd.factory('HTTPErrorInterceptor', ['$q', '$rootScope', function($q, $rootScope){
48+
return {
2849
'responseError': function(rejection){
2950
// 406 are handled in the controller (file size limit)
3051
if(rejection.status !== 406){
@@ -135,7 +156,7 @@ zsd.directive('snapshots', [function(){
135156

136157
// https://github.com/angular/angular.js/issues/339
137158
zsd.directive('embedSrc', function () {
138-
return {
159+
return {
139160
restrict: 'A',
140161
link: function (scope, element, attrs) {
141162
var current = element;
@@ -211,10 +232,8 @@ zsd.directive('dirBrowser', ['Backend', function(Backend){
211232
};
212233
}]);
213234

214-
zsd.controller('MainCtrl', ['$location', '$rootScope', 'Config', function($location, $rootScope, Config){
235+
zsd.controller('MainCtrl', ['$location', '$rootScope', '$timeout', 'Config', function($location, $rootScope, $timeout, Config){
215236
var self = this;
216-
217-
218237

219238
Config.promise.then(function(){
220239
self.config = Config.config();
@@ -223,6 +242,25 @@ zsd.controller('MainCtrl', ['$location', '$rootScope', 'Config', function($locat
223242
$rootScope.$on('response-error', function(event, args){
224243
self.error = args.data;
225244
});
245+
246+
247+
$rootScope.$on('http-activity', function(event, args){
248+
// first http request pending
249+
if(typeof self.timeoutHndl === 'undefined'){
250+
// delayed - only show spinner when duration > 'delay'
251+
var delay = 1000;
252+
self.timeoutHndl = $timeout(function(){
253+
self.loading = true;
254+
}, delay);
255+
}
256+
257+
// no more http request pending
258+
if(args === 0){
259+
$timeout.cancel(self.timeoutHndl);
260+
delete self.timeoutHndl;
261+
self.loading = false;
262+
}
263+
});
226264

227265

228266
self.activeClassIfAt = function(path){

‎webapp/index.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<head>
33
<title>ZFS-Snap-Diff</title>
44
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
5+
<link href="zsd.css" rel="stylesheet" media="screen">
56
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
67
<link rel="stylesheet" type="text/css" href="lib/jsdifflib/diffview.css"></link>
78

@@ -76,6 +77,10 @@
7677
{{mainCtrl.error}}
7778
</div>
7879

80+
<!-- loading spinner -->
81+
<div class="spinner" ng-show="mainCtrl.loading">
82+
</div>
83+
7984
<!-- content -->
8085
<div ng-view/>
8186

‎webapp/zsd.css‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
/* loading spinner
2+
from: http://stackoverflow.com/a/20013732
3+
*/
4+
.spinner {
5+
height:60px;
6+
width:60px;
7+
margin:0px auto;
8+
position:relative;
9+
-webkit-animation: rotation .6s infinite linear;
10+
-moz-animation: rotation .6s infinite linear;
11+
-o-animation: rotation .6s infinite linear;
12+
animation: rotation .6s infinite linear;
13+
border-left:6px solid rgba(0,174,239,.15);
14+
border-right:6px solid rgba(0,174,239,.15);
15+
border-bottom:6px solid rgba(0,174,239,.15);
16+
border-top:6px solid rgba(0,174,239,.8);
17+
border-radius:100%;
18+
}
19+
20+
@-webkit-keyframes rotation {
21+
from {-webkit-transform: rotate(0deg);}
22+
to {-webkit-transform: rotate(359deg);}
23+
}
24+
@-moz-keyframes rotation {
25+
from {-moz-transform: rotate(0deg);}
26+
to {-moz-transform: rotate(359deg);}
27+
}
28+
@-o-keyframes rotation {
29+
from {-o-transform: rotate(0deg);}
30+
to {-o-transform: rotate(359deg);}
31+
}
32+
@keyframes rotation {
33+
from {transform: rotate(0deg);}
34+
to {transform: rotate(359deg);}
35+
}
36+
/* end loading spinner */

0 commit comments

Comments
 (0)