Loading in chunks, vsEnd keeps triggering with endIndex === buffer.length-1

What am I doing wrong? Without scrolling at all, vsEnd triggers everytime pics$ is updated, and with an endIndex value equaling the length of items-1. Should I not use AsyncPipe? Does virtual-scroller need to have a fixed pixel height instead of 100% (.h-100)?

@Component({
  selector: 'app-pic-list',
  templateUrl: './pic-list.component.html',
  styleUrls: ['./pic-list.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class PicListComponent implements OnInit, OnDestroy {
  private take = 100;
  destroy$ = new Subject();
  pics$: Observable<IPic[]>;
  private buffer: IPic[] = [];
  private loading = false;
  private gotAll$ = new Subject();
  @ViewChild('scroll', { static: true }) scroll: VirtualScrollerComponent;
  constructor(private api: ApiService) {}

  ngOnInit() {
    this.pics$ = this.scroll.vsEnd.pipe(
      takeUntil(this.destroy$),
      takeUntil(this.gotAll$),
      startWith(null),
      filter(
        event =>
          !this.loading && (!event || event.endIndex >= this.buffer.length - 1)
      ),
      tap(e => console.log(e, this.buffer.length)),
      tap(() => (this.loading = true)),
      switchMap(() =>
        this.api
          .get<IPic[]>('pics', {
            take: this.take,
            skip: this.buffer.length
          })
          .pipe(
            tap(pics => pics.length < this.take && this.gotAll$.next()),
            tap(pics => (this.buffer = this.buffer.concat(pics))),
            map(() => this.buffer),
            tap(() => (this.loading = false))
          )
      )
    );
  }
  ngOnDestroy() {
    this.destroy$.next();
  }
}

<virtual-scroller #scroll [items]="pics$ | async" class="h-100">
  <app-pic [pic]="pic" *ngFor="let pic of scroll.viewPortItems"></app-pic>
</virtual-scroller>

// app-pic.scss
:host { display:inline-block; height:200px; width:200px; } 

// Real scroll position should be close to 0
// tap(e => console.log(e, this.buffer.length))
$event: { 
  endIndex: 699
  endIndexWithBuffer: 699
  maxScrollPosition: 0
  scrollEndPosition: 28000
  scrollStartPosition: 0
  startIndex: 0
  startIndexWithBuffer: 0
}
this.buffer.length: 700

[raysuelzer]

Yeah, it fires infinitely for me when you reach the end. It seems to have to do with an improper or failure to round fractional values. Forgetting the exact issue, but I’m pretty sure that someplace it is comparing the current scroll position (rounded) with the scroll position not rounded. So if you end up having a difference there then it will loop infinitely.

[spenoir]

Not infinite but a hell of a lot more than it should. It just fires a whole load of duplicate events. Last time I checked it fired around 7 or 8 times I think.

On Tue, Oct 5, 2021 at 12:56 AM Ray Suelzer @.***> wrote:

I’m using css grid as it works very well for masonry layout. The workaround to this problem for me was to use distinctUntilKeyChanged(‘scrollEndPosition’) when subscribing to the vsEnd event.

But, the vsEnd event still fires in an infinite loop correct? You are just ignoring it?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/rintoj/ngx-virtual-scroller/issues/336#issuecomment-933944152, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABP4IEDAYMCJHYZCGW3EL3UFI5LVANCNFSM4HR76EKA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.