Ionic-framework: Ionic2 Segment and Virtual Scroll don't work together properly

[vong-srey]

Here is my home.ts

export class HomePage {
    constructor(private nav: NavController) {}

    sgm: string = "sgm1";
    items1: number[] = [1, 2, 3];
    items2: number[] = [4, 5, 6];
}

and here is my home.html

<ion-header>
<ion-navbar *navbar>
  <ion-title>
    Ionic 2
  </ion-title>
</ion-navbar>  
    <ion-toolbar no-border-top>
        <ion-segment [(ngModel)]="sgm">
            <ion-segment-button value="sgm1">
                Segment1
            </ion-segment-button>
            <ion-segment-button value="sgm2">
                Segment2
            </ion-segment-button>
        </ion-segment>

    </ion-toolbar>
</ion-header>


<ion-content class="has-header">
    <div [ngSwitch]="sgm">
      <div *ngSwitchCase="'sgm1'">
          <ion-list  [virtualScroll]="items1">
              <ion-item *virtualItem="let item">
                  {{ item }}
              </ion-item>
          </ion-list>
      </div>

      <div *ngSwitchCase="'sgm2'">
          <ion-list  [virtualScroll]="items2">
              <ion-item *virtualItem="let item">
                  {{ item }}
              </ion-item>
          </ion-list>
      </div>
    </div>
</ion-content>

With this code, my app shows a blank list (as
)

But, if I add some random text after ngSwitchCase directive and just before ion-list directive like this code:

      <div *ngSwitchCase="'sgm1'">
           random text
          <ion-list  [virtualScroll]="items1">
              <ion-item *virtualItem="let item">
                  {{ item }}
              </ion-item>
          </ion-list>
      </div>

then my app shows the list correctly (as attached file:

)

Environment:
Ionic 2 beta 11
Angular 2 RC 4

Not how if this is an Ionic's bug or if my code is not correct. Thanks for any helps

[theromis]

Having same issue in my code, thank you for opening this bug

[sk-aravind]

yup got the same bug too. Just resorted to using ngFor for now. Doesnt work in beta 11 too

[jmarginier]

Same as #7198

[lujakob]

Can you try style="height:100%;" for your container/parent/segment divs ?

[flackdl]

I am seeing the same symptoms on RC3. I have noticed that it works fine as long as the virtualScroll element isn't nested within any other directives (ngIf, ngSwitch etc).

[danielabbatt]

Same issue for me on 2.0.0 final

[rodrigoreal]

same issue for me on 2.0.1

[JustasKuizinas]

This issue still exisis on 2.1.3

[jonaszuberbuehler]

@vong-xiv @jeronimonascimento Have you tried replacing *ngSwitchCase with [hidden]? It worked in our case:

<ion-content class="has-header">
    <div [hidden]="sgm !== 'sgm1'">
        <ion-list  [virtualScroll]="items1">
            <ion-item *virtualItem="let item">
                {{ item }}
            </ion-item>
        </ion-list>
    </div>

    <div [hidden]="sgm !== 'sgm2'">
        <ion-list  [virtualScroll]="items2">
            <ion-item *virtualItem="let item">
                {{ item }}
            </ion-item>
        </ion-list>
    </div>
</ion-content>

[konstantinosftw]

I see it got Closed, but did it get solved?
I still get the same results while using VirtualScroll within an *ngSwitch. Using hidden is not equivalent since it loads all instances of *ngSwitchCase in the DOM, which can be very heavy for large lists (the main reason of using VirtualScroll on the first place).

[ghenry22]

this still exists. Here is a screencap of how a simple virtualscroll list works in a segment (same in any kind of conditional) today with ionic 3.3.0. It is 100% unusable.

In the attached screen cap the virtualscroll list is about 100 items, more than enough to fill the screen but the initial display when entering the view for the first time only displays the first couple of items in the list.

Upon scrolling the display flickers, goes blank, flashes up briefly some of the scrolling items, then they disappear. When I scroll back up I get gaps, blanks and flickering again.

Finally if I navigate to another segment and then come back the list is not displayed at all, there is nothing there, you cannot scroll to try and it to show something it is just not rendered.

You can see a brief scroll of a short list on one of the other segments showing it performs normally with ngFor as long as the list is not big enough to slow it down.

This is a major issue that makes virtualscroll combined with any kind of conditional wrapper (including very normal cases like a segment) completely 100% unusable. Having to use ngFor in these sections means that my app performs very poorly as people build up longer lists, this is resulting in significant negative feedback on my app.

Please (and I don't know how else I can beg at this point) can you look at virtual scroll and actually make it useable? I consider myself lucky that I have managed to even release my app on iOS at this point after making many concessions but I am receiving regular negative feedback about performance due to areas where I have to revert to ngFor with longer lists due to bugs like this.

[SKempin]

Same problem here as @ghenry22 is describing above. Only a few items appear, and intermittently too. At this point I can only conclude that segments are not compatible with virtual scroll.

global packages:

    @ionic/cli-utils : 1.4.0
    Cordova CLI      : 7.0.1
    Ionic CLI        : 3.4.0

local packages:

    @ionic/app-scripts              : 1.3.7
    @ionic/cli-plugin-cordova       : 1.4.0
    @ionic/cli-plugin-ionic-angular : 1.3.1
    Cordova Platforms               : none
    Ionic Framework                 : ionic-angular 3.3.0

[EllenaP]

I'm having the exact same issue as OP vong-xiv, my virtual scroll disappears, but if I put in some random text (or an entire element before my virtual scroll) it re-appears. I'm not an experienced mobile developer, but judging by my own and other's experiences here there's no way this can't be a bug and just user error. Segment use with a virtual scroll is a pretty basic functionality most devs want, please fix this, it's been almost a year since it was brought up. :(

[ghenry22]

Here is some more detail on this:

When first entering a view with virtualscroll list in a segment:

on first enter the view is blank and the list has the class virtual-scroll but no height. Scrolling slightly I see all the list items pop into the dom.

then all is displaying and scrolling fine and the list has the class virtual-scroll and a height.

When I navigate to a different segment and then come back the page is blank, no list displayed. scrolling makes no change. Inspecting the dom shows that the virtual-scroll list has the class virtual-loading attached to it but NOT the classes virtual-scroll or a height. It seems that it gets stuck in some sort of loading state.

It's now around 10 months since this issue was logged, it would be nice to have virtual-scroll working a little better within a year. Basic scroll functionality when used inside a segment or other conditional is pretty essential and nothing unusual. Similarly working properly when combined with the refresher component would be nice as they are both core ionic components and features and it is a very normal mainstream use case we are looking at.

I have attached screenshots from the safari inspector for each of the states above to help make them clear.

@manucorporat @jgw96 Maybe this info around the classes attached to the list could help to narrow this one down? PLEASE can someone look at some of the virtualscroll bugs.

[Nencydaffodil]

having same issue

[HugoHeneault]

I'm having the same issue too. :sob:
@jonaszuberbuehler solution helped me but I don't think it's the good way.

Any updates from the Ionic Team would be very appreciated!

[AngelaRg]

Any news on this??

[JustasKuizinas]

Almost year passed :)

[Artux-White]

can anyone suggest any alternatives ????

[faraazc]

I think activity on virtual scroll is important than adding new features..I hope ionic team will recognise this..Virtual scroll is ready required for real production apps as data is growing massive.

[nilebma]

Same problem here...

[SKempin]

I ended up having to redesign the UX of my app in order to circumnavigate this issue (by splitting my lists up with the segment component) - definitely not ideal!

[JustasKuizinas]

Personally I don't understand why virtual scroll is not top priority, hm maybe apps with large lists of data isn't popular. Maybe anyone found working alternative?

[lincolnthree]

Also running into the same issue as @ghenry22.

[tekkenking]

Same issue here. IONIC DEVS, i thank you guys for the love and goodies you're showing us in the mobile dev space. But this issue of segment with virtualscroll is killing me right now... please solve this issue for us.

Thanks in advance

[aggarwalankush]

@jgw96 In ionic v4 using stencil, would issues like this be resolved? or Would Ionic team first migrate virtual scroll to stencil as it is and then look into these kind of issues? Just wondering if it would be resolved in v4 release. It would be great if someone officialy can give us little bit status, I know ionic team is busy with stencil and not fixing issues currently.

[dev8gaby9fan]

Same issue

Cordova CLI: 6.2.0
Gulp version: CLI version 3.9.1
Gulp local: Local version 3.9.1
Ionic Framework Version: 2.0.0-beta.8
Ionic CLI Version: 2.0.0-beta.30
Ionic App Lib Version: 2.0.0-beta.16
OS: Windows 7 SP1
Node Version: v5.10.1

[mastronaute]

Same here, very very blocking...

[mastronaute]

@konstantinosftw using [hidden] does not work on my side. Did you really manage to make it work this way ?

[nilebma]

After spending hours trying to find a workaround, I ended up using infinite scroll on a project. Even if it not as smooth and performant as VirtualScroll, it is not a big drawback on UX in our case. Anyway, I really hope a fix could be found so we can switch back to VirtualScroll.

[HugoHeneault]

Ionic team is currently reviewing https://github.com/ionic-team/ionic/pull/12917 which should fix many of the problems here 🎉

[HugoHeneault]

I have opened a PR https://github.com/ionic-team/ionic/pull/13406 which should fix the problem here. Please try it and tell me if it's working :)

[ThodorisElissaios]

any news ?

[aggarwalankush]

I'm not expecting a fix from ionic team on this anytime soon. As they are preparing stencil and what I heard virtual scroll won't be there in stencil, some community member with knowledge has to raise a PR to fix this.

[xaxim]

What I have done in two successful projects was to replace virtualScroll lists with InfiniteScroll lists.
Hope it helps...
The performance is really nice with infinitescroll.
Moreover in iOS there is no bug when you tap the top (where the watch is) to get to the beginning of the list when you use InfiniteScroll.

home.html:

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Issue #7734 Example
    </ion-title>
  </ion-navbar>
  <ion-toolbar no-border-top>
    <ion-segment [(ngModel)]="sgm">
      <ion-segment-button value="sgm1">
        Segment1
      </ion-segment-button>
      <ion-segment-button value="sgm2">
        Segment2
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div [ngSwitch]="sgm">
    <div *ngSwitchCase="'sgm1'">
      <ion-list *ngIf="'sgm1'">
        <ion-item *ngFor="let i of items1">{{i}}</ion-item>
      </ion-list>
      <ion-infinite-scroll (ionInfinite)="doInfinite1($event)">
        <ion-infinite-scroll-content></ion-infinite-scroll-content>
      </ion-infinite-scroll>
    </div>

    <div *ngSwitchCase="'sgm2'">
      <ion-list *ngIf="'sgm2'">
        <ion-item *ngFor="let i of items2">{{i}}</ion-item>
      </ion-list>
      <ion-infinite-scroll (ionInfinite)="doInfinite2($event)">
        <ion-infinite-scroll-content></ion-infinite-scroll-content>
      </ion-infinite-scroll>
    </div>
  </div>

</ion-content>
````

home.ts:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {

sgm: string = "sgm1";
items1: number[] = [1, 2, 3];
items2: number[] = [4, 5, 6];

constructor(public navCtrl: NavController) {

}

ionViewWillEnter() {
/* in a real world example, here we would have something like :
const MAX_INITIAL_LOAD = 30;
const maxItens1 = items1FullList.length >= MAX_INITIAL_LOAD ? MAX_INITIAL_LOAD : items1FullList.length;
this.items1 = items1FullList.slice(0, maxItens1);
const maxItens2 = items2FullList.length >= MAX_INITIAL_LOAD ? MAX_INITIAL_LOAD : items2FullList.length;
this.items2 = items2FullList.slice(0, maxItens2);
*/
}

doInfinite1(infiniteScroll) {
//in a real world example, here we would fill the items1 list with the amount that keeps good performance (30 is usually good)
infiniteScroll.complete();
}

doInfinite2(infiniteScroll) {
//in a real world example, here we would fill the items2 list with the amount that keeps good performance (30 is usually good)
infiniteScroll.complete();
}

}
```

[keithdmoore]

I guess we can only hope this gets resolved with Ionic 4.0

[sonicwong]

@xaxim
infiniteScroll just have a event listener when scroll to bottom.
But virtual scroll remove top and bottom non-visible element form.
It speed up the performance when the list are long.

[ionitron-bot[bot]]

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

[ionitron-bot[bot]]

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/124