Getting an infinite loop from set function in ember.js

I am trying to display a div with the class loader only while a PDF page is loading.

It works, but somehow the function this.displayPage(pdf,1) is getting looped over.

After renderPage(page) is called, it goes back to didRender() > this.displayPage(pdf,1).

This only happens when I use set(this, 'pageIsRendering', false/true) so I'm thinking my problem might have to do with this.

I tried debugging my code but I don't understand what's creating the loop.

I am using PDFJS library to display the PDF document.

Here is my component.js code

  pageisRendered: true,
  pageIsRendering: false,

  didRender() {
    pdfjsLib.GlobalWorkerOptions.workerSrc = 'pdf.worker.js';
    set(this, 'setPageValueInput', document.querySelector('.set-page-value'));
    let pdfDoc = pdfjsLib.getDocument(this.url).then(pdf => {
      this.displayPage(pdf, 1);
      this.shownPdf = pdf;
      document.querySelector('.total-page-number').value = this.shownPdf.numPages;
    });
  },

  displayPage(pdf, num) {
    set(this, 'pageIsRendering', true);
    pdf.getPage(num).then(page => {
      if (this.pageisRendered) {
        this.pageisRendered = false;
        this.renderPage(page);
      }
    });
  },

  renderPage(page) {
    let scale = this.pdfScale; // render with global pdfScale variable
    let canvas = document.querySelector('.pdf-canvas');
    let context = canvas.getContext('2d');
    let viewport = page.getViewport(scale);
    canvas.height = viewport.height;
    canvas.width = viewport.width;
    let renderContext = {
      canvasContext: context,
      viewport
    };
    page.render(renderContext).then(() => {
      this.pageisRendered = true;
      set(this, 'pageIsRendering', false);
    });
  },

Here is my html code

<div class="pdf-container ">
    <div class="canvas-container">
        
          <div class="loader">
            
          </div>
        
    </div>
</div>