loader

app/coffee/app.coffee

@@ -21,8 +21,7 @@
 
 @taiga = taiga = {}
 
-configure = ($routeProvider, $locationProvider, $httpProvider, $provide) ->
-
+configure = ($routeProvider, $locationProvider, $httpProvider, $provide, tgLoaderProvider) ->
     $routeProvider.when("/", {templateUrl: "/partials/projects.html"})
     $routeProvider.when("/project/:pslug/", {templateUrl: "/partials/project.html"})
     $routeProvider.when("/project/:pslug/backlog", {templateUrl: "/partials/backlog.html"})
@@ -152,6 +151,7 @@ configure = ($routeProvider, $locationProvider, $httpProvider, $provide) ->
 
     $provide.factory("authHttpIntercept", ["$q", "$location", authHttpIntercept])
     $httpProvider.responseInterceptors.push('authHttpIntercept')
+    $httpProvider.interceptors.push('loaderInterceptor');
 
 
 init = ($log, $i18n, $config, $rootscope) ->
@@ -196,7 +196,8 @@ module.config([
     "$routeProvider",
     "$locationProvider",
     "$httpProvider",
-    '$provide',
+    "$provide",
+    "tgLoaderProvider",
     configure
 ])
 

app/coffee/modules/backlog/main.coffee

@@ -52,6 +52,7 @@ class BacklogController extends mixOf(taiga.Controller, taiga.PageMixin, taiga.F
         @showTags = false
 
         promise = @.loadInitialData()
+
         promise.then null, =>
             console.log "FAIL"
 

app/coffee/modules/common/loader.coffee

@@ -0,0 +1,122 @@
+taiga = @.taiga
+sizeFormat = @.taiga.sizeFormat
+
+module = angular.module("taigaCommon")
+
+LoaderDirective = (tgLoader) ->
+    link = ($scope, $el, $attrs) ->
+        tgLoader.end () ->
+            $el.removeClass("active")
+
+        $scope.$on "$routeChangeSuccess", () ->
+            tgLoader.start () ->
+                $el.addClass("active")
+
+
+    return {
+        link: link
+    }
+
+module.directive("tgLoader", ["tgLoader", LoaderDirective])
+
+Loader = () ->
+    interval = null
+    onLoad = () ->
+    startLoadTime = 0
+
+    defaultLog = {
+        request: {
+            count: 0,
+            time: 0
+        }
+        response: {
+            count: 0,
+            time: 0
+        }
+    }
+
+    defaultConfig = {
+        enabled: false,
+        minTime: 500,
+        auto: false
+    }
+
+    log = _.merge({}, defaultLog);
+    config = _.merge({}, defaultConfig);
+
+    reset = () ->
+        log = _.merge({}, defaultLog);
+        config = _.merge({}, defaultConfig);
+
+    pageLoaded = () ->
+        reset()
+
+        endTime = new Date().getTime()
+        diff = endTime - startLoadTime
+
+        if diff < config.minTime
+            timeout = config.minTime - diff
+        else
+            timeout = 0
+
+        setTimeout ( ->
+            onLoad()
+        ), timeout
+
+    autoCheckLoad = () ->
+        interval = setInterval ( ->
+            currentDate = new Date().getTime()
+
+            if log.request.count == log.response.count && currentDate - log.response.time  > 200
+                clearInterval(interval)
+                pageLoaded()
+
+        ), 100
+
+    @.add = (auto = false) ->
+        return () ->
+            config.enabled = true
+            config.auto = auto
+
+    @.$get = () ->
+        return {
+            start: (callback) ->
+                if config.enabled
+                    if config.auto
+                        autoCheckLoad()
+
+                    startLoadTime = new Date().getTime()
+                    callback()
+
+            end: (fn) ->
+                onLoad = fn
+
+            pageLoaded: () ->
+                pageLoaded()
+
+            logRequest: () ->
+                log.request.count++
+                log.request.time = new Date().getTime()
+
+            logResponse: () ->
+                log.response.count++
+                log.response.time = new Date().getTime()
+        }
+
+    return
+
+module.provider("tgLoader", Loader)
+
+loaderInterceptor = (tgLoader) ->
+    return {
+        request: (config) ->
+            tgLoader.logRequest()
+
+            return config
+        response: (response) ->
+            tgLoader.logResponse()
+
+            return response
+    }
+
+module.factory('loaderInterceptor', ['tgLoader', loaderInterceptor]);

app/index.jade

@@ -26,5 +26,7 @@ html(lang="en", ng-app="taiga")
         div.hidden.lightbox.lightbox-generic-error
             include partials/views/modules/lightbox-generic-error
 
+        include partials/views/modules/loader
+
         script(src="/js/libs.js?v=#{v}")
         script(src="/js/app.js?v=#{v}")

app/partials/views/modules/loader.jade

@@ -0,0 +1,3 @@
+.loader(tg-loader)
+    .bg
+    .info Loading ...

app/styles/components/loader.scss

@@ -0,0 +1,34 @@
+.loader {
+    bottom: 0;
+    display: none;
+    height: 100%;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    width: 100%;
+    .bg {
+        background-color: $black;
+        bottom: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: 100%;
+        z-index: 20;
+    }
+    .info {
+        background-color: $black;
+        color: $white;
+        padding: .5rem 3rem;
+        position: absolute;
+        right: 20px;
+        top: 20px;
+        z-index: 25;
+    }
+    &.active {
+        display: block;
+        .bg {
+            opacity: .7;
+        }
+    }
+}

app/styles/main.scss

@@ -41,6 +41,7 @@ $prefix-for-spec:      true;
 @import 'components/assigned-to';
 @import 'components/wysiwyg';
 @import 'components/select-color';
+@import 'components/loader';
 
 //#################################################
 //             Modules