new Feature: RxJs Operator which derives a loading state in a non-flickering manner

Hi all,

I would like to contribute a RxJs Operator which will derive a boolean flag of a underlying source to indicate some loading/pending state. The special thing is, it will do this to avoid flickering when e.g. using it to display a loading spinner.

Here is an example on how it will behave:

dervice-loading-1

There you can see on the left side, that for a short time a spinner is shown and then gone (flickering), where as on the right side using the operator no spinner will be shown at all bc. the threshold was not exceeded.

Another example on the behavior: derive-loading-2

Again on the left you see for a short time a spinner (flickering). On the right you see for a minimum specified time the spinner to avoid flickering. This will improve UX.

Usage example with code:

const showSpinner$ = this.someAsyncOperation$.pipe(
   // optional configuration 
   deriveLoading({threshold: 500, loadingTime: 1000})
)

ngxtension / ngxtension-platform

new Feature: RxJs Operator which derives a loading state in a non-flickering manner #440