Perfect Scrollbar Performance Improvement In Angular

 

Before proceeding to this article, please go through my previous article "http://www.c-sharpcorner.com/article/usage-of-perfect-scrollbar-in-angular/" where I have explained perfect-scrollbar basics.

Here, I am going to show the steps to improve the performance of a perfect-scrollbar using lazy loading concept.  Here, lazy loading means loading the data on an on-demand basis when the scrollbar reaches the end of the panel.

The idea is not to override the existing behavior of the perfect-scrollbar; definitely, it should be an optional choice. I mean it should work in such a way that if we set the property to "true", the lazy loading should enable and if we set it to false, the perfect-scrollbar should work as a default one.

To do that, we need the below inputs,

• isPagingMode
  This decides if the lazy loading is required or not. If we set it to "true", then lazy loading will enable and if we set it to "false", the lazy loading will be disabled.
  
  
• PAGE_LOAD_SIZE
  This decides what is the maximum number of records to load to a perfect-scrollbar panel.
  
  
• offset
  This decides the current pointer of a perfect-scrollbar. Initially, the offset value sets it as 0. For instance, if we set the PAGE_LOAD_SIZE value as 25; and when we scroll down to a perfect-scrollbar and it reaches to 25th record, then the offset value will be incremented by 25 (considered as end of the perfect-scrollbar) and if the perfect-scrollbar reaches to beginning of a perfect-scrollbar (considered as start point of the perfect-scrollbar), then it will be decremented by 25 and it will continue till the start point reaches to 0.
  
  
• MINIMUM_RESULT_SIZE

This tells the minimum size of the record in a perfect-scrollbar. If the size of the record exceeds to a MINIMUM_RESULT_SIZE, then only the lazy loading will be enabled, otherwise, the lazy loading will not be enabled even after we enable "isPagingMode".

• ps-y-reach-end

This is an event that fires when Y- axis scrolls in either direction. For more details on perfect-scrollbar event, please go through the "https://www.npmjs.com/package/perfect-scrollbar" link.

• onYReachEnd
  This is a method which is mapped to "ps-y-reach-end" event which fires when the scroll reaches on every time. When it reaches the scroll count to PAGE_LOAD_SIZE and accordingly, it increments or decrements the offset value.

Now, it's time to show you the sample code snippet and its executed output:

user-profile.component.ts

import {
    Component, Input, Output, EventEmitter, Type, OnChanges, OnInit, ViewChild, DoCheck, OnDestroy
} from '@angular/core';
import * as _ from 'underscore';
import { IListItem } from './configdir.model';
import {PerfectScrollbarComponent} from "ngx-perfect-scrollbar";
import {PAGE_LOAD_SIZE, PageChangeModel} from './page-change.model';
import {Subject} from 'rxjs/Subject';

@Component({
    selector: 'user-profile',
    templateUrl: './user-profile.component.html',
    styleUrls: ['./user-profile.component.scss'],
})

export class ConfigdirComponent<T extends IListItem> implements OnChanges, OnInit, DoCheck, OnDestroy {
    @ViewChild(PerfectScrollbarComponent) public perfectScrollbar: PerfectScrollbarComponent;

    @Input() isPagingMode: boolean;
    @Output() eventReachEnd = new EventEmitter<PageChangeModel>();
    @Output() eventSearchUser = new EventEmitter<PageChangeModel>();

    selectedItem: T = null;
    items: Array<T> = [];
    private restoreSelectedItem: T = null;
    consentFilter: IListItem = { id: 0, text: '' };

    pageChangeModel: PageChangeModel;
    private eventReachEndSubject = new Subject<PageChangeModel>();
    private eventSearchUserSubject = new Subject<PageChangeModel>();

    constructor() {
    }

    initializePageChangeModel() {
        if (!this.pageChangeModel) {
            this.pageChangeModel =  new PageChangeModel();
        }
        this.pageChangeModel.offset = 0;
        this.pageChangeModel.pageSize = PAGE_LOAD_SIZE;
        this.pageChangeModel.searchText = null;
        this.pageChangeModel.isEnablePageLoad = true;
    }

    initializePageInterval() {
        if (!this.pageChangeModel) {
            this.pageChangeModel =  new PageChangeModel();
        }
        this.pageChangeModel.offset = 0;
        this.pageChangeModel.pageSize = PAGE_LOAD_SIZE;
    }

    fireInitialPageLoadEvent() {
        this.initializePageChangeModel();
        this.eventSearchUser.emit(this.pageChangeModel);
    }

    ngOnInit(): void {
        if (this.isPagingMode) {
            this.initializePageChangeModel();

            this.eventReachEndSubject.debounceTime(600).subscribe((vlu) => {
             this.pageChangeModel.offset = this.pageChangeModel.offset + this.pageChangeModel.pageSize;
                this.eventReachEnd.emit(this.pageChangeModel);
            });

            this.eventSearchUserSubject.debounceTime(500).subscribe((vlu) => {
                this.initializePageInterval();
                this.eventSearchUser.emit(this.pageChangeModel);
            });
        }
    }

    ngDoCheck(): void {
        setTimeout(() => {
            if (this.items && this.items.length > 0) {
                this.perfectScrollbar.ngDoCheck();
            }
        });
    }

    ngOnChanges(): void {
        if (this.isPagingMode) {
            this.items.splice(0, this.items.length);
        }
        this.items = this.listItems;
        this.items = this.sortItems();
    }

    private ScrollToItem(): void {
        setTimeout(() => {
            let documentItem = document.getElementsByClassName('my-scroll-container');
            let targetItem = document.getElementsByClassName('selected');
            documentItem[0].scrollTop = targetItem.length > 0 ? targetItem['0'].offsetTop : 0;
        });
    }
    }

    onYReachEnd(value) {
        if (this.isPagingMode) {
            if (this.items && this.items.length > 0) {
                if (this.pageChangeModel.isEnablePageLoad) {
                    this.eventReachEndSubject.next(value);
                }
            }
        }
    }

    ngOnDestroy() {
        if (this.isPagingMode) {
            this.eventReachEndSubject.next();
            this.eventReachEndSubject.complete();
            this.eventSearchUserSubject.next();
            this.eventSearchUserSubject.complete();
        }
    }
}

user-profile.component.html

<perfect-scrollbar class="my-scroll-container" (ps-y-reach-end)="onYReachEnd($event)">
                    <li class="list-group-item showtrash-icon" [ngClass]="{selected: isItemSelected(item)}"  *ngFor="let item of isPagingMode ? items : items | filterBy: consentFilter"
                      (click)="selectItem(item)">
                    <div class="config-selector-list-item-container">
                      <div class="flex-grow" title="{{item.text}}">
                        {{item.text}}
                      </div>
                      <div class="fa fa-check fa-2x check-icon" *ngIf="this.isItemSelected(item)">
                      </div>
                      <div class="fa fa-trash-o fa-x trash-icon"  (click)="this.deleteItem(item)"></div>
                      <div>
                 </div>
           </div>
       </li>
</perfect-scrollbar>

user-profile.component.scss

.my-scroll-container {
  width: 32.8rem;
  height: 20rem;
}

page-change.model.ts

export const PAGE_LOAD_SIZE = 25;
export const MINIMUM_RESULT_SIZE = 5;

export class PageChangeModel {
    offset: number;
    pageSize: number;
    searchText: string;
    isEnablePageLoad: boolean;
}

Output

I would appreciate your valuable comments.