List of items blocking the page to load on older devices

Ionic Framework ionic-v3
#1

We have an ion-item-group with aprox 30 items. It looks like this:

<ion-item-group *ngFor="let module of models, let i = index" [class.highlight]="hightlightStatus[i]">
    <ion-item>
        <progress value="{{module.progress}}" max="100"></progress>
        <span>{{module.progress}}%</span>
    </ion-item>
    <ion-item>
        <ion-card (click)="buttonbarItemIndex=i">
            <ion-card-header>
                {{breadcrumb}}
            </ion-card-header>
            <ion-card-content>
                {{module.title}}
            </ion-card-content>
        </ion-card>
    </ion-item>
    <ion-item *ngIf="hightlightStatus[i]">
        <button-bar [target]="module.target"></button-bar>
    </ion-item>
</ion-item-group>

On older devices the page does not get loaded. Probably because there are too much DOM Elements to be rendered.

Would be the recommendation to use InfiniteScroll or to replace ion-item with normal divs?

As you can see in the code, the ion-item has ion-card in it and I think this is not so light weight.

We would not like to use divs as we are trying to work as semantic as possible.

#2

Hey,

Have you tried using VirtualScroll?
http://ionicframework.com/docs/v2/api/components/virtual-scroll/VirtualScroll/

According to the docs it only renders the elements which are currently seen by the user which should boost performance.

#3

Thanks, this sounds good. I tried to implement it and it broke my layout completely.

For instance, for the code above, how would it looks like with virtualScroll?

That is what I tried:

<ion-item-group [virtualScroll]="models">
    <ion-item *virtualItem="let module">
        <progress value="{{module.progress}}" max="100"></progress>
        <span>{{module.progress}}%</span>
    </ion-item>
    <ion-item>
        <ion-card>
            <ion-card-header>
                {{breadcrumb}}
            </ion-card-header>
            <ion-card-content *virtualItem="let module">
                {{module.title}}
            </ion-card-content>
        </ion-card>
    </ion-item>
    <ion-item *virtualItem="let module">
        <button-bar [target]="module.target"></button-bar>
    </ion-item>
</ion-item-group>

Now my layout looks really - really bad. :frowning:

#4

I put a div around item and the layout just look fine. The issue has also been fixed. Thanks

1 Like
#5

Glad it worked out. You’re welcome.