add loading spinner

src/app/app.module.ts

@@ -15,6 +15,7 @@ import { PortfolioComponent } from './portfolio/portfolio.component';
 import { DetailComponent } from './detail/detail.component';
 import { AdminComponent } from './admin/admin.component';
 import { HomeComponent } from './home/home.component';
+import { SpinnerComponent } from './spinner/spinner.component';
 
 @NgModule({
   declarations: [
@@ -25,7 +26,8 @@ import { HomeComponent } from './home/home.component';
     PortfolioComponent,
     DetailComponent,
     AdminComponent,
-    HomeComponent
+    HomeComponent,
+    SpinnerComponent
   ],
   imports: [
     BrowserModule,

src/app/detail/detail.component.html

@@ -63,7 +63,6 @@
   </div>
 </div>
 
-
 <ngx-image-gallery
 [images]="galleryImages"
 [conf]="conf"
@@ -73,3 +72,5 @@
 (onImageChange)="galleryImageChanged($event)"
 (onDelete)="deleteImage($event)"
 ></ngx-image-gallery>
+
+<app-spinner [show]="!loaded"></app-spinner>

src/app/detail/detail.component.ts

@@ -15,6 +15,8 @@ import { environment } from '../../environments/environment'
 export class DetailComponent implements OnInit {
 
   public basePath = `${environment.BASE_PATH}`
+  public loaded = false
+  public init = false
 
   @ViewChild(NgxImageGalleryComponent) ngxImageGallery: NgxImageGalleryComponent
 
@@ -46,6 +48,10 @@ export class DetailComponent implements OnInit {
     this.showDetails(this.section, this.id)
   }
 
+  ngAfterContentInit() {
+    this.init = true
+  }
+
   showDetails(section, id, title = ''): void {
     this.galleryImages = []
     this.apisService.getDetails(section, id).toPromise().then((response) => {
@@ -83,6 +89,8 @@ export class DetailComponent implements OnInit {
           this.loadedImages.push(true)
         }
       })
+
+      this.loaded = !this.loadedImages.length
       this.details = detail
 
     },(error) => {
@@ -108,6 +116,7 @@ export class DetailComponent implements OnInit {
 
   onLoad(index): void {
     this.loadedImages[index] = false
+    this.loaded = this.init && this.loadedImages.every( (val) => !val)
   }
 
 

src/app/home/home.component.html

@@ -3,8 +3,8 @@
   <button class="goto-next" (click)="scroll('next')" (mouseover)="paused=true"><span class="icon icon-back"></span></button>
   <div class="content" #scrollContent (touchstart)="swipe($event, 'start')" (touchend)="swipe($event, 'end')">
     <div [ngClass]="'slide-' + item.width" *ngFor="let item of homeItems">
-      <div class="box" [ngClass]="'skew-' + (item.id % 6)" (click)="showDetails(item.id)" (mouseover)="paused=true" (mouseout)="paused=false">
-        <img class="image" *ngIf="item.loading" src="/assets/images/loader.webp" alt="loading">
+      <div class="box" [ngClass]="'skew-' + (item.id % 6)" (click)="showDetails(item.id, item.title)" (mouseover)="paused=true" (mouseout)="paused=false">
+        <img class="image" *ngIf="item.loading" src="/assets/images/loader.svg" alt="loading">
         <img class="image" [hidden]="item.loading" (load)="onLoad(item.id)" [src]="basePath+item.image">
         <div class="text">
           <span class="title">{{item.title}}</span>
@@ -26,5 +26,6 @@
       </div>
     </div>
   </div>
-
 </div>
+
+<app-spinner [show]="!loaded"></app-spinner>

src/app/home/home.component.ts

@@ -13,6 +13,8 @@ export class HomeComponent implements OnInit {
   @ViewChild('scrollContent') scrollContent: ElementRef
 
   public basePath = `${environment.BASE_PATH}`
+  public loaded = false
+  public init = false
 
   public homeItems: any = []
   public section: string = 'portfolio'
@@ -50,23 +52,16 @@ export class HomeComponent implements OnInit {
     })
   }
 
-  ngAfterViewInit() {
+  ngAfterContentInit() {
+
+    this.init = true
+
     setInterval( () => {
-      console.log(this.paused)
       if(!this.paused) {
         const scrollWidth = 300
         const scrollPos = parseInt(this.scrollContent.nativeElement.style.marginLeft) || 0
-        /*
-        switch(dir) {
-          case 'prev':
-            this.scrollPos = scrollPos + scrollWidth >= 0 ? 0 : scrollPos + scrollWidth
-            break;
-          case 'next':*/
-            this.scrollPos = scrollPos - scrollWidth <= -(this.scrollContent.nativeElement.offsetWidth - document.body.clientWidth) ?
-                              -(this.scrollContent.nativeElement.offsetWidth - document.body.clientWidth) : scrollPos - scrollWidth
-        /*
-            break;
-        }*/
+        this.scrollPos = scrollPos - scrollWidth <= -(this.scrollContent.nativeElement.offsetWidth - document.body.clientWidth) ?
+                          -(this.scrollContent.nativeElement.offsetWidth - document.body.clientWidth) : scrollPos - scrollWidth
         this.scrollContent.nativeElement.style.marginLeft = this.scrollPos + 'px'
       }
     },2000)
@@ -79,6 +74,7 @@ export class HomeComponent implements OnInit {
 
   onLoad(id): void {
     this.homeItems.filter(item => item.id == id)[0].loading = false
+    this.loaded = this.init && this.homeItems.every( (val) => !val.loading)
   }
 
   scroll(dir): void {

src/app/portfolio/portfolio.component.html

@@ -25,3 +25,5 @@
     </div>
   </div>
 </div>
+
+<app-spinner [show]="!loaded"></app-spinner>

src/app/portfolio/portfolio.component.ts

@@ -11,6 +11,8 @@ import { environment } from '../../environments/environment'
 export class PortfolioComponent implements OnInit {
 
   public basePath = `${environment.BASE_PATH}`
+  public loaded = false
+  public init = false
 
   public portfolioItems: any = []
   public section: string = ''
@@ -65,6 +67,10 @@ export class PortfolioComponent implements OnInit {
     })
   }
 
+  ngAfterContentInit() {
+    this.init = true
+  }
+
   showDetails(id, title = ''): void {
     const section = this.section == 'exhibitions' ? 'exhibitions' : 'works'
     this.router.navigate([`/detail/${section}/${id}/${title.toLowerCase().replace(/[^a-zA-Z0-9]/g, '_')}`])
@@ -72,6 +78,7 @@ export class PortfolioComponent implements OnInit {
 
   onLoad(id): void {
     this.portfolioItems.filter(item => item.id == id)[0].loading = false
+    this.loaded = this.init && this.portfolioItems.every( (val) => !val.loading)
   }
 
 }

src/app/spinner/spinner.component.html

@@ -0,0 +1,2 @@
+
+<div class="spinner" *ngIf="show"></div>

src/app/spinner/spinner.component.scss

@@ -0,0 +1,19 @@
+@import "../../assets/scss/variables";
+
+.spinner {
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 100vw;
+  background: $black-alpha;
+  background-image: url('/assets/images/loader.svg');
+  background-size: 200px 200px;
+  background-repeat: no-repeat;
+  background-position: center center;
+  z-index: 100;
+
+  &.active {
+    display: block;
+  }
+}

src/app/spinner/spinner.component.ts

@@ -0,0 +1,50 @@
+import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core'
+
+@Component({
+  selector: 'app-spinner',
+  templateUrl: './spinner.component.html',
+  styleUrls: ['./spinner.component.scss']
+})
+
+export class SpinnerComponent implements OnInit {
+
+  @ViewChild('spinner') spinner: ElementRef
+  @Input() show: boolean = false
+
+  ngOnInit(): void {
+  }
+/*
+  loader(action) {
+    let op = 0
+    let timer = null
+
+    switch(action) {
+      case 'show':
+        op = 1
+        timer = setInterval(() => {
+            if(op <= 0.1){
+              clearInterval(timer)
+              this.spinner.nativeElement.style.display = 'none'
+            }
+            this.spinner.nativeElement.style.opacity = op
+            this.spinner.nativeElement.style.filter = 'alpha(opacity=' + op * 100 + ")"
+            op -= op * 0.1
+        }, 50)
+
+        break
+      case 'hide':
+        op = 0.1
+        this.spinner.nativeElement.style.display = 'block'
+        timer = setInterval(() => {
+            if(op >= 1){
+              clearInterval(timer)
+            }
+            this.spinner.nativeElement.style.opacity = op
+            this.spinner.nativeElement.style.filter = 'alpha(opacity=' + op * 100 + ")"
+            op += op * 0.1
+        }, 50)
+
+        break
+    }
+  }*/
+}