How can you display a loading indicator after a delay using Observables, but make sure to cancel it if the loading is completed

Question

How can you display a loading indicator after a delay using Observables, but make sure to cancel it if the loading is completed

Within my customer-detail component, I have implemented code that achieves the desired outcome. However, I believe there might be a more reactive and observable way to approach this task.

Instead of using an if statement to set this.isLoading = true;, is there a method to accomplish this utilizing reactive programming techniques? For instance, by terminating or disregarding the delayed observable if the customer data is fetched first? Or could there be a different approach altogether?

export class CustomerDetailComponent implements OnInit {

  customer: Customer;
  errorMessage: string;
  isLoading: boolean;

  constructor(
    private customerService: CustomerService,
    private route: ActivatedRoute,
    private router: Router,
    private location: Location
  ) { }

  ngOnInit() { 
    let idParam = this.route.params
      .distinctUntilChanged(params => params['id']);

    idParam.subscribe(params => 
    {
      this.errorMessage = ''; 
    });

    idParam.delay(300).subscribe(params => 
    {
      if (!(this.customer && this.customer.id == params['id']))
        this.isLoading = true;
    });

    idParam.switchMap((params: Params) => this.customerService.getCustomer(params['id']))
      .subscribe(customer => 
      { 
        this.customer = customer; 
        this.isLoading = false;
      },
      error => this.errorMessage = error);
  }
}

angular typescript rxjs reactive-programming rxjs5

Answer 1

Answer №1

If you're looking to create a function that retrieves customer information, here's an example:

function fetchCustomerData(id) {
    return Observable.of({'name': 'Jane', id}).delay(1000);
}

Observable.of({'id': 55})
    .distinctUntilChanged(parameters => parameters['id'])
    .do(() => {
        // this.message = '';
    })
    .switchMap((parameters) => {
        return Observable.combineLatest(
            Observable.of(true).delay(500).startWith(null), // delay Observable
            fetchCustomerData(parameters['id']).startWith(null), // customer data Observable
           function(delayedItem, customerData) { // selection function
                if (customerData) {
                    return customerData;
                }

                if (delayedItem && !customerData) {
                    console.log('this.isLoading = true;');
                }
                return null;
            })
            .filter(customerData => customerData)
            .distinctUntilChanged(customerData => customerData['id']);
    })
    .subscribe(
        customerData => {
            console.log('Loading complete.');
            console.log(customerData);
            // this.customerDetails = customerData;
        },
        error => {
            // this.message = error;
        }
    );

Check out the live demo here: https://jsbin.com/yamezix/3/edit?js,console

The combineLatest() method in this snippet takes two Observables:

A 500ms delay
The customer data from a remote source (simulated in this case)

There's also a projection function employed to determine what should be passed on next. Both Observables use .startWith(null) to ensure they emit at least one item, triggering the combineLatest() when either changes. This helps us track which of the two initially emits - the delay or the customer data.

Additionally, there's a filter() call to eliminate all null values and a distinctUntilChanged() to prevent duplicate emissions of the same customer data (in case the customer completes first).

When we execute the code and the delay occurs first, the output will be as follows:

this.isLoading = true;
Loading complete.
{ name: 'Jane', id: 55 }

This indicates that loading is displayed before being hidden again.

And if we modify the completion time for fetchCustomerData() like so:

function getCustomerData(id) {
    return Observable.of({'name': 'Jane', id}).delay(200);
}

We would observe the following output:

Loading complete.
{ name: 'Jane', id: 55 }

In this scenario, no loading indicator is shown at all.

Answer 2

If you're looking to create a function that retrieves customer information, here's an example:

function fetchCustomerData(id) {
    return Observable.of({'name': 'Jane', id}).delay(1000);
}

Observable.of({'id': 55})
    .distinctUntilChanged(parameters => parameters['id'])
    .do(() => {
        // this.message = '';
    })
    .switchMap((parameters) => {
        return Observable.combineLatest(
            Observable.of(true).delay(500).startWith(null), // delay Observable
            fetchCustomerData(parameters['id']).startWith(null), // customer data Observable
           function(delayedItem, customerData) { // selection function
                if (customerData) {
                    return customerData;
                }

                if (delayedItem && !customerData) {
                    console.log('this.isLoading = true;');
                }
                return null;
            })
            .filter(customerData => customerData)
            .distinctUntilChanged(customerData => customerData['id']);
    })
    .subscribe(
        customerData => {
            console.log('Loading complete.');
            console.log(customerData);
            // this.customerDetails = customerData;
        },
        error => {
            // this.message = error;
        }
    );

Check out the live demo here: https://jsbin.com/yamezix/3/edit?js,console

The combineLatest() method in this snippet takes two Observables:

A 500ms delay
The customer data from a remote source (simulated in this case)

There's also a projection function employed to determine what should be passed on next. Both Observables use .startWith(null) to ensure they emit at least one item, triggering the combineLatest() when either changes. This helps us track which of the two initially emits - the delay or the customer data.

Additionally, there's a filter() call to eliminate all null values and a distinctUntilChanged() to prevent duplicate emissions of the same customer data (in case the customer completes first).

When we execute the code and the delay occurs first, the output will be as follows:

this.isLoading = true;
Loading complete.
{ name: 'Jane', id: 55 }

This indicates that loading is displayed before being hidden again.

And if we modify the completion time for fetchCustomerData() like so:

function getCustomerData(id) {
    return Observable.of({'name': 'Jane', id}).delay(200);
}

We would observe the following output:

Loading complete.
{ name: 'Jane', id: 55 }

In this scenario, no loading indicator is shown at all.

Answer 3

Answer №2

Check out this innovative rxjs 6 technique using a custom operator:

export function displayWithDelay<T>(delay: number, showLoading: () => void, hideLoading: () => void): OperatorFunction<T, T> {
  const loadingDisplayed$ = timer(delay).pipe(
    tap(() => showLoading()),
    mapTo(true),
    startWith(false)
  );

  return (source$) =>
    combineLatest([source$, loadingDisplayed$]).pipe(
      take(1),
      map(([data, delayDone]) => {
        if (delayDone) {
          hideLoading();
        }

        return data;
      })
    );
}

myStream$.pipe(displayWithDelay(300, () => this.showLoader = true, () => this.showLoader = false));

Answer 4

Check out this innovative rxjs 6 technique using a custom operator:

export function displayWithDelay<T>(delay: number, showLoading: () => void, hideLoading: () => void): OperatorFunction<T, T> {
  const loadingDisplayed$ = timer(delay).pipe(
    tap(() => showLoading()),
    mapTo(true),
    startWith(false)
  );

  return (source$) =>
    combineLatest([source$, loadingDisplayed$]).pipe(
      take(1),
      map(([data, delayDone]) => {
        if (delayDone) {
          hideLoading();
        }

        return data;
      })
    );
}

myStream$.pipe(displayWithDelay(300, () => this.showLoader = true, () => this.showLoader = false));

How can you display a loading indicator after a delay using Observables, but make sure to cancel it if the loading is completed

Answer №1

Answer №2

Similar questions

What is the method for exporting all functions from a TypeScript file with a default export included?

Tips for sending data through BLE with Ionic 3 and Angular 4

Guide to adding a class to dynamically generated Angular Material elements

Calling GraphQL mutations in ReactPGA

The Chrome debugger fails to display variable values when hovering the mouse over them

Continuously verify if there are any active child elements

Issue encountered during ng2-redux installation

It appears that when importing from a shared package in lerna, the name must include "src" at the end for Typescript or Javascript files

Creating and updating a TypeScript definition file for my React component library built with TypeScript

Different ways to pass a component function's return value to a service in Angular

Learn how to dynamically activate an icon in Angular to enhance user interaction

Defining a state in Typescript and passing it as a prop

Embedded template does not utilize property binding ngif with any directive

A Comprehensive Guide to Handling Errors in Angular 4: Passing the err Object from Service to Component

When working on styling a different Styled Component, how should one define the type of props required?

Strategies for successfully passing mock dates as event values when unit testing in Angular

Guide to leveraging clsx within nested components in React

When invoking a callback function that includes a conditional type, TypeScript mandates the inclusion of a parameter that intersects multiple types

Detecting Changes in Angular Only Works Once when Dealing with File Input Fields

Encountering the error "TypeError: null is not an object (evaluating '_ref.user')" with onAuthStateChanged in React Native using Firebase and useContext