Ionic v4: Virtual Scroll does not work inside of an ion-tab

[sbannigan]

Bug Report

Ionic Info
Run ionic info from a terminal/cmd prompt and paste the output below.

cli packages: (/usr/local/lib/node_modules)

   @ionic/cli-utils  : 2.0.0-rc.6
   ionic (Ionic CLI) : 4.0.0-rc.6

local packages:

   @angular-devkit/core       : 0.6.0
   @angular-devkit/schematics : 0.6.0
   @angular/cli               : 6.0.1
   @ionic/schematics-angular  : 1.0.0-rc.6
   Ionic Framework            : @ionic/angular 4.0.0-alpha.7

System:

   NodeJS : v8.11.2
   npm    : 6.0.1
   OS     : macOS High Sierra

Describe the Bug
ion-virtual-scroll does not load any elements when used inside an ion-tab.

Steps to Reproduce
Steps to reproduce the behavior:

1. Generate a new Ionic v4 project with the tabs template.
2. Add a ion-virtual-scroll element following the Ionic 4 example inside one of the tab page components. See that this virtual scroll doesn't load any children and throws no errors.
3. Remove the ion-tab that wraps the ion-router-outlet
4. See that the virtual scroll items now load.

Related Code
This doesn't work:

<ion-tabs>
  <ion-tab label="Home" icon="home" href="/tabs/(home:home)">
    <ion-router-outlet name="home"></ion-router-outlet>
  </ion-tab>
</ion-tabs>

This does:

<ion-tabs>
	<ion-router-outlet name="home"></ion-router-outlet>
</ion-tabs>

Expected Behavior
ion-virtual-scroll should work inside of a ion-tab

Additional Context
After poking around in https://github.com/ionic-team/ionic/blob/51c2aa69a29dec1f2bb76c1b7387716b7872fd4b/core/src/components/virtual-scroll/virtual-scroll.tsx#L366. this.scrollEl.offsetHeight logs out at 0 when wrapped in the ion-tab, but returns the correct height when not. For some reason even though the ion-scroll element exists, it has 0 height when inside the ion-tab. Wrapping the onResize() method and the scrollEl.componentOnReady() callback in a setTimeout(() => {}) fixes the issue, but seems like a hacky solution.

It is not the only problem with the virtual list. There is a conceptional bug. The html scroll has an empty space up, if you scroll fast on some heavy element, and stops too frequently when you scroll down.

Yes you can load more element into the list, but you can really save big amount of load in the long run.

The main problem is, that you shouldn't use the div as a virtual list, the scrolling speed should be managed by touch / mouse etc. I just realized it very lately, when i made my own virtual list, which has got far better feature set. (you cannot scroll up infinitely, like in the case of google calendar, if you don't do it. You don't know what is the top element, and there are other stuff also i have to say)

I realized a bug in the android recycle list view, and the facebook itself also.

I didn't have high hopes on v4, so i have detached my project in november last year from ionic.
I left out two months, but end of june i think i will finish my mobile framework.

[sbannigan]

Temporary solution I'm using is adding an ngIf to the ion-virtual-scroll and setting it to true inside a setTimeout in the ionViewDidEnter() lifecycle hook:

ionViewDidEnter() {
	setTimeout(() => {
		this.loaded = true;
	});
}

[faraazc]

@manucorporat @mlynch @adamdbradley Please consider virtual-scroll + infinite scroll bugs seriously as they basic necessary feature required for the maximum data-driven Apps. Ionic 2 and 3 implementations did not justify the needs, as a result, many devs moved to native frameworks after waiting for a long time. As a community, we tried to solve this problem but with less expertise, it was hard to achieve. It will be great if V4 does not appoint and Ionic would consider VS + infinite scroll seriously and high prioritize them. This request is not just from me but from 25 other fellow devs who love Ionic and love to use Ionic for every idea/business/implementation.

Last but not least Thanks for providing Ionic which is the best gift web community has received so far.

Thanks

[mlynch]

@manucorporat has made a lot of virtual scroll improvements for v4. This has been a priority for us and we hope you find it resolves a number of these issues

[cptflammin]

Hi ! I cannot reproduce your example, and stripping my hair with virtualscroll and ionic 4. Would you be so kind to share your example code in order to make it working according to your comment ?

[mlynch]

@gydammin are you using v4 with virtual scroll? We would LOVE your feedback. Please don't struggle in the dark here. What problems are you having?

[cptflammin]

hi there!
help greatly appreciated !
Yes, I am trying to use virtualscroll with ionic 4, but struggling with the fact it seems implementation is different from ionic 3. If you have an example of implementation with ionic 4, that's would be great. Note: I generated application with tabs and modifying homepage to start with
note: data from service is ok, displayed correctly with a *ngFor

So far what I did:

<!-- home.page.html -->
<ion-virtual-scroll [items]="categoriesService.content() | async" approxItemHeight="120px">
        <ion-item *virtualItem="let item">
            <ion-img [src]="item.picture.medium"></ion-img>
        </ion-item>
    </ion-virtual-scroll>

// home.page.ts

constructor(private categoriesService: CategoriesService) {
    }

export class CategoriesService {
[...]

content() : Observable<Category[]> {
// console.log(this.categories);
return of(this.categories);
}

![image](https://user-images.githubusercontent.com/10996176/41298324-6d71e0d6-6e61-11e8-93f5-034ff2347fc5.png)

[mhartington]

@gydammin Note that virtual scroll was not setup correctly in alpha-6, meaning you could have some issues there. Try alpha-7, which should contain the right proxies needed.

For examples, we have our test case app in the Angular directory. This should have right right markup

https://github.com/ionic-team/ionic/blob/master/angular/test/testapp/src/app/virtual-scroll/virtual-scroll-page.component.ts

[cptflammin]

Tested and working a breeze!
I get however an error if replacing with , is it related to page lazy loading maybe?

<ion-virtual-scroll [items]="items" approxItemHeight="120px">
                    <ion-card *virtualItem="let item; let itemBounds = bounds;">
                        <div>
                            <ion-img [src]="item.imgSrc" [height]="item.imgHeight" [alt]="item.name"></ion-img>
                        </div>
                    </ion-card>
                </ion-virtual-scroll>

According to ionic 3 doc, it should work, did smth change in between ?

[cptflammin]

@mlynch @mhartington noticed the same issue as @sbannigan, but his workaround *ngIf is working.

<ion-grid>
        <ion-row justify-content-center>
                <ion-virtual-scroll *ngIf="loaded" [items]="items" approxItemHeight="120px">
                    <ion-card *virtualItem="let item; let itemBounds = bounds;" style="width: 100%">
                            <ion-img [src]="item.imgSrc" height="120" [alt]="item.name"></ion-img>
                    </ion-card>
                </ion-virtual-scroll>
        </ion-row>
    </ion-grid>

[peterramaldes]

same here!

[kelvinjp]

+1

[L96Github]

same issue here

[cyrilcheung7925]

same issue here +2