Simple operator helping us to render array with delay

LazyArray.ts

import { animationFrameScheduler, from, Observable, of, scheduled } from 'rxjs';
import { bufferCount, concatMap, delay, mergeMap, scan, tap } from 'rxjs/operators';

export const lazyArray =
  <T>(delayMs = 0, concurrency = 2, isFirstEmission = true) =>
  (source$: Observable<T[]>) =>
    source$.pipe(
      mergeMap((items) =>
        !isFirstEmission
          ? of(items)
          : from(items).pipe(
              bufferCount(concurrency),
              concatMap((value, index) => scheduled(of(value), animationFrameScheduler).pipe(delay(index * delayMs))),
              scan((acc: T[], steps: T[]) => [...acc, ...steps], []),
              tap((scannedItems: T[]) => (scannedItems.length === items.length ? (isFirstEmission = false) : null))
            )
      )
    );