Ionic 3 searchbar видимая задержка ввода клавиатуры при наборе текста

Question

У меня проблема с панелью поиска.

Список, по которому выполняется поиск, содержит более 500 записей

, и поиск выполняется по нескольким критериям.Всякий раз, когда вы вводите панель поиска для ввода какого-либо текста, во время ввода текста происходит большая задержка, и это не происходит в браузере.Это происходит только тогда, когда приложение развернуто на устройстве с помощью этой команды.

ionic cordova run android --prod

Ниже приведен код для него

.ts file

public peopleDirectories: PeopleDirectory[] = [];

   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 файл

<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>

Вот ионная информация

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