improving grid performance

frontend/app/gallery/directory/directory.gallery.component.css

@@ -1,53 +1,53 @@
 a {
-    position: relative;
+  position: relative;
 }
 
 .photo-container {
-    border: 2px solid #333;
+  border: 2px solid #333;
   width: 180px;
   height: 180px;
-
-    background-color: #bbbbbb;
+  background-color: #bbbbbb;
 }
+
 .no-image {
 
-    color: #7f7f7f;
-    font-size: 50px;
-    top: calc(50% - 25px);
-    left: calc(50% - 25px);
+  color: #7f7f7f;
+  font-size: 50px;
+  top: calc(50% - 25px);
+  left: calc(50% - 25px);
 }
 
 .photo {
-    width: 100%;
-    height: 100%;
-    background-size: cover;
-    background-position: center;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-position: center;
 }
 
 .button {
-    border: 0;
-    padding: 0;
-    text-align: left;
+  border: 0;
+  padding: 0;
+  text-align: left;
 
 }
 
 .info {
-    background-color: rgba(0, 0, 0, 0.6);
-    color: white;
-    font-size: medium;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    padding: 5px;
-    width: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+  color: white;
+  font-size: medium;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  padding: 5px;
+  width: 100%;
 }
 
 a:hover .info {
-    background-color: rgba(0, 0, 0, 0.8);
+  background-color: rgba(0, 0, 0, 0.8);
 }
 
 a:hover .photo-container {
-    border-color: #000;
+  border-color: #000;
 }
 
 .directory-name {

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

@@ -1,51 +1,51 @@
 img {
-    width: inherit;
-    height: inherit;
+  width: inherit;
+  height: inherit;
 
-    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-    -moz-animation: fadein 2s; /* Firefox < 16 */
-    -ms-animation: fadein 2s; /* Internet Explorer */
-    -o-animation: fadein 2s; /* Opera < 12.1 */
-    animation: fadein 2s;
+  -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
+  -moz-animation: fadein 2s; /* Firefox < 16 */
+  -ms-animation: fadein 2s; /* Internet Explorer */
+  -o-animation: fadein 2s; /* Opera < 12.1 */
+  animation: fadein 2s;
 }
 
 @keyframes fadein {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 /* Firefox < 16 */
 @-moz-keyframes fadein {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 /* Safari, Chrome and Opera > 12.1 */
 @-webkit-keyframes fadein {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 /* Internet Explorer */
 @-ms-keyframes fadein {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 
 .info {
@@ -54,38 +54,38 @@ img {
     font-size: medium;
     position: relative;
     padding: 5px;
-    margin-top: -50px;
+  margin-top: 0;
 
-    transition: all .3s ease-out;
-    -moz-transition: all .3s ease-out;
-    -webkit-transition: all .3s ease-out;
-    -o-transition: all .3s ease-out;
+  transition: margin .3s ease-out, background-color .3s ease-out;
+  -moz-transition: margin .3s ease-out, background-color .3s ease-out;
+  -webkit-transition: margin .3s ease-out, background-color .3s ease-out;
+  -o-transition: margin .3s ease-out, background-color .3s ease-out;
 }
 
 .photo-container {
-    width: inherit;
-    height: inherit;
-    overflow: hidden;
+  width: inherit;
+  height: inherit;
+  overflow: hidden;
 }
 
 .photo-name {
-    display: inline-block;
+  display: inline-block;
 }
 
 .photo-position {
-    display: inline-block;
-    float: right;
+  display: inline-block;
+  float: right;
 }
 
 a {
-    color: white;
+  color: white;
 
 }
 
 .photo-keywords {
-    margin-top: 5px;
-    font-size: small;
-    text-align: right;
-    display: inline-block;
-    width: 100%;
+  margin-top: 5px;
+  font-size: small;
+  text-align: right;
+  display: inline-block;
+  width: 100%;
 }

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

@@ -1,33 +1,37 @@
 <div #photoContainer class="photo-container" (mouseover)="hover()" (mouseout)="mouseOut()">
   <img #img [src]="thumbnail.Src" *ngIf="thumbnail.Available">
 
-    <gallery-grid-photo-loading [animate]="thumbnail.loading" *ngIf="!thumbnail.Available">
-    </gallery-grid-photo-loading>
+  <gallery-grid-photo-loading
+    [animate]="thumbnail.loading"
+    *ngIf="!thumbnail.Available">
+  </gallery-grid-photo-loading>
 
-    <!--Info box -->
-    <div #info class="info" [style.margin-top.px]="-infoStyle.height"
-         [style.background]="infoStyle.background">
-        <div class="photo-name">{{gridPhoto.photo.name}}</div>
+  <!--Info box -->
+  <div #info class="info"
+       *ngIf="infoBar.visible"
+       [style.margin-top.px]="infoBar.marginTop"
+       [style.background]="infoBar.background">
+    <div class="photo-name">{{gridPhoto.photo.name}}</div>
 
-        <div class="photo-position" *ngIf="gridPhoto.photo.metadata.positionData">
-            <span class="glyphicon glyphicon-map-marker"></span>
-            <ng-template [ngIf]="getPositionText()">
-                <a [routerLink]="['/search', getPositionText(), {type:SearchTypes[SearchTypes.position]}]"
-                   *ngIf="searchEnabled">
-                    {{getPositionText()}}
-                </a>
-                <span *ngIf="!searchEnabled">{{getPositionText()}}</span>
-            </ng-template>
-        </div>
-
-        <div class="photo-keywords">
-            <ng-template ngFor let-keyword [ngForOf]="gridPhoto.photo.metadata.keywords" let-last="last">
-                <a *ngIf="searchEnabled"
-                   [routerLink]="['/search', keyword, {type: SearchTypes[SearchTypes.keyword]}]">#{{keyword}}</a>
-                <span *ngIf="!searchEnabled">#{{keyword}}</span>
-                <ng-template [ngIf]="!last">,</ng-template>
-            </ng-template>
-
-        </div>
+    <div class="photo-position" *ngIf="gridPhoto.photo.metadata.positionData">
+      <span class="glyphicon glyphicon-map-marker"></span>
+      <ng-template [ngIf]="getPositionText()">
+        <a [routerLink]="['/search', getPositionText(), {type:SearchTypes[SearchTypes.position]}]"
+           *ngIf="searchEnabled">
+          {{getPositionText()}}
+        </a>
+        <span *ngIf="!searchEnabled">{{getPositionText()}}</span>
+      </ng-template>
     </div>
+
+    <div class="photo-keywords">
+      <ng-template ngFor let-keyword [ngForOf]="gridPhoto.photo.metadata.keywords" let-last="last">
+        <a *ngIf="searchEnabled"
+           [routerLink]="['/search', keyword, {type: SearchTypes[SearchTypes.keyword]}]">#{{keyword}}</a>
+        <span *ngIf="!searchEnabled">#{{keyword}}</span>
+        <ng-template [ngIf]="!last">,</ng-template>
+      </ng-template>
+
+    </div>
+  </div>
 </div>

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

@@ -5,12 +5,12 @@ import {SearchTypes} from "../../../../../common/entities/AutoCompleteItem";
 import {RouterLink} from "@angular/router";
 import {Thumbnail, ThumbnailManagerService} from "../../thumnailManager.service";
 import {Config} from "../../../../../common/config/public/Config";
-
+import {AnimationBuilder} from "@angular/animations";
 @Component({
   selector: 'gallery-grid-photo',
   templateUrl: './photo.grid.gallery.component.html',
   styleUrls: ['./photo.grid.gallery.component.css'],
-  providers: [RouterLink],
+  providers: [RouterLink]
 })
 export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy {
   @Input() gridPhoto: GridPhoto;
@@ -31,24 +31,26 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy {
    };
    */
 
-  infoStyle = {
-    height: 0,
+  infoBar = {
+    marginTop: 0,
+    visible: false,
     background: "rgba(0,0,0,0.0)"
   };
+  animationTimer = null;
 
   SearchTypes: any = [];
   searchEnabled: boolean = true;
 
   wasInView: boolean = null;
 
-  constructor(private thumbnailService: ThumbnailManagerService) {
+  constructor(private thumbnailService: ThumbnailManagerService,
+              private _animationBuilder: AnimationBuilder) {
     this.SearchTypes = SearchTypes;
     this.searchEnabled = Config.Client.Search.enabled;
   }
 
   ngOnInit() {
     this.thumbnail = this.thumbnailService.getThumbnail(this.gridPhoto);
-
   }
 
 
@@ -83,15 +85,28 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy {
       this.gridPhoto.photo.metadata.positionData.country;
   }
 
+
   hover() {
-    this.infoStyle.height = this.infoDiv.nativeElement.clientHeight;
-    this.infoStyle.background = "rgba(0,0,0,0.8)";
+    this.infoBar.visible = true;
+    if (this.animationTimer != null) {
+      clearTimeout(this.animationTimer);
+    }
+    this.animationTimer = setTimeout(() => {
+      this.infoBar.marginTop = -this.infoDiv.nativeElement.clientHeight;
+      this.infoBar.background = "rgba(0,0,0,0.8)";
+    }, 1);
 
   }
 
   mouseOut() {
-    this.infoStyle.height = 0;
-    this.infoStyle.background = "rgba(0,0,0,0.0)";
+    this.infoBar.marginTop = 0;
+    this.infoBar.background = "rgba(0,0,0,0.0)";
+    if (this.animationTimer != null) {
+      clearTimeout(this.animationTimer);
+    }
+    this.animationTimer = setTimeout(() => {
+      this.infoBar.visible = false;
+    }, 500);
 
   }
 

frontend/app/gallery/thumnailLoader.service.ts

@@ -165,7 +165,6 @@ export class ThumbnailLoaderService {
     this.runningRequests++;
     task.taskEntities.forEach(te => te.listener.onStartedLoading());
     task.inProgress = true;
-    console.log("loading", task.path);
 
     let curImg = new Image();
     curImg.onload = () => {