improving loading

frontend/app/app.routing.ts

@@ -34,7 +34,8 @@ const ROUTES: Routes = [
     path: 'share/:sharingKey',
     component: GalleryComponent
   },
-  {path: '', redirectTo: '/login', pathMatch: 'full'}
+  {path: '', redirectTo: '/login', pathMatch: 'full'},
+  {path: '**', redirectTo: '/login', pathMatch: 'full'}
 ];
 
 export const appRoutes: ModuleWithProviders = RouterModule.forRoot(ROUTES);

frontend/app/frame/frame.component.css

@@ -1,10 +1,14 @@
 .navbar {
-  margin-bottom: 0px;
+  margin-bottom: 20px;
 }
 
 ng2-slim-loading-bar {
-  margin-bottom: 20px;
+  /* display: block; */
-  display: block;
+  z-index: 999999;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
 }
 
 .container {

frontend/app/frame/frame.component.html

@@ -1,3 +1,4 @@
+<ng2-slim-loading-bar [color]="'#337ab7'" [height]="'3px'"></ng2-slim-loading-bar>
 <nav class="navbar navbar-inverse navbar-static-top">
   <div class="container">
     <div class="navbar-header">
@@ -46,5 +47,4 @@
     </div><!--/.nav-collapse -->
   </div>
 </nav>
-<ng2-slim-loading-bar></ng2-slim-loading-bar>
 <ng-content select="[body]"></ng-content>

frontend/app/gallery/gallery.component.css

@@ -15,3 +15,42 @@ gallery-directory {
   margin: 2px;
   display: inline-block;
 }
+
+.spinner {
+  margin-top: calc(50vh - 40px);
+  width: 80px;
+  height: 80px;
+  background-color: #333;
+
+  margin-left: auto;
+  margin-right: auto;
+  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
+  animation: sk-rotateplane 1.2s infinite ease-in-out;
+}
+
+@-webkit-keyframes sk-rotateplane {
+  0% {
+    -webkit-transform: perspective(120px)
+  }
+  50% {
+    -webkit-transform: perspective(120px) rotateY(180deg)
+  }
+  100% {
+    -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg)
+  }
+}
+
+@keyframes sk-rotateplane {
+  0% {
+    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
+  }
+  50% {
+    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
+  }
+  100% {
+    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+  }
+}

frontend/app/gallery/gallery.component.html

@@ -17,6 +17,7 @@
     -
   </ng-container>
 
+
   <div body class="container" style="width: 100%; padding:0" *ngIf="_galleryService.content.value.directory">
     <gallery-navbar [directory]="_galleryService.content.value.directory"></gallery-navbar>
 
@@ -52,4 +53,15 @@
     </div>
     <gallery-grid [photos]="_galleryService.content.value.searchResult.photos" [lightbox]="lightbox"></gallery-grid>
   </div>
+
+  <div body class="container"
+       style="width: 100%; padding:0"
+       *ngIf="(!_galleryService.content.value.directory ||
+        (_galleryService.content.value.directory.photos.length == 0
+        && _galleryService.content.value.directory.directories.length == 0))
+       && !_galleryService.content.value.searchResult">
+    <div class="spinner">
+
+    </div>
+  </div>
 </app-frame>

frontend/app/gallery/gallery.component.ts

@@ -12,6 +12,7 @@ import {ShareService} from "./share.service";
 import {NavigationService} from "../model/navigation.service";
 import {UserRoles} from "../../../common/entities/UserDTO";
 import {Observable} from "rxjs/Rx";
+import {ContentWrapper} from "../../../common/entities/ConentWrapper";
 
 @Component({
   selector: 'gallery',
@@ -94,7 +95,7 @@ export class GalleryComponent implements OnInit, OnDestroy {
     }
   }
 
-  private onContentChange = (content) => {
+  private onContentChange = (content: ContentWrapper) => {
     const dirSorter = (a: DirectoryDTO, b: DirectoryDTO) => {
       return a.name.localeCompare(b.name);
     };