feat(app): Loading spinner on page XHR requests

- Without the spinner showing, the user experience can be confusing and jarring on long requests.
NCI-GDC · Jan 6, 2015 · b4e0862 · b4e0862
1 parent 61c9126
commit b4e0862
Show file tree

Hide file tree

Showing 10 changed files with 82 additions and 59 deletions.
diff --git a/app/scripts/annotations/templates/annotations.html b/app/scripts/annotations/templates/annotations.html
@@ -24,23 +24,25 @@ <h3 class="panel-title pull-left">Facets</h3>
       </div>
 
     </div>
-    <h4 class="col-lg-9 col-md-8" data-ng-if="!asc.annotations">
-      <i class="fa fa-spinner fa-spin"></i> <span data-translate>Loading annotations...</span>
-    </h4>
 
     <h4 class="col-lg-9 col-md-8" data-ng-if="asc.annotations.hits.length === 0" data-translate>
       No annotations found using those filters.
     </h4>
 
     <div class="col-lg-9 col-md-8" data-ng-if="asc.annotations.hits.length > 0">
-          <div class="alert alert-info clearfix">
-            <span data-ng-if="!cfc.currentFilters.length">
-              <i class="fa fa-long-arrow-left"></i> Start searching by selecting a facet
-            </span>
-            <current-filters></current-filters>
-          </div>
+      <div data-ng-if="!modelLoaded" class="app-loading table-loader">
+        <i class="fa fa-spinner fa-spin fa-5x"></i>
+      </div>
+
+      <div class="alert alert-info clearfix">
+        <span data-ng-if="!cfc.currentFilters.length">
+          <i class="fa fa-long-arrow-left"></i> Start searching by selecting a facet
+        </span>
+        <current-filters></current-filters>
+      </div>
 
       <div class="panel panel-default">
+
         <div class="panel-heading">
           <h3 class="panel-title">Annotations ({{asc.annotations.pagination.total}})</h3>
         </div>

diff --git a/app/scripts/app.ts b/app/scripts/app.ts
@@ -44,14 +44,14 @@ function appRun(gettextCatalog: any, Restangular: restangular.IProvider,
     // TODO more than just 404
     //$state.go("404", {}, {inherit: true});
   });
-  Restangular.addRequestInterceptor((element) => {
+  Restangular.addRequestInterceptor((element, operation: string, model: string) => {
     // Ajax
-    CoreService.xhrSent();
+    CoreService.xhrSent(model);
     return element;
   });
-  Restangular.addResponseInterceptor((data, operation, what, url, response, deferred) => {
+  Restangular.addResponseInterceptor((data, operation: string, model: string, url, response, deferred) => {
     // Ajax
-    CoreService.xhrDone();
+    CoreService.xhrDone(model);
     return deferred.resolve(data);
   });
 

diff --git a/app/scripts/core/core.services.ts b/app/scripts/core/core.services.ts
@@ -3,8 +3,9 @@ module ngApp.core.services {
   export interface ICoreService {
     setPageTitle(title: string, id?: any): void;
     setLoadedState(state: boolean): void;
-    xhrSent(): void;
-    xhrDone(): void;
+    setSearchModelState(state: boolean): void;
+    xhrSent(model: string): void;
+    xhrDone(model: string): void;
     activeRequests: boolean;
     finishedRequests: number;
     requestCount: number;
@@ -14,6 +15,11 @@ module ngApp.core.services {
     activeRequests: boolean = false;
     finishedRequests: number = 0;
     requestCount: number = 0;
+    searchModels: string[] = [
+      "files",
+      "participants",
+      "annotations"
+    ];
 
     /* @ngInject */
     constructor(private $rootScope: ngApp.IRootScope,
@@ -59,24 +65,34 @@ module ngApp.core.services {
       this.$rootScope.pageTitle = formattedTitle;
     }
 
-    xhrSent() {
+    xhrSent(model: string) {
       if (!this.activeRequests) {
         this.activeRequests = true;
         this.ngProgressLite.start();
+        if (this.searchModels.indexOf(model) !== -1) {
+          this.setSearchModelState(false);
+        }
       }
       this.requestCount++;
     }
 
-    xhrDone() {
+    xhrDone(model: string) {
       this.finishedRequests++;
       if (this.finishedRequests === this.requestCount) {
         this.activeRequests = false;
         this.finishedRequests = 0;
         this.requestCount = 0;
         this.ngProgressLite.done();
+        if (this.searchModels.indexOf(model) !== -1) {
+          this.setSearchModelState(true);
+        }
       }
     }
 
+    setSearchModelState(state: boolean): void {
+      this.$rootScope.modelLoaded = state;
+    }
+
   }
 
   angular

diff --git a/app/scripts/query/templates/query.files.html b/app/scripts/query/templates/query.files.html
@@ -1,4 +1,5 @@
 <div class="panel panel-default">
+
   <div class="panel-heading">
     <h3 class="panel-title">Files</h3>
   </div>

diff --git a/app/scripts/query/templates/query.html b/app/scripts/query/templates/query.html
@@ -1,6 +1,10 @@
 <div class="container-fluid full-page">
   <div class="row search-panel">
     <div class="col-lg-12">
+      <div data-ng-if="!modelLoaded" class="app-loading table-loader">
+        <i class="fa fa-spinner fa-spin fa-5x"></i>
+      </div>
+
       <search-bar></search-bar>
 
       <ul class="nav nav-tabs" style="margin-bottom: 20px">
@@ -17,9 +21,6 @@
       </ul>
       <div class="pane-section"
            data-ng-show="qc.QState.tabs.participants.active">
-        <h2 data-ng-if="!qc.participants">
-          <i class="fa fa-spinner fa-spin"></i> <span data-translate>Loading participants...</span>
-        </h2>
 
         <h2 data-ng-if="qc.participants.hits.length === 0" data-translate>
           No participants found using those filters.
@@ -30,9 +31,6 @@ <h2 data-ng-if="qc.participants.hits.length === 0" data-translate>
       </div>
       <div class="pane-section"
            data-ng-show="qc.QState.tabs.files.active">
-        <h2 data-ng-if="!qc.files">
-          <i class="fa fa-spinner fa-spin"></i> <span data-translate>Loading files...</span>
-        </h2>
 
         <h2 data-ng-if="qc.files.hits.length === 0" data-translate>
           No files found using those filters.

diff --git a/app/scripts/query/templates/query.participants.html b/app/scripts/query/templates/query.participants.html
@@ -1,4 +1,5 @@
 <div class="panel panel-default">
+
   <div class="panel-heading">
     <h3 class="panel-title">Participants</h3>
   </div>

diff --git a/app/scripts/search/templates/search.files.html b/app/scripts/search/templates/search.files.html
@@ -1,4 +1,5 @@
 <div class="panel panel-default">
+
   <div class="panel-heading">
     <h3 class="panel-title">Files</h3>
   </div>

diff --git a/app/scripts/search/templates/search.html b/app/scripts/search/templates/search.html
@@ -11,6 +11,10 @@
       </accordion>
     </div>
     <div class="col-lg-9 col-md-8">
+      <div data-ng-if="!modelLoaded" class="app-loading table-loader">
+        <i class="fa fa-spinner fa-spin fa-5x"></i>
+      </div>
+
       <div class="alert alert-info clearfix">
         <a class="btn btn-primary pull-right" data-translate data-advanced-query>
           <i class="fa fa-gears"></i> <span data-translate>Advanced</span>
@@ -39,9 +43,6 @@
       </ul>
       <div class="pane-section"
            data-ng-show="sc.State.tabs.participants.active">
-        <h2 data-ng-if="!sc.participants">
-          <i class="fa fa-spinner fa-spin"></i> <span data-translate>Loading participants...</span>
-        </h2>
 
         <h2 data-ng-if="sc.participants.hits.length === 0" data-translate>
           No participants found using those filters.
@@ -52,9 +53,6 @@ <h2 data-ng-if="sc.participants.hits.length === 0" data-translate>
       </div>
       <div class="pane-section"
            data-ng-show="sc.State.tabs.files.active">
-        <h2 data-ng-if="!sc.files">
-          <i class="fa fa-spinner fa-spin"></i> <span data-translate>Loading files...</span>
-        </h2>
 
         <h2 data-ng-if="sc.files.hits.length === 0" data-translate>
           No files found using those filters.

diff --git a/app/scripts/search/templates/search.participants.html b/app/scripts/search/templates/search.participants.html
@@ -1,4 +1,5 @@
 <div class="panel panel-default">
+
   <div class="panel-heading">
     <h3 class="panel-title">Participants</h3>
   </div>

diff --git a/app/styles/utils.less b/app/styles/utils.less
@@ -42,37 +42,42 @@
   z-index: 1000;
   background: #fff;
   opacity: .5;
-}
 
-.app-loading i {
-  color: #A90101;
-  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;
-  -moz-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: .5;
+  &.table-loader {
+    position: absolute;
+  }
+
+  i {
+    color: #A90101;
+    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;
+  }
+
+  &.ng-enter,
+  &.ng-leave {
+    -webkit-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
+    -moz-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;
+  }
+
+  &.ng-enter,
+  &.ng-leave-active {
+    opacity: 0;
+  }
+
+  &.ng-leave,
+  &.ng-enter.ng-enter-active {
+    opacity: .5;
+  }
 }
 
 // Styling override to prevent having an extra thick border on first row