Performance issue in creating ion-select of 250 options

[YugoBekitzur]

Bug Report

Ionic version:

[x] 4.0.1

Current behavior:

tested only on Android

I see a delay in almost 2 seconds when navigating to the page, containing a select with 250 options (countries list). I made a short performance research through Chrome Performance tab. 1.58 s took rendering this list.

Snapshot from performance test:

e.selectOptionChanged - 1.6222s
     ...
         e.loadOptions - 1.5872s

Expected behavior:

It should take at least twice less than it is now.
I don't think, I faced this issue working with ionic 3.

Related code:
CountriesService is initialised on app start and keeps countries in service until requested. So it doesn't take any time to retrieve countries on pages, where it's used

@Injectable()
export class CountriesService {
  private readonly countryStorageKey = 'countries';
  private _countries: ICountry[] = [];

  constructor(private http: HttpService, private storageService: StorageService) {
    this.storageService.getItem(this.countryStorageKey)
      .pipe(
        catchError(err =>
          this.http.get(`${environment.apiPath}dict/countries`, {}, false)
            .pipe(map((response: any) => response.docs))
        ),
      )
      .subscribe(dict => (this._countries = dict));
  }

  get countries(): ICountry[] {
    return this._countries;
  }
}

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.10.2 (/Users/user/.nvm/versions/node/v8.10.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.1
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.4.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 7 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/user/Library/Android/sdk)
   ios-deploy        : 2.0.0
   ios-sim           : 7.0.0
   NodeJS            : v8.10.0 (/Users/user/.nvm/versions/node/v8.10.0/bin/node)
   npm               : 6.5.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.1 Build version 10B61

[phetw]

@YugoBekitzur Try changing from <ion-select> to a modal or popup that allow virtual scroll implementation ?

[josephpaulo029]

Having the same issue:
I have 2 ion-select in a page, one with 82 items and the other one with 1600 items.
the page loads for about 20 seconds, then I comment out the ion-select with 1600 items and the page loads smoothly.

Hope someone knows a workaround regarding this issue.

[YugoBekitzur]

@YugoBekitzur Try changing from <ion-select> to a modal or popup that allow virtual scroll implementation ?

As a workaround, that may help, thanks. However, that doesn't solve performance issue with rendering select options. I'll test today, how much it will take on Ionic 3 and share results.

[liamdebeasi]

Hi there,

Thanks for opening an issue with us! I don't think this is the intended usage of ion-select. As other users have suggested, it would be better to place the options in a modal or a popup that uses virtual scroll, that way you don't need to render all 250 options at once.

The other consideration here is the user experience -- The popup for ion-select is quite small relative to the number of options presented and does not have a search functionality, making it difficult to parse through a large set of items.

In terms of implementing something like virtual scroll inside ion-select, this is something I can certainly discuss with the team. I'll add the needs: design decision label for this purpose.

If you have any questions regarding how to implement virtual scroll with a modal or popup, feel free to post on our forums or our slack.

Thanks for using Ionic!

[YugoBekitzur]

In terms of implementing something like virtual scroll inside ion-select, this is something I can certainly discuss with the team. I'll add the needs: design decision label for this purpose.

Thanks for you reply. As I said above, I don't think I experienced that on Ionic v 3.x.
But that will be helpful to implement virtual scroll with search ability as a configurable feature of ion-select, indeed.

[phetw]

@YugoBekitzur have a look at package @ng-select/ng-select that allows angular & ionic apps to easily implement virtual scrolling.

[YugoBekitzur]

@YugoBekitzur have a look at package @ng-select/ng-select that allows angular & ionic apps to easily implement virtual scrolling.

Thanks. Will do!

[digaus]

@liamdebeasi
The main problem with select is that it renders the options before you even click the element. This has a big impact on performance if you use a lot of selects in one page even if you only have 50 elements per select.
The options should only be rendered when you click the select...

[ionitron-bot]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!