Ionic 3 Searchbar visible keyboard input lag on typing


#1

I’m having an issue with search bar .

The list for which search is performed contains 500+ records

and the search is performed on multiple criteria . Whenever the you enter the searchbar to type any text there is lot of lag during the text input and this doesn’t happen in the browser .
This only happens when app is deployed to the device using this command .

ionic cordova run android --prod

Following is the code for it
.ts file


  search(ev: any) {
    let val = ev.target.value;
    if (val == '' || val == undefined) {
      // please check this
      this.showList = true;
      this.peopleDirectories = [];
      this.getPeople(this.filters)
    }
    else {
      if (this.peopleDirectoriesClone != undefined) {
        this.peopleDirectories = this.peopleDirectoriesClone.filter((peopleDirectories) => {

          if (peopleDirectories.FirstName != null) {

            if (peopleDirectories.FirstName.toLowerCase().indexOf(val.toLowerCase()) > -1) {

              return peopleDirectories;
            }
          }


          if (peopleDirectories.LastName != null) {
            if (peopleDirectories.LastName.toLowerCase().indexOf(val.toLowerCase()) > -1) {
              return peopleDirectories;
            }
          }

          if (peopleDirectories.DesignationName != null) {
            if (peopleDirectories.DesignationName.toLowerCase().indexOf(val.toLowerCase()) > -1) {
              return peopleDirectories;
            }
          }

          if (peopleDirectories.DepartmentName != null) {
            if (peopleDirectories.DepartmentName.toLowerCase().indexOf(val.toLowerCase()) > -1) {
              return peopleDirectories;
            }
          }
          if (peopleDirectories.OfficeLocationName != null) {
            if (peopleDirectories.OfficeLocationName.toLowerCase().indexOf(val.toLowerCase()) > -1) {
              return peopleDirectories;
            }
          }
          if (peopleDirectories.Language != null) {
            if (peopleDirectories.Language.toLowerCase().indexOf(val.toLowerCase()) > -1) {
              return peopleDirectories;
            }
          }
          if (peopleDirectories.Skills != null) {
            if (peopleDirectories.Skills.toLowerCase().indexOf(val.toLowerCase()) > -1) {
              return peopleDirectories;
            }
          }

        });


      }
      else {
        this.peopleDirectories = this.peopleDirectories.filter((peopleDirectories) => {

          if (peopleDirectories.FirstName != null) {

            if (peopleDirectories.FirstName.toLowerCase().indexOf(val.toLowerCase()) > -1) {

              return peopleDirectories;
            }
          }


          if (peopleDirectories.LastName != null) {
            if (peopleDirectories.LastName.toLowerCase().indexOf(val.toLowerCase()) > -1) {
              return peopleDirectories;
            }
          }

          if (peopleDirectories.DesignationName != null) {
            if (peopleDirectories.DesignationName.toLowerCase().indexOf(val.toLowerCase()) > -1) {
              return peopleDirectories;
            }
          }

          if (peopleDirectories.DepartmentName != null) {
            if (peopleDirectories.DepartmentName.toLowerCase().indexOf(val.toLowerCase()) > -1) {
              return peopleDirectories;
            }
          }
          if (peopleDirectories.OfficeLocationName != null) {
            if (peopleDirectories.OfficeLocationName.toLowerCase().indexOf(val.toLowerCase()) > -1) {
              return peopleDirectories;
            }
          }
          if (peopleDirectories.Language != null) {
            if (peopleDirectories.Language.toLowerCase().indexOf(val.toLowerCase()) > -1) {
              return peopleDirectories;
            }
          }
          if (peopleDirectories.Skills != null) {
            if (peopleDirectories.Skills.toLowerCase().indexOf(val.toLowerCase()) > -1) {
              return peopleDirectories;
            }
          }

        });
      }

    }
  }


**.html file**

<ion-content padding>
 
  <ion-row class="border1 no-scroll ">
    <ion-col col-9 class="border2">
  <ion-searchbar (ionInput)="search($event)" class="searchbar-padding"></ion-searchbar>
    </ion-col>
    <ion-col class="filtercss border3">

      <button ion-button clear (click)="advancesearch()" class="buttonclass"><ion-icon  [name]= filterapplied class="icon icon-ios ion-ios-funnel funnelsize"></ion-icon></button>

    </ion-col>
  </ion-row> 
  <!-- <ion-scroll style="width:100%;height:100vh" scrollY="true">  -->
    <ion-list *ngIf="showList == true" class="listpadding">
        
        <ion-item #item *ngFor="let people of peopleDirectories" class="removepadding item-content rmvlft-padding"> 
          <ion-grid class="grid-padding">
            <ion-row class="bottom-padding">
              <ion-col col-3>
                  <ion-avatar item-start class="item-avatar " (click)="presentPopover($event,people.ImageURL, people.ContactNumber, people.FirstName, people.LastName,people.EmailId)">
                      <img src="{{people.ThumbURL}}"  style="height:65px; width:65px; object-fit:fill; padding:1px;">
                    </ion-avatar>
                    
              </ion-col>
              <ion-col col-5 class="lilpadding">
                  <div  (click)="peopleDetails(people.Id)">         
                      <h3 *ngIf="people.FirstName != null" class="h3">{{people.FirstName}} {{people.LastName}}</h3>
                      <h6 *ngIf="people.DesignationName != null">{{ people.DesignationName }}</h6>
                      <h6 *ngIf="people.ExternalNumber != null">Extn {{people.ExternalNumber}}</h6>
                    </div>
              </ion-col>
              <ion-col col-2 class="morepadding">
                  <ion-buttons end>
                      <button ion-button clear class="icon-size" ><ion-icon (click)="callnumber(people.ContactNumber)" name="call"></ion-icon></button>
                    </ion-buttons>
              </ion-col>
              <ion-col col-2 style="padding-top: 8px">
                <ion-buttons end >
                    <button ion-button clear class="icon-size" ><ion-icon  class="ionbutton" (click)="gonextpage(people.Id)" name="ios-arrow-forward"></ion-icon></button>
                  </ion-buttons>
            </ion-col>
            </ion-row>
          </ion-grid>
        </ion-item>
      </ion-list>
    
      <ion-infinite-scroll (ionInfinite)="LoadMore($event)" loadingSpinner="bubbles">
          <ion-infinite-scroll-content></ion-infinite-scroll-content>
        </ion-infinite-scroll>
      <!-- </ion-scroll> -->
</ion-content>


Here is the ionic info

cli packages: 

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 7.0.1

local packages:

    @ionic/app-scripts : 3.1.9
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.9.2

System:

    Node : v6.11.1
    npm  : 3.10.10
    OS   : Windows 10

#2

Perhaps you need to revisit your approach and think about using Observable operators like debounceTime and switchMap.

See:


#3

Could you please be more specific?


#4

That code is insane, I’m not going to even attempt to read it.

When you say input lag, what do you mean?

Like you press the letter ‘A’ on the keyboard, but the letter doesn’t show up int he search box for like 10 seconds after pressing the key?


#5

Yes and on phones with less hardware resources the entire UI gets stuck after typing few characters