improving grid performance

frontend/app/gallery/grid/grid.gallery.component.ts

@@ -29,6 +29,7 @@ export class GalleryGridComponent implements OnChanges, AfterViewInit, OnDestroy
 
   @ViewChild('gridContainer') gridContainer: ElementRef;
   @ViewChildren(GalleryPhotoComponent) gridPhotoQL: QueryList<GalleryPhotoComponent>;
+  private scrollListenerPhotos: GalleryPhotoComponent[] = [];
 
   @Input() photos: Array<PhotoDTO>;
   @Input() lightbox: GalleryLightboxComponent;
@@ -89,6 +90,11 @@ export class GalleryGridComponent implements OnChanges, AfterViewInit, OnDestroy
   ngAfterViewInit() {
     this.lightbox.setGridPhotoQL(this.gridPhotoQL);
 
+    if (Config.Client.enableOnScrollThumbnailPrioritising === true) {
+      this.gridPhotoQL.changes.subscribe(() => {
+        this.scrollListenerPhotos = this.gridPhotoQL.filter(pc => pc.ScrollListener);
+      });
+    }
 
     this.updateContainerDimensions();
     this.sortPhotos();
@@ -188,15 +194,19 @@ export class GalleryGridComponent implements OnChanges, AfterViewInit, OnDestroy
 
   @HostListener('window:scroll')
   onScroll() {
-    if (!this.onScrollFired) {
+    if (!this.onScrollFired &&
+      // should we trigger this at all?
+      (this.renderedPhotoIndex < this.photos.length || this.scrollListenerPhotos.length > 0)) {
       window.requestAnimationFrame(() => {
         this.renderPhotos();
 
         if (Config.Client.enableOnScrollThumbnailPrioritising === true) {
-          this.gridPhotoQL.toArray().forEach((pc: GalleryPhotoComponent) => {
+          this.scrollListenerPhotos.forEach((pc: GalleryPhotoComponent) => {
             pc.onScroll();
           });
+          this.scrollListenerPhotos = this.scrollListenerPhotos.filter(pc => pc.ScrollListener);
         }
+
         this.onScrollFired = false;
       });
       this.onScrollFired = true;

frontend/app/gallery/grid/photo/photo.grid.gallery.component.ts

@@ -6,6 +6,7 @@ import {RouterLink} from '@angular/router';
 import {Thumbnail, ThumbnailManagerService} from '../../thumnailManager.service';
 import {Config} from '../../../../../common/config/public/Config';
 import {AnimationBuilder} from '@angular/animations';
+import {PageHelper} from '../../../model/page.helper';
 
 @Component({
   selector: 'app-gallery-grid-photo',
@@ -53,13 +54,16 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy {
 
 
   isInView(): boolean {
-    return document.body.scrollTop < this.container.nativeElement.offsetTop + this.container.nativeElement.clientHeight
+    return PageHelper.ScrollY < this.container.nativeElement.offsetTop + this.container.nativeElement.clientHeight
-      && document.body.scrollTop + window.innerHeight > this.container.nativeElement.offsetTop;
+      && PageHelper.ScrollY + window.innerHeight > this.container.nativeElement.offsetTop;
   }
 
+  get ScrollListener(): boolean {
+    return !this.thumbnail.Available && !this.thumbnail.Error;
+  }
 
   onScroll() {
-    if (this.thumbnail.Available === true) {
+    if (this.thumbnail.Available === true || this.thumbnail.Error === true) {
       return;
     }
     const isInView = this.isInView();

frontend/app/gallery/share/share.gallery.component.html

@@ -20,7 +20,7 @@
       </div>
       <div class="modal-body">
         <div class="row">
-          <div class="col-9">
+          <div class="col-7 col-sm-9">
             <input id="shareLink"
                    name="shareLink"
                    placeholder="link"
@@ -28,7 +28,7 @@
                    type="text"
                    [ngModel]="url">
           </div>
-          <div class="col-3">
+          <div class="col-5 col-sm-3">
             <button id="copyButton" name="copyButton"
                     ngxClipboard [cbContent]="url"
                     (cbOnSuccess)="onCopy()"

frontend/app/gallery/thumnailManager.service.ts

@@ -185,7 +185,6 @@ export class Thumbnail extends ThumbnailBase {
         this.thumbnailTask.priority = ThumbnailLoadingPriority.medium;
       }
     }
-
   }
 
   public load() {

frontend/app/model/page.helper.ts

@@ -1,6 +1,7 @@
 export class PageHelper {
   private static readonly supportPageOffset = window.pageXOffset !== undefined;
   private static readonly isCSS1Compat = ((document.compatMode || '') === 'CSS1Compat');
+  private static readonly body = document.getElementsByTagName('body')[0];
 
   constructor() {
 
@@ -11,14 +12,14 @@ export class PageHelper {
   }
 
   public static showScrollY() {
-    document.getElementsByTagName('body')[0].style.overflowY = 'scroll';
+    PageHelper.body.style.overflowY = 'scroll';
   }
 
   public static isScrollYVisible(): boolean {
-    return document.getElementsByTagName('body')[0].style.overflowY === 'scroll';
+    return PageHelper.body.style.overflowY === 'scroll';
   }
 
   public static hideScrollY() {
-    document.getElementsByTagName('body')[0].style.overflowY = 'hidden';
+    PageHelper.body.style.overflowY = 'hidden';
   }
 }