Skip to content

Commit

Permalink
feat: add loader for better UX
Browse files Browse the repository at this point in the history
  • Loading branch information
@imransilvake
imransilvake committed Oct 25, 2020
1 parent 8c98b31 commit 87c3f09
Show file tree
Hide file tree
Showing 5 changed files with 105 additions and 84 deletions.
4 changes: 2 additions & 2 deletions src/app/packages/frame.pck/components/scroll-top/scroll-top.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
168 changes: 88 additions & 80 deletions src/app/packages/modules.pck/photography.mod/components/photography.component.html
View file
Original file line number Diff line number Diff line change
@@ -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>
9 changes: 9 additions & 0 deletions src/app/packages/modules.pck/photography.mod/components/photography.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 4 additions & 0 deletions src/app/packages/modules.pck/photography.mod/components/photography.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -138,6 +139,9 @@ export class PhotographyComponent implements OnInit {

// stop loader
this.loadMoreLoader = false;

// page loaded
this.isPageLoaded = true;
}

/**
Expand Down
4 changes: 2 additions & 2 deletions src/app/packages/utilities.pck/accessories.mod/services/helper.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,9 @@ export class HelperService {
}

/**
* detect: scroll
* detect: window scroll
*/
public static detectScroll() {
public static detectWindowScroll() {
return fromEvent(window, 'scroll');
}

Expand Down

0 comments on commit 87c3f09

Please sign in to comment.