LoadingController issue

Ionic Framework
1

Well, this issue is about ionic 4 . I am unable to create an issue on ionic 4 forum that’s why putting here.

I have created a loader component

import { Component, OnInit } from '@angular/core';
import { LoadingController } from '@ionic/angular';
import { Injectable } from '@angular/core';


@Injectable()
export class LoaderComponent {

  isLoading = false;
  loading: any;

  constructor(public loadingController: LoadingController) {
    console.log("loader component init");
  }

  async presentLoading() {
    if (this.isLoading) {
      return;
    }
    console.log("I am here");
    this.isLoading = true;
    this.loading = await this.loadingController.create({
      message: 'Please wait....'
    });
    return await this.loading.present();
  }

  dismiss() {
    if (this.isLoading && this.loading) {
      this.loading.dismiss();
      this.isLoading = false;
    }
  }

}

and following is the HttpInterceptor I am using

import { Injectable } from '@angular/core';
import {
  HttpEvent, HttpInterceptor, HttpHandler, HttpRequest
} from '@angular/common/http';

import { Observable, from } from 'rxjs';
import { LoaderComponent } from 'src/app/components/loader/loader.component';
import { LoadingController } from '@ionic/angular';
import { finalize } from 'rxjs/internal/operators/finalize';
import { catchError } from 'rxjs/internal/operators/catchError';
import { HttpResponse, HttpErrorResponse } from '@angular/common/http/src/response';

export class ShowLoaderInterceptor implements HttpInterceptor{
  loading;
   constructor(private loaderComponent:LoaderComponent,public loadingController:LoadingController){}
  
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    console.log("interceptor");
    //let clone=req.clone();

    this.loaderComponent.presentLoading();
    return next.handle(req).pipe(
      finalize(()=>{
        this.loaderComponent.dismiss();
      })
    );
    
  }
   
}

Well, when I am calling simple get request , the request is get almost completed and then loader appears due to it’s asynchornous behaviour. I don’t how to solve this issue.Kindly help me out.
Thanks