Why does PrimeNG VirtualScroller loadingItem not working?

user_15148124 0
Viewed 243

I have PrimeNG 11.0.0-rc.2 working with Angular 11. Im using the VirtualScroller Component but I realize that the loadingItem ng-template which is supposed to show a loader statement is not working, not even in their example, they have this:

<p-virtualScroller [value]="virtualCars" scrollHeight="500px" [itemSize]="150" [rows]="100"
    [lazy]="true" (onLazyLoad)="loadCarsLazy($event)">
    <ng-template let-car pTemplate="item">
        Car content
    </ng-template>
    <ng-template let-car pTemplate="loadingItem">
        Loading...
    </ng-template>
</p-virtualScroller>

And in the Component Class they have this:

export class LazyVirtualScrollerDemo implements OnInit {

    virtualCars: Car[];
   
    ngOnInit() {
        this.cars = Array.from({length: 10000}).map(() => this.carService.generateCar());
        this.virtualCars =  Array.from({length: 10000});
    }

    loadCarsLazy(event: LazyLoadEvent) {       
        //simulate remote connection with a timeout 
        setTimeout(() => {
            //load data of required page
            let loadedCars = this.cars.slice(event.first, (event.first + event.rows));

            //populate page of virtual cars
            Array.prototype.splice.apply(this.virtualCars, [...[event.first, event.rows], ...loadedCars]);
            
            //trigger change detection
            this.virtualCars = [...this.virtualCars];
        }, 1000);
    }

}

But the Loading... statement inside the ng-template is not showing up. Just a blank portion as if there is nothing in there, then data arrives as normal, but the ghost effect while loading never shows.

primeng angular lazy-loading
2 Answers

I have similar experience with primeng 9.0.0. I had a problem that lazy load event was never emitted so that my first idea was there could be any error in the version I had. When I updated my version, event was emitted correctly a loading started work.

Just try to update your primeng version by npm update primeng --save. This might help.

user_27913180

I've got the loading templates working by making the length variable in this.virtualCars = Array.from({length: 10000}); equal to the value of the [rows] HTML input variable of p-virtual-scroller.

So for instance

    ngOnInit() {
        this.virtualCars =  Array.from({length: 50});
    }

and

<p-virtual-scroller rows = "50"></p-virtual-scroller>
user_63517330
Related