feat: add loader for better UX

imransilvake · Oct 25, 2020 · 87c3f09 · 87c3f09
1 parent 8c98b31
commit 87c3f09
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 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
@@ -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
@@ -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>
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
@@ -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
@@ -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
@@ -30,9 +30,9 @@ export class HelperService {
  }
 
  /**
- * detect: scroll
+ * detect: window scroll
  */
- public static detectScroll() {
+ public static detectWindowScroll() {
  return fromEvent(window, 'scroll');
  }