Slowness in app after multiple no of records in list

Ionic Framework ionic-v3
1

Hello Sir ,

I have facing an issue in my app after more than 100 records in list view app starting slow and list and its details page please let me know why this issue come

2

You are asking for wild guesses as to what could be going wrong…
Post your code that which loads and displays the data, then maybe someone can be able to help you from that point…

3

This is what virtual scroll was invented for.

4

Please help
HTML code
<ion-refresher (ionRefresh)=“doRefresh($event)” class=“refresher” pullFactor=“0.5” pullMin=“0” pullMax=“0”>

  <ion-refresher-content refreshingSpinner="circles" refreshingText="">

  </ion-refresher-content>

</ion-refresher>



<ion-list class="list" id='admissionList' *ngIf="ListCount >0 ">

  <ion-item class="listRow" *ngFor="let item of searchList; let i = index" tappable (click)="ViewIP(item)">

   

    <div slot="start" style="text-align: center;">

      <input type="hidden" id="{{'img_'+(i+1)}}" value="{{item.PatientPhoto}}">

      <img class="listIcon" src="" id="{{'imgControl_'+(i+1)}}" />                

      <p>

        <ion-button *ngIf="item.PatientStatus == 'VIP'" class="vipButton" color='warning' disabled>{{item.PatientStatus}}

        </ion-button>

      </p> 

       <span style="display: none;"> {{LoadImage(i+1)}}</span> 

    </div>

    <ion-label class="listTitle">

      <h4 class="listHeading">{{item.PatientName}}</h4>

      <p class="listSubHeading">{{item.PatientGender +'/'+item.PatientAge}}</p>

       <p class="listSubHeading">{{item.Bed}}</p> 

      <p class="listSubHeading">{{item.Dept}}</p>

    

      <ion-button class="smallButton"  color="tertiary" disabled >{{item.AdmitPatientStatus}}

      </ion-button>

    </ion-label>

    <img class="listArrow" slot="end" src="assets/imgs/listItem_arrow.png" />

  </ion-item>

</ion-list>

ts file:
/************* Load Image in listView Function **************/

public async LoadImage(Index) {

let ImgSrc = $("#img_" + Index).val();

if (ImgSrc === “” || ImgSrc === null || ImgSrc === “undefined”) {

$("#imgControl_" + Index).attr(“src”, ProjParams.DefaultImage);

}

else {

$("#imgControl_" + Index).attr(“src”, "data:image/jpeg;base64, " + ImgSrc);

}

}

5

If you think of refresh in web technology its the same as re-loading, which is what you’d like to avoid since performance will definitely hit a snag as your list grows big.

Am assuming that you are fetching data from a database which is being updated by other users elsewhere. Combining virtual scroll and infinite scroll could serve you better as it keep on loading data and show a small list on the screen at the same time.

1_3L_dOHT5YIQsDhYD1u5XIQ

image courtesy of

How virtual / infinite scrolling works | by Barna Toth | Frontend journeys | Medium

Here is a tutorial showing how to combine both…
Add Virtual Scroll & Infinite Scroll Component in Home Page