Angular 2/5 displaying a loading spinner during an XMLHttpRequest request

Question

Angular 2/5 displaying a loading spinner during an XMLHttpRequest request

Various loading indicators are used during an xhr request, such as full-page overlays or messages displayed in specific spots on the screen.

I aim to develop a streamlined solution that can be easily implemented across multiple projects with minimal additional work. To achieve this, I have chosen to embed the loading indicator directly within the button being clicked on.

For instance, when clicking on a button labeled "SAVE", I want the button to display a spinner icon next to the word "SAVE" while taking the following actions:

1) Immediately disable the button to prevent further clicks.

2) Show a spinning gif loader beside the word "SAVE", continuing until the XHR response is received.

3) Enable the button again once the XHR response is received.

By placing the spinner within the button, there is no additional footprint or need for extra <div> elements in the HTML.

Could someone provide guidance on the necessary topics to learn for implementing this?

I am familiar with XHR and Angular's (click) event handling. However, I require assistance in managing the appearance and disappearance of the spinner, as well as enabling/disabling the button.

I believe the solution involves techniques like ngStyle, ngClass, mat-icons, and the [disabled] directive for the button, but I need help putting it all together.

css angular

Answer 1

Answer №1

Even though you're familiar with the challenging parts, let's break it down step by step.

Looking at it from an Angular perspective, there are a few key components:

Your button incorporating a (click) handler and [disabled] attribute,
A placeholder like <div class="spinner"/>,
A service responsible for communicating with the backend.

The general algorithm consists of:

Disabling the button and displaying the spinner when "loading" begins,
Enabling the button again and hiding the spinner once the "loading" is complete.

Assuming your service is simple:

class MyService {
  constructor(private http: HttpClient) {}

  loadResults() {
    return this.http.get('/api/endpoint');
  }
}

This service will provide an observable that either succeeds, fails, or hangs.

Let's address our objectives. First, handle the button (click) event:

<button (click)="getResults()">Get results</button>

Your component needs to fetch the results and manage them, but only if there isn't already loading in progress. It should also update a "loading" property accordingly.

getResults() {
  if (!this.loading) {
    return;
  }
  this.loading = true;
  this.myService.loadResults()
    .subscribe(results => this.results = results)
    .finally(() => this.loading = false); 
}

We now have a boolean loading flag on the component. Let's utilize it on the component, button, and spinner.

<button (click)="getResults()" [disabled]="loading">Get results</button>

<div class="spinner" [ngClass]="{ hidden: loading }"></div>

With these adjustments, you should be all set.

Edit: In response to your feedback about placing the spinner within the <button> tag itself and using the HTML hidden attribute instead of a CSS class, here's how you can implement it:

<button class="login-button" (click)="checkData()">
  <i [hidden]="!isLoading" class='material-icons'>spinner</i>
  <span [hidden]="isLoading">Log In <i class='material-icons'>arrow_forward</i></span>
</button>

Alternatively, you could completely remove the element from the DOM:

<button class="login-button" (click)="checkData()">
  <i *ngIf="loading" class='material-icons'>spinner</i>
  <span *ngIf="!loading">Log In <i class='material-icons'>arrow_forward</i></span>
</button>

Answer 2

Even though you're familiar with the challenging parts, let's break it down step by step.

Looking at it from an Angular perspective, there are a few key components:

Your button incorporating a (click) handler and [disabled] attribute,
A placeholder like <div class="spinner"/>,
A service responsible for communicating with the backend.

The general algorithm consists of:

Disabling the button and displaying the spinner when "loading" begins,
Enabling the button again and hiding the spinner once the "loading" is complete.

Assuming your service is simple:

class MyService {
  constructor(private http: HttpClient) {}

  loadResults() {
    return this.http.get('/api/endpoint');
  }
}

This service will provide an observable that either succeeds, fails, or hangs.

Let's address our objectives. First, handle the button (click) event:

<button (click)="getResults()">Get results</button>

Your component needs to fetch the results and manage them, but only if there isn't already loading in progress. It should also update a "loading" property accordingly.

getResults() {
  if (!this.loading) {
    return;
  }
  this.loading = true;
  this.myService.loadResults()
    .subscribe(results => this.results = results)
    .finally(() => this.loading = false); 
}

We now have a boolean loading flag on the component. Let's utilize it on the component, button, and spinner.

<button (click)="getResults()" [disabled]="loading">Get results</button>

<div class="spinner" [ngClass]="{ hidden: loading }"></div>

With these adjustments, you should be all set.

Edit: In response to your feedback about placing the spinner within the <button> tag itself and using the HTML hidden attribute instead of a CSS class, here's how you can implement it:

<button class="login-button" (click)="checkData()">
  <i [hidden]="!isLoading" class='material-icons'>spinner</i>
  <span [hidden]="isLoading">Log In <i class='material-icons'>arrow_forward</i></span>
</button>

Alternatively, you could completely remove the element from the DOM:

<button class="login-button" (click)="checkData()">
  <i *ngIf="loading" class='material-icons'>spinner</i>
  <span *ngIf="!loading">Log In <i class='material-icons'>arrow_forward</i></span>
</button>

Angular 2/5 displaying a loading spinner during an XMLHttpRequest request

Answer №1

Similar questions

What are some ways to display unprocessed image data on a website using JavaScript?

Encountering an issue while trying to convert a JSON object into an array of a specific class type

Traveling and mapping in Angular version 5

I can't seem to get my Angular workspace with multiple projects to build my library. What could be the issue?

Ways to time animations differently and activate two animations at the same time in every loop

Obtaining legitimate CSS property names for React dynamically

What is the best way to incorporate a Django variable as the width parameter in a style tag within HTML?

What are the steps to defining a static constant within a TypeScript class?

What is the best way to include numerous triangles in a single element?

Gradual disappearance of preloader as the page loads

Enhance your map by incorporating an overlay with ngx-openlayers

Issues with CSS animations and transformations on SVG files are not being resolved

Arranging sibling buttons to wrap seamlessly like text

Angular's routerLink feature has a tendency to direct me to a completely empty page

Display Google Maps and YouTube videos once user consents to cookies

Adjust the height of an element using CSS based on the height of another

Guide on applying a CSS shimmer effect to a group of HTML elements simultaneously

Updating the content of a div element to display as a solid color instead of

Using Jquery to transfer text from a form to a DIV and ensuring the final character is verified

What steps should I take to ensure that this accordion is responsive?