Ionic 4 Loader is getting dismissed but data is not shown

I want to show the loading controller until data is fetched from the server. But the loader is getting dismissed but data is not shown on the page.
I have posted two images. The first image shows data is not displayed on the page and the second image shows console.log values. I am getting proper values on console.log but not getting displayed.
If I refresh the page again it is working fine.
Whats gone wrong? Please help


.ts

import { LoadingController } from '@ionic/angular';
constructor(public loadingController : LoadingController ) { }

ngOnInit() {

    this.present()

    this.razorpay = new Razorpay({
      key : 'rzp_test_rHtoop1fZXneoh',
      key_secret: 'Rle0yzx7WK93CKaeCufQGnA6'
    })

    this.razorpay.once('ready', async (response) => {
      
      this.banks = response.methods.netbanking
      console.log(this.banks)

      this.hdfc = response.methods.netbanking.HDFC
      console.log(this.hdfc)

      this.icici = response.methods.netbanking.ICIC
      console.log(this.icici)

      this.idbi = response.methods.netbanking.IBKL
      console.log(this.idbi)

      this.kotak = response.methods.netbanking.KKBK
      console.log(this.kotak)

      this.sbi = response.methods.netbanking.SBIN
      console.log(this.sbi)

      this.axis = response.methods.netbanking.UTIB
      console.log(this.axis)
      this.display = true

      this.dismiss()

    })
    

  }

async present() {
    this.isLoading = true;
    return await this.loadingController.create({
      duration: 5000,
    }).then(a => {
      a.present().then(() => {
        console.log('presented');
        if (!this.isLoading) {
          a.dismiss().then(() => console.log('abort presenting'));
        }
      });
    });
  }

  async dismiss() {
    this.isLoading = false;
    return await this.loadingController.dismiss().then(() => console.log('dismissed'));
  }

}

.html


 <ion-list>
    <ion-list-header>
      Popular banks
    </ion-list-header>
    <ion-item (click)="selected_bank('HDFC')">
      <div>
        <img src="assets/banklogo/hdfc.png" height="50" width="50">

      </div>

        &nbsp;
        &nbsp;
          <ion-label>
            {{hdfc}}
          </ion-label>
          <ion-icon name="arrow-dropright" slot="end" ></ion-icon>
    </ion-item>
  

    <ion-item (click)="selected_bank('ICIC')">
      <div>
        <img src="assets/banklogo/icici.jpg" height="40" width="50">

      </div>
        &nbsp;
        &nbsp;
          <ion-label>
            {{icici}}
          </ion-label>
          <ion-icon name="arrow-dropright" slot="end" ></ion-icon>
    </ion-item>    

    <ion-item (click)="selected_bank('KKBK')">
      <div>
        <img src="assets/banklogo/kotak3.jpg" height="40" width="50">
      </div>
      &nbsp;
      &nbsp;
      <ion-label>
         {{kotak}}         
      </ion-label>
      <ion-icon name="arrow-dropright" slot="end" ></ion-icon>

    </ion-item>

    <ion-item (click)="selected_bank('SBIN')">
      <div>
        <img src="assets/banklogo/sbi2.png" height="30" width="40">
      </div>
      &nbsp;
      &nbsp;
      &nbsp;
      
      <ion-label>
          {{sbi}}
      </ion-label>
      <ion-icon name="arrow-dropright" slot="end" ></ion-icon>

    </ion-item>


    <ion-item  (click)="selected_bank('IBKL')">
      <div>
        <img src="assets/banklogo/idbi2.png" height="40" width="40">
      </div>
      &nbsp;
      &nbsp;
      &nbsp;
      <ion-label>
        {{idbi}}
      </ion-label>
      <ion-icon name="arrow-dropright" slot="end" ></ion-icon>

    </ion-item>
   
  </ion-list>

  
 <ion-list *ngIf="display">
  <ion-list-header>
    All banks 
  </ion-list-header>
   <ion-item  *ngFor="let bank of banks | keyvalue " (click)="selected_bank(bank.key)">
    <ion-label>
      {{bank.value }}
    </ion-label>
    <ion-icon name="arrow-dropright" slot="end"></ion-icon>

   </ion-item>

 </ion-list>

I would find this code much easier to follow without all the async and await, but I think the most pressing problem is that you’re assigning the loading controller to a lexical variable in presentLoading and trying to dismiss it from a controller property.

Hello @rapropos. Thank you for your reply. But now I am facing strange problem. The loader is ge.tting dismissed but data is not shown. If I again refresh page it is working fine. Thank you in advance. I have updated the question