feat(app): loading spinners main views

NCI-GDC · Mar 31, 2016 · 5efd889 · 5efd889
1 parent 7801e24
commit 5efd889
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 3 deletions.
diff --git a/app/scripts/projects/projects.controller.ts b/app/scripts/projects/projects.controller.ts
@@ -25,6 +25,7 @@ module ngApp.projects.controllers {
     projectColumns: any[];
     tabSwitch: boolean = false;
     numPrimarySites: number = 0;
+    loading: boolean = true;
 
     /* @ngInject */
     constructor(private $scope: IProjectScope, private ProjectsService: IProjectsService,
@@ -55,6 +56,7 @@ module ngApp.projects.controllers {
     }
 
     refresh() {
+      this.loading = true;
       if (!this.tabSwitch) {
         this.ProjectsService.getProjects({
           fields: this.ProjectTableModel.fields,
@@ -69,6 +71,7 @@ module ngApp.projects.controllers {
           ],
           size: 100
         }).then((data) => {
+          this.loading = false;
           this.projects = data;
           if (this.ProjectsState.tabs.graph.active) {
             this.drawGraph(this.projects);

diff --git a/app/scripts/projects/templates/projects.html b/app/scripts/projects/templates/projects.html
@@ -29,9 +29,14 @@
         </div>
       </div>
 
-      <h3 class="col-lg-9 col-md-8" data-ng-if="!prsc.projects.hits.length" data-translate>
+      <h3 class="col-lg-9 col-md-8" data-ng-if="prsc.loading" data-translate>
+        Loading, please wait.. <i class="fa fa-spinner fa-spin"></i>
+      </h3>
+
+      <h3 class="col-lg-9 col-md-8" data-ng-if="!prsc.projects.hits.length && !prsc.loading" data-translate>
         No projects found using those filters.
       </h3>
+
       <ul class="nav nav-tabs" data-ng-if="prsc.projects.hits.length">
         <li role="presentation"
             data-ng-class="{ active: prsc.ProjectsState.tabs.table.active }"

diff --git a/app/scripts/query/query.controllers.ts b/app/scripts/query/query.controllers.ts
@@ -38,6 +38,8 @@ module ngApp.query.controllers {
   class QueryController implements IQueryController {
     files: IFiles;
     participants: IParticipants;
+    participantsLoading: boolean = true;
+    filesLoading: boolean = true;
     query: string = "";
     tabSwitch: boolean = false;
     projectIdChartConfig: any;
@@ -78,6 +80,9 @@ module ngApp.query.controllers {
     }
 
     refresh() {
+      this.participantsLoading = true;
+      this.filesLoading = true;
+
       if (this.tabSwitch) {
         if (this.QState.tabs.participants.active) {
           this.QState.setActive("participants", "hasLoadedOnce");
@@ -105,6 +110,7 @@ module ngApp.query.controllers {
       };
 
       this.FilesService.getFiles(fileOptions).then((data: IFiles) => {
+        this.filesLoading = false;
         this.files = this.files || {};
         this.files.aggregations = data.aggregations;
 
@@ -122,6 +128,7 @@ module ngApp.query.controllers {
       });
 
       this.ParticipantsService.getParticipants(participantOptions).then((data: IParticipants) => {
+        this.participantsLoading = false;
         this.participants = this.participants || {};
         this.participants.aggregations = data.aggregations;
 

diff --git a/app/scripts/query/templates/query.html b/app/scripts/query/templates/query.html
@@ -4,7 +4,11 @@
 
       <search-bar></search-bar>
 
-      <h3 class="col-lg-9 col-md-8" data-ng-if="!qc.participants.hits.length && !qc.files.hits.length" data-translate>
+      <h3 class="col-lg-9 col-md-8" data-ng-if="qc.participantsLoading && qc.filesLoading" data-translate>
+        Loading, please wait.. <i class="fa fa-spinner fa-spin"></i>
+      </h3>
+
+      <h3 class="col-lg-9 col-md-8" data-ng-if="!qc.participants.hits.length && !qc.files.hits.length && qc.participantsLoading && qc.filesLoading" data-translate>
         No results found using those filters.
       </h3>
 

diff --git a/app/scripts/search/search.controllers.ts b/app/scripts/search/search.controllers.ts
@@ -39,6 +39,8 @@ module ngApp.search.controllers {
   class SearchController implements ISearchController {
     files: IFiles;
     participants: IParticipants;
+    participantsLoading: boolean = true;
+    filesLoading: boolean = true;
     summary: any;
     tabSwitch: boolean = false;
     projectIdChartConfig: any;
@@ -103,6 +105,9 @@ module ngApp.search.controllers {
     }
 
     refresh() {
+      this.filesLoading = true;
+      this.participantsLoading = true;
+
       if (this.tabSwitch) {
         if (this.SearchState.tabs.participants.active) {
           this.SearchState.setActive("tabs", "participants", "hasLoadedOnce");
@@ -135,6 +140,7 @@ module ngApp.search.controllers {
       };
 
       this.FilesService.getFiles(fileOptions).then((data: IFiles) => {
+        this.filesLoading = false;
         this.files = this.files || {};
         this.files.aggregations = data.aggregations;
 
@@ -152,6 +158,7 @@ module ngApp.search.controllers {
       });
 
       this.ParticipantsService.getParticipants(participantOptions).then((data: IParticipants) => {
+        this.participantsLoading = false;
         this.participants = this.participants || {};
         this.participants.aggregations = data.aggregations;
 

diff --git a/app/scripts/search/templates/search.html b/app/scripts/search/templates/search.html
@@ -48,7 +48,11 @@
         </div>
       </div>
 
-      <h3 class="col-lg-9 col-md-8" data-ng-if="!sc.participants.hits.length && !sc.files.hits.length" data-translate>
+      <h3 class="col-lg-9 col-md-8" data-ng-if="sc.participantsLoading && sc.filesLoading" data-translate>
+        Loading, please wait.. <i class="fa fa-spinner fa-spin"></i>
+      </h3>
+
+      <h3 class="col-lg-9 col-md-8" data-ng-if="!sc.participants.hits.length && !sc.files.hits.length && !sc.participantsLoading && !sc.filesLoading" data-translate>
         No results found using those filters.
       </h3>