diff --git a/pdb-js/src/app/app.module.ts b/pdb-js/src/app/app.module.ts
index 934f729..7150ae7 100644
--- a/pdb-js/src/app/app.module.ts
+++ b/pdb-js/src/app/app.module.ts
@@ -16,6 +16,8 @@ import {MatButtonModule} from '@angular/material/button';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {MatSelectModule} from '@angular/material/select';
 import {MatFormFieldModule, MatInputModule} from '@angular/material';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 import {MatSnackBarModule} from '@angular/material/snack-bar';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import { YAxisRangeComponent } from './y-axis-range/y-axis-range.component';
@@ -51,6 +53,8 @@ import { ImageToggleComponent } from './image-toggle/image-toggle.component';
     MatCheckboxModule,
     MatFormFieldModule,
     MatInputModule,
+    MatProgressBarModule,
+    MatProgressSpinnerModule,
     MatSelectModule,
     MatSnackBarModule,
     MatTooltipModule,
diff --git a/pdb-js/src/app/gallery-view/gallery-view.component.html b/pdb-js/src/app/gallery-view/gallery-view.component.html
index f15a759..a6f191a 100644
--- a/pdb-js/src/app/gallery-view/gallery-view.component.html
+++ b/pdb-js/src/app/gallery-view/gallery-view.component.html
@@ -20,6 +20,17 @@
     <pdb-gallery-filter-view (valueChanged)="filterChanged($event)"></pdb-gallery-filter-view>
     
   </div>
+  <div
+    *ngIf="show && progress != 100 && totalNumberImages > 0" 
+    id="gallery-progress">
+    
+    <mat-progress-bar mode="determinate" value="{{progress}}"></mat-progress-bar>
+   
+    <button 
+      mat-button
+      (click)="abort()"
+      matTooltip="abort"><img src="assets/img/close.svg" class="icon-inline" /> Abort</button>
+  </div>
   <div
     *ngIf="show"
     class="card-grid-container">
diff --git a/pdb-js/src/app/gallery-view/gallery-view.component.scss b/pdb-js/src/app/gallery-view/gallery-view.component.scss
index d9c133d..55134af 100644
--- a/pdb-js/src/app/gallery-view/gallery-view.component.scss
+++ b/pdb-js/src/app/gallery-view/gallery-view.component.scss
@@ -18,3 +18,7 @@
   padding: 10px;
 }
 
+#gallery-progress mat-progress-bar {
+  width: 20em;
+  display: inline-block;
+}
diff --git a/pdb-js/src/app/gallery-view/gallery-view.component.ts b/pdb-js/src/app/gallery-view/gallery-view.component.ts
index 3f09885..9c4a80e 100644
--- a/pdb-js/src/app/gallery-view/gallery-view.component.ts
+++ b/pdb-js/src/app/gallery-view/gallery-view.component.ts
@@ -95,10 +95,8 @@ export class GalleryFilterView {
 })
 export class GalleryViewComponent implements OnInit {
 
-
   galleryItems: Array<GalleryItem> = new Array<GalleryItem>();
   
-  
   show = false;
   
   splitByValuesQueue = new Array<string>();
@@ -107,6 +105,12 @@ export class GalleryViewComponent implements OnInit {
   
   sortOrder = 'ASC';
   
+  progress = 0;
+  
+  totalNumberImages = 0;
+  
+  sequenceId = 0;
+  
   @ViewChild(GalleryFilterView, {static: false})
   filter : GalleryFilterView;
   
@@ -136,6 +140,12 @@ export class GalleryViewComponent implements OnInit {
   ngOnInit() {
   }
   
+  abort(){
+    this.totalNumberImages = 0;
+    this.splitByValuesQueue = new Array<string>();
+    this.sequenceId++;
+  }
+  
   filteredSortedGalleryItems(): Array<GalleryItem> {
     return this.galleryItems.filter(item => item.show);
   }
@@ -224,6 +234,8 @@ export class GalleryViewComponent implements OnInit {
     this.plotService.splitQuery(request.query, splitByField).subscribe(function(valuesForSplitBy){
       console.log("valuesForSplitBy: " + JSON.stringify(valuesForSplitBy));
       that.splitByValuesQueue = valuesForSplitBy;
+      that.progress = 0;
+      that.totalNumberImages = that.splitByValuesQueue.length;
       that.renderGalleryRecursively(request, splitByField);
     },
     error => {
@@ -243,8 +255,16 @@ export class GalleryViewComponent implements OnInit {
     let request = masterRequest.copy();
     request.query = "("+request.query+") and " + splitByField+"="+ splitByValue;
     
+    const expectedSequenceId = ++this.sequenceId;
+    
     this.plotService.sendPlotRequest(request).subscribe(function(plotResponse : PlotResponse){
-      console.log("response: " + JSON.stringify(plotResponse));
+      //console.log("response: " + JSON.stringify(plotResponse));
+      if (that.sequenceId != expectedSequenceId){
+        //console.log("ignoring stale response");
+        return;
+      }
+      
+      that.progress = 100 * (that.totalNumberImages - that.splitByValuesQueue.length) / that.totalNumberImages;
       
       plotResponse.thumbnailUrl = "http://"+window.location.hostname+':8080/'+plotResponse.thumbnailUrl;
       plotResponse.imageUrl = "http://"+window.location.hostname+':8080/'+plotResponse.imageUrl;
diff --git a/pdb-js/src/app/plot.service.ts b/pdb-js/src/app/plot.service.ts
index e3c12a3..bf55bf8 100644
--- a/pdb-js/src/app/plot.service.ts
+++ b/pdb-js/src/app/plot.service.ts
@@ -53,7 +53,7 @@ export class PlotService {
   
   sendPlotRequest(plotRequest: PlotRequest): Observable<PlotResponse>{
     
-    console.log("send plot request: "+  JSON.stringify(plotRequest));
+    //console.log("send plot request: "+  JSON.stringify(plotRequest));
     return this.http.post<PlotResponse>('//'+window.location.hostname+':8080/plots', plotRequest);
   }
   
diff --git a/pdb-js/src/styles.scss b/pdb-js/src/styles.scss
index b725766..a262059 100644
--- a/pdb-js/src/styles.scss
+++ b/pdb-js/src/styles.scss
@@ -36,6 +36,9 @@ $background-color: #CBD7F4;
   height: 1em;
   vertical-align: text-bottom;
 }
+.mat-button .mat-button-wrapper .icon-inline {
+  vertical-align: text-top;
+}
 
 button[disabled] .icon-inline {
   opacity: 0.5;