From 87c3f091f5140f8bea8957458b4a775a6b0b6cfa Mon Sep 17 00:00:00 2001
From: Imran Khan <imransilvake@gmail.com>
Date: Sun, 25 Oct 2020 09:24:09 +0100
Subject: [PATCH] feat: add loader for better UX

---
 .../scroll-top/scroll-top.component.ts        |   4 +-
 .../components/photography.component.html     | 168 +++++++++---------
 .../components/photography.component.scss     |   9 +
 .../components/photography.component.ts       |   4 +
 .../services/helper.service.ts                |   4 +-
 5 files changed, 105 insertions(+), 84 deletions(-)

diff --git a/src/app/packages/frame.pck/components/scroll-top/scroll-top.component.ts b/src/app/packages/frame.pck/components/scroll-top/scroll-top.component.ts
index 0a08762..3380bf6 100755
--- a/src/app/packages/frame.pck/components/scroll-top/scroll-top.component.ts
+++ b/src/app/packages/frame.pck/components/scroll-top/scroll-top.component.ts
@@ -21,8 +21,8 @@ export class ScrollTopComponent implements OnInit, OnDestroy {
 	private unSubscribe = new Subject();
 
 	ngOnInit() {
-		// listen: scroll to top
-		HelperService.detectScroll()
+		// listen: window scroll
+		HelperService.detectWindowScroll()
 			.pipe(
 				// we are only interested in the scrollY value of these events
 				// let's create a stream with only these values
diff --git a/src/app/packages/modules.pck/photography.mod/components/photography.component.html b/src/app/packages/modules.pck/photography.mod/components/photography.component.html
index ca0a2b9..2348e16 100644
--- a/src/app/packages/modules.pck/photography.mod/components/photography.component.html
+++ b/src/app/packages/modules.pck/photography.mod/components/photography.component.html
@@ -1,90 +1,98 @@
 <div class="ik-photography">
 	<div class="cd-container-fluid">
-		<!-- Slider: Photography -->
-		<div class="ik-slider-wrapper ik-bg-loader"
-			 [style.height.px]="sliderItem['landscapeHeight']"
-			 *ngIf="sliderList && sliderList['items'] && sliderList['items'].length">
-			<app-slider [data]="sliderList"
-						[slideInterval]="sliderInterval"
-						(updateActiveSlide)="sliderImageActive = $event">
-				<div class="ik-photo"
-					 @fadeInOut>
-					<!-- Image -->
-					<img [style.height.px]="sliderItem['landscapeHeight']"
-						 [src]="sliderImageActive['photo']"
-						 [alt]="sliderImageActive['title'] || 'photo'" />
-
-					<!-- Title -->
-					<h6 class="ik-bg-shadow ik-text ik-title"
-						*ngIf="sliderImageActive['title']">
-						{{ sliderImageActive['title'] }}
-					</h6>
-				</div>
-			</app-slider>
+		<!-- Loader -->
+		<div class="ik-page-loader" *ngIf="!isPageLoaded; else elseContent">
+			<img [src]="'/assets/svg/loader.svg'" [alt]="'loader'" />
 		</div>
 
-		<!-- Gallery Container -->
-		<div class="cd-container ik-gallery"
-			 *ngIf="galleryList && galleryList.length">
-			<!-- Excerpt -->
-			<section class="cd-row">
-				<div class="cd-col">
-					<h4 class="ik-excerpt">
-						{{ photography['excerpt'] | translate }}
-						<fa-icon class="ik-icon"
-								 [icon]="faIcon[0]">
-						</fa-icon>
-					</h4>
-				</div>
-			</section>
+		<!-- Content -->
+		<ng-template #elseContent>
+			<!-- Slider: Photography -->
+			<div class="ik-slider-wrapper ik-bg-loader"
+				 [style.height.px]="sliderItem['landscapeHeight']"
+				 *ngIf="sliderList && sliderList['items'] && sliderList['items'].length">
+				<app-slider [data]="sliderList"
+							[slideInterval]="sliderInterval"
+							(updateActiveSlide)="sliderImageActive = $event">
+					<div class="ik-photo"
+						 @fadeInOut>
+						<!-- Image -->
+						<img [style.height.px]="sliderItem['landscapeHeight']"
+							 [src]="sliderImageActive['photo']"
+							 [alt]="sliderImageActive['title'] || 'photo'" />
+
+						<!-- Title -->
+						<h6 class="ik-bg-shadow ik-text ik-title"
+							*ngIf="sliderImageActive['title']">
+							{{ sliderImageActive['title'] }}
+						</h6>
+					</div>
+				</app-slider>
+			</div>
 
-			<!-- Gallery -->
-			<section class="ik-grid-wrapper">
-				<div class="ik-grid">
-					<ng-container *ngFor="let item of galleryList; let idx=index;">
-						<div class="ik-item"
-							 @fadeInOut
-							 (click)="onClickOpenPhotoGallery(item, idx)"
-							 [class.ik-landscape]="!item['portrait']"
-							 [class.ik-portrait]="item['portrait']">
-							<div class="ik-photo ik-bg-loader ik-theme-mode"
-								 LazyLoadImage
-								 (lazyLoadImage)="item['show'] = true"
-								 [style.height.px]="item['portrait'] ? gridItem['portraitHeight'] : gridItem['landscapeHeight']"
-								 [style.width.px]="item['portrait'] ? gridItem['portraitWidth'] : gridItem['landscapeWidth']">
-								<!-- Cover -->
-								<img @fadeInOut
-									 *ngIf="item['show']"
-									 [src]="item['thumbPhoto']"
-									 [alt]="item['title']" />
+			<!-- Gallery Container -->
+			<div class="cd-container ik-gallery"
+				 *ngIf="galleryList && galleryList.length">
+				<!-- Excerpt -->
+				<section class="cd-row">
+					<div class="cd-col">
+						<h4 class="ik-excerpt">
+							{{ photography['excerpt'] | translate }}
+							<fa-icon class="ik-icon"
+									 [icon]="faIcon[0]">
+							</fa-icon>
+						</h4>
+					</div>
+				</section>
 
-								<!-- Icon -->
-								<fa-icon class="ik-icon"
-										 [icon]="faIcon[1]">
-								</fa-icon>
+				<!-- Gallery -->
+				<section class="ik-grid-wrapper">
+					<div class="ik-grid">
+						<ng-container *ngFor="let item of galleryList; let idx=index;">
+							<div class="ik-item"
+								 @fadeInOut
+								 (click)="onClickOpenPhotoGallery(item, idx)"
+								 [class.ik-landscape]="!item['portrait']"
+								 [class.ik-portrait]="item['portrait']">
+								<div class="ik-photo ik-bg-loader ik-theme-mode"
+									 LazyLoadImage
+									 (lazyLoadImage)="item['show'] = true"
+									 [style.height.px]="item['portrait'] ? gridItem['portraitHeight'] : gridItem['landscapeHeight']"
+									 [style.width.px]="item['portrait'] ? gridItem['portraitWidth'] : gridItem['landscapeWidth']">
+									<!-- Cover -->
+									<img @fadeInOut
+										 *ngIf="item['show']"
+										 [src]="item['thumbPhoto']"
+										 [alt]="item['title']" />
 
-								<!-- Title -->
-								<h6 class="ik-bg-shadow">{{ item['title'] }}</h6>
+									<!-- Icon -->
+									<fa-icon class="ik-icon"
+											 [icon]="faIcon[1]">
+									</fa-icon>
+
+									<!-- Title -->
+									<h6 class="ik-bg-shadow">{{ item['title'] }}</h6>
+								</div>
 							</div>
-						</div>
-					</ng-container>
-				</div>
+						</ng-container>
+					</div>
 
-				<!-- Load More -->
-				<div class="ik-load-more"
-					 *ngIf="isLoadMore">
-					<button class="ik-button"
-							(click)="getPhotographyGallery()"
-							[disabled]="loadMoreLoader">
-						{{ photography['loadMore'] | translate }}
-						<fa-icon class="ik-icon"
-								 *ngIf="loadMoreLoader"
-								 [icon]="faIcon[2]"
-								 [spin]="true">
-						</fa-icon>
-					</button>
-				</div>
-			</section>
-		</div>
+					<!-- Load More -->
+					<div class="ik-load-more"
+						 *ngIf="isLoadMore">
+						<button class="ik-button"
+								(click)="getPhotographyGallery()"
+								[disabled]="loadMoreLoader">
+							{{ photography['loadMore'] | translate }}
+							<fa-icon class="ik-icon"
+									 *ngIf="loadMoreLoader"
+									 [icon]="faIcon[2]"
+									 [spin]="true">
+							</fa-icon>
+						</button>
+					</div>
+				</section>
+			</div>
+		</ng-template>
 	</div>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/packages/modules.pck/photography.mod/components/photography.component.scss b/src/app/packages/modules.pck/photography.mod/components/photography.component.scss
index fd8ae23..1d8fab1 100644
--- a/src/app/packages/modules.pck/photography.mod/components/photography.component.scss
+++ b/src/app/packages/modules.pck/photography.mod/components/photography.component.scss
@@ -3,6 +3,15 @@
 .ik-photography {
 	background-color: var(--tc4);
 
+	.ik-page-loader {
+		margin-top: 30px;
+		text-align: center;
+
+		.ik-icon {
+			font-size: cd-fontSize(s40);
+		}
+	}
+
 	.ik-slider-wrapper {
 		.ik-photo {
 			position: relative;
diff --git a/src/app/packages/modules.pck/photography.mod/components/photography.component.ts b/src/app/packages/modules.pck/photography.mod/components/photography.component.ts
index d007dea..978eaf3 100644
--- a/src/app/packages/modules.pck/photography.mod/components/photography.component.ts
+++ b/src/app/packages/modules.pck/photography.mod/components/photography.component.ts
@@ -27,6 +27,7 @@ import { HelperService } from '../../../utilities.pck/accessories.mod/services/h
 export class PhotographyComponent implements OnInit {
 	public faIcon = [faPlane, faExpand, faCircleNotch];
 	public photography = photography;
+	public isPageLoaded = false;
 
 	public sliderList = {};
 	public sliderInterval;
@@ -138,6 +139,9 @@ export class PhotographyComponent implements OnInit {
 
 		// stop loader
 		this.loadMoreLoader = false;
+
+		// page loaded
+		this.isPageLoaded = true;
 	}
 
 	/**
diff --git a/src/app/packages/utilities.pck/accessories.mod/services/helper.service.ts b/src/app/packages/utilities.pck/accessories.mod/services/helper.service.ts
index 2f98a48..c0dd6e6 100755
--- a/src/app/packages/utilities.pck/accessories.mod/services/helper.service.ts
+++ b/src/app/packages/utilities.pck/accessories.mod/services/helper.service.ts
@@ -30,9 +30,9 @@ export class HelperService {
 	}
 
 	/**
-	 * detect: scroll
+	 * detect: window scroll
 	 */
-	public static detectScroll() {
+	public static detectWindowScroll() {
 		return fromEvent(window, 'scroll');
 	}