How to fix my angular page from flickering on every rest call in settimeout()

Viewed 122

I have checked numerous stackoverflow questions and have not found a solution for the way I am trying to achieve things.

Please bare with me as I am an amateur in angular 7. So what I have done is, I have called a method and have used timeout in such a way that the method will recursively be called every 4 seconds for 1 minute if the REST subscribe call response is false, if it is true I will reroute to another angular page.

The problem I am facing is that every 4 seconds my page/app is flickering for 1 minute

I narrowed down the flickering to REST subscribe call i.e.:

this.AnythingService.isFileCheckoutValid(this.number).subscribe(
            (res)=>{....}
);

that I am making everytime to check if the response is true or false, if response is false I am recursively calling checkFileAndRedirect(time) method again with incremented time, once 1 minute is passed recursive calls will be stopped and error toastr will be displayed

this is my method call:

this.checkFileAndRedirect(1)

this is the method body:

checkFileAndRedirect(time:number){
         setTimeout(() => {
          this.AnythingService.isFileCheckoutValid(this.number).subscribe(
            (res)=>{
              if(res.isFileCheckoutValid){
                this.router.navigate(["/functional/"+this.number]);
                return
              }
              time++
              if(time<15){
                this.checkFileAndRedirect(time)
              }
              else{
                this.toastr.error('Error', "Not able to create and checkout Blank Template");
                this.router.navigate(["/functional/"+this.number]);
                return
              }
            }
          );
      }, 4000);
    }

Please help me fix the flickering because of subscribe call and it's response, your help is highly appreciated

0 Answers
Related