rxjs loading indicator with delay opening and close immediately, open observable will be cancel if request time less than 300ms

rxjs-loading-indicator.ts

import { iif, of, Subject } from 'rxjs';
import { switchMap, delay, finalize } from 'rxjs/operators';
import { ajax } from 'rxjs/ajax';

const loadingSubject = new Subject<boolean>();

const loading$ = loadingSubject.pipe(
  switchMap(flag => {
    return iif(
      () => flag,
      of(flag).pipe(delay(300)),
      of(flag)
    )
  })
)

const loadingElem = document.getElementById('loading-elem')
loading$.subscribe(flag => {
  loadingElem.style.display = flag ? 'block' : 'none'
})

loadingSubject.next(true) // open loading with 300ms delay
ajax('/api/get/users/list').pipe(
  finalize(() => {
    loadingSubject.next(false) // close loading immediately, open loading observable will be cancel if request time less than 300ms
  })
).subscribe(console.log)