CODEWITHSUNDEEP
angulartwitter-bootstrap
moris62
moris62

Reputation: 1045

how can i show loader until the result is ready in Angular and bootstrap

Im calling a API which takes a few secons to get the response :

   this.http.get(`http://localhost:44301/consentinitiation/${this.qid}`)
    .pipe(retryWhen(_ => {
    return interval(1000)
    }))
   .subscribe(result => {result
   this.qrcodelink=result["qrCodeLink"];
    this.isDisplayed=true;
     })

on my HTML component I have a qrcode which is loading:

    <div *ngIf="isDisplayed">
        <qr-code [value]="qrcodelink"  ></qr-code>  
      </div>

I need to put the loader here,I have found bootstrap loader tag

  <div class="spinner-border text-primary" role="status">
 <span class="sr-only">Loading...</span>
 </div>

How can i use it?

Upvotes: 0

Views: 2374

Answers (2)

Lorenzo Miscoli
Lorenzo Miscoli

Reputation: 202

Show the spinner while you're waiting for the server response.

With bootstrap it's pretty easy to create a spinner that takes up the whole page and doesn't show the other elements. You can try like this:

<div *ngIf="!isDisplayed"
  class="position-fixed w-100 h-100 d-flex align-items-center justify-content-center bg-white spinner-overlay">
  <div class=" text-center">
    <div class="spinner-border mb-1 text-primary" role="status"></div>
  </div>
</div>

These are all bootstrap classes except for spinner-overlay which does nothing more than set the z-index property.

.spinner-overlay {
    z-index: 2000;
}

After you get the server response just set this.isDisplayed = true;

Upvotes: 0

eko
eko

Reputation: 40647

Why not use the isDisplayed field to display the loading:

<div *ngIf="!isDisplayed" class="spinner-border text-primary" role="status">
 <span class="sr-only">Loading...</span>
</div>

Also maybe reset the displayed when making a new call with a tap

this.http
  .get(`http://localhost:44301/consentinitiation/${this.qid}`)
  .pipe(
    retryWhen((_) => interval(1000)),
    tap(() => (this.isDisplayed = false)),
  )
  .subscribe((result) => {
    this.qrcodelink = result['qrCodeLink'];
    this.isDisplayed = true;
  });

Upvotes: 1

Related Questions