Low performance Ionic v4

Ionic Framework ionic-v3
1

My ionic-selectable component is with very low performance in comparison to ionic version 3 with de same code.

It’s taking a long time to load the list (about 200 items).

Tests:

performace%20comparado
performace comparado.png1094×952 57.4 KB

Info

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (C:\Users\S59\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.6.2
   @angular-devkit/build-angular : 0.13.8
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.8
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   cordova (Cordova CLI) : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms     : android 8.0.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 24 other plugins)

System:

   Android SDK Tools : 26.1.1 (C:\Android\sdk)
   NodeJS            : v10.16.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.9.0
   OS                : Windows 10
2

Can you provide some Code, how you realized the ionic-selectable? Maybe a Screencast would be helpful too.

Cheers
Unkn0wn0x

3

I’m using this component. just whit a static list whit 200 items. When I click on the component to choose any option, the screen freezes until the component is rendered. The more items, the more delay. I have another custom component that happens the same thing.

4

Which Version of the Plugin do you use? The Documentation says you need to use >=4.0.0-beta.19 for Ionic 4. It’s also marked as a beta and shouldn’t be used in productive Code.

I think it’s related to the Plugin and not to Ionic 4, so you should ask the Developer for maintenance of the Plugin for Ionic 4.

Cheers
Unkn0wn0x

5

I’m using the version 4.1.1. But this freeze whe components is rendering happens in another page too. It’s stranger.

6

Maybe it’s related to the Ionic 3 Codebase? Did you migrated everything like it’s documented in the Migration Docs?

Ionic 4 has some breaking changes in case of usage of Angular Components, etc…

Cheers
Unkn0wn0x

7

I did the migration steps, and refactored the broken code, but following the same run. Even though it seems like every app is kind of slow. :slightly_frowning_face:

8

In that link, there are three options provided under “how do I handle a large list of items”. Which are you using and how?

9

I’m was using infinite scroll, but now I tested the virtual scroll and now it works properly. Thanks @rapropos and @Unkn0wn0x for listening.