improving grid performance

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

@@ -6,9 +6,9 @@ a {
   border: 2px solid #333;
   width: 180px;
   height: 180px;
-
   background-color: #bbbbbb;
 }
+
 .no-image {
 
   color: #7f7f7f;

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

@@ -54,12 +54,12 @@ 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 {

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

@@ -1,12 +1,16 @@
 <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
+    [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 #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">

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 = () => {