How to use infinite scroll in my contact list

Question

I am using ionic 4 and trying to use infinite scroll to avoid slow display of the contact list. but don’t know how to use this facility properly . please help. Is there any other way to load the contact list fast in my app . the display time is too long . please give some valuable suggestions . I am struggling with this for 2 or 3 days.

In my .ts file

contactList: any[] = [];  

constructor(public navCtrl: NavController,private router: Router, 
     private contacts: Contacts , private sanitizer: DomSanitizer,) {       
    this.fetchDeviceContact();
}

fetchDeviceContact(){

    this.contacts.find(["displayName", "phoneNumbers","photos"], {multiple: true}).then((contacts) => {

      for (var i = 0; i < contacts.length; i++) {
        if (contacts[i].displayName !== null) {
           var name  = contacts[i].displayName;
           var number =  contacts[i].phoneNumbers[0].value;
           if(contacts[i].photos !== null){
           var photo = this.sanitizer.bypassSecurityTrustUrl(contacts[i].photos[0].value);
           }else{
            photo = '';
           }

            var contactData={
                                "displayName":name,
                                "phoneNumbers":number,
                                "logo":photo,                             
                            }

          this.contactList.push(contactData);

           this.contactList.sort(function(a, b) {
             return compareStrings(a.displayName, b.displayName);
          });  

        }
      }

    });

    function compareStrings(a, b) {
                var nameA = a.toUpperCase(); 
                var nameB = b.toUpperCase(); 

                if (nameA < nameB) {
                    return -1;
                }
                if (nameA > nameB) {
                    return 1;
                }

                return 0;
    }

 loadData(event) {
    setTimeout(() => {
      console.log('Done');
      event.target.complete();

      if (data.length == 1000) {
        event.target.disabled = true;
      }
    }, 500);
  }

  toggleInfiniteScroll() {
    this.infiniteScroll.disabled = !this.infiniteScroll.disabled;
  }
}

In .html file

<ion-content padding >
     <ion-content padding >
      <ion-searchbar  ></ion-searchbar>
      <ion-list  *ngFor="let contact of contactList; let i = index;" >   <!-- {{contact | json}} -->
      <ion-item >
      <ion-grid>
      <ion-row>
        <ion-col>
          <div>
            <ion-img [src]="contact.logo"></ion-img><img [src]="contact.logo">
            <ion-icon ios="ios-person" md="md-person"></ion-icon> <b>  {{contact.displayName}}</b>
          </div>
        </ion-col>
        </ion-row>
      <ion-row>
        <ion-col  size="10">
          <div>
            <ion-icon item-start  ios="ios-call" md="md-call" ></ion-icon> {{ contact.phoneNumbers}}
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>
    </ion-item>
    </ion-list>


<ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>

</ion-content>

infinite scroll is not responsible for slow display of the contact list. And the slow loading may be due to the ionic native plugin and the length of contacts. — Chatar Singh, Aug 02 '19 at 07:11
i want to use infinite scroll to avoid slow loading . but don't have any idea how to use it — Ajay Krishna Dutta, Aug 02 '19 at 07:14
infinite scroll will work after fetching contacts. You have to reduce your fetching time for fast loading. — Chatar Singh, Aug 02 '19 at 07:19
@AjayKrishnaDutta, after `event.target.complete();`you need load the next data and add to contactList — Eliseo, Aug 02 '19 at 08:56

score 0 · Answer 1 · answered Aug 07 '19 at 08:45

Solved by using slice pipe :

.ts file :

slices: number = 10;
loadData(event) {

    setTimeout(() => {
      this.slices += 15;
      event.target.complete();
    }, 100);

  }

.html file :

<ion-list  *ngFor="let contact of contactList | slice:0:slices; " > 
</ion-list>

How to use infinite scroll in my contact list

1 Answers1