Angular async lazy rendering with RxJS

Question

I am looking for away to do "lazy rendering" with RxJS in Angular, what I want to achieve is the following:

<div *ngFor="let item of items$ | async">
  {{item.text}}
<div>

and in the component I have:

export class ItemsComponent implements OnInit {
  public items$: Observable<Item[]>;
  
  constructor(private setStore: SetStore){}

  ngOnInit() {
     const setId = 1;
     this.items$ = this.setStore.sets$.pipe(map(sets => sets.find(set => set.id = 1).items));
  }
}

And this works fine but when the set has +50 items, the rendering takes time and it freeze's for a second or more. I was looking for a way to do it lazy by somehow rendering first 30 items and then do load the next 30 after 500ms and so on until the list reach's its end.

Edit: I have tried this approach:

const _items$ = this.setStore.sets$.pipe(
  map(sets => sets.find(set => set.id == 1).items)
);
const loadedItems = [];
_items$.subscribe(data => {
  this.items$ = from(data).pipe(
    concatMap(item => {
        loadedItems.push(item);
        return of(loadedItems).pipe(delay(1));
      })
    );
  });
})

The above works fine in terms of lazy rendering but has some disadvantages like:

• initially you don't have see any item in the page
• items are loaded one by one every 1ms, not in batch

The above codes are not tested, if needed I can provide a sample

Answer 1

You can use Virtual Scrolling with Different items sizes using ngx-ui-scroll

demo with variable height items it is quite simple to start with

<div class="viewport">
  <div *uiScroll="let item of datasource">
    <b>{{item.text}}</b>
  </div>
</div>