Loading spinners never go away

[sjsnider]

Bug Report or Feature Request (mark with an x)

- [ ] Regression (a behavior that used to work and stopped working in a new release)
- [ ] Bug report -> please search issues before submitting
- [ ] Feature request
- [x ] Documentation issue or request

This library has been working great for us for a while, but have come across this one pdf that only ever shows the spinning loaders (unfortunately I can't share the PDF here since it belongs to a client). (error) never fires, but (after-load-complete) and (on-progress) do. onProgress just fires one time saying the load is complete {loaded: 63290, total: 63290}. We are supplying the src url (something like https://attachments.hey.com/blah.pdf). One thing worth noting is if I download the PDF and then input the file to the demo it works fine. Any suggestions on things I could try with this PDF? Very much at a loss. This pdf is 3 small business cards and the pdfInfo recognizes it as such saying it has 3 pages

[VadimDez]

Does the same pdf work here https://vadimdez.github.io/ng2-pdf-viewer/ ?

[sjsnider]

Ya, that's what I was not so clearly trying to convey. If I download the PDF and then go there and click "Choose file" it does work just fine. And again this particular PDF is definitely an anomaly, been a while since anyone has mentioned a PDF not loading. The only thing I can think that's different about it is the small pages, but of course it does work in your demo. Sorry, I know I'm not giving you very much to go off of. Appreciate you taking the time to look into it at all.

[sjsnider]

I cant just input the url into your demo though because of CORS issues, have to actually download it and then Choose the file. Anything you can think of trying? Thanks

[wild2999]

I have the same problem. If I change zoom of pdf preview, some of these pages is loading infinitely.

If I change zoom on the https://vadimdez.github.io/ng2-pdf-viewer with your default pdf, spinner is loading infinitely as well.
The zoom have to be pretty small. The size should be 0.3 or less.

[ColinT]

This issue could be related to #422.
If so, posting your styling and template could help create a reproduction.
In short pdfjs-dist thinks that your page is not in the viewable area and chooses not to render the pages to conserve resources.

You can also try rendering the pdf with the base pdfjs-dist library here, to check if it is an issue with the underlying renderer or ng2-pdf-viewer.

Also, you can overcome CORS issues for development purposes with https://cors-anywhere.herokuapp.com/

[RamaKrishnanGanesan]

Facing the same issue in my angular 6 application.

@ColinT : Thanks for the CORS issue fix. That worked!

The pdf downloads fine (able to notice it in the browser's network traffic).
Seeing loading gif in the DOM for each page of my pdf. The DOM for the pdf page is not getting generated resulting in the same result ( as per screenshots of @sjsnider )

[romanpon]

In short pdfjs-dist thinks that your page is not in the viewable area and chooses not to render the pages to conserve resources.

This helped

I was using pdf-viewer in a tab which was initialized but not visible until clicked on. I was able to make viewer working by rendering viewer only when tab with it opened by user.

[simbrams]

In short pdfjs-dist thinks that your page is not in the viewable area and chooses not to render the pages to conserve resources.

This helped

I was using pdf-viewer in a tab which was initialized but not visible until clicked on. I was able to make viewer working by rendering viewer only when tab with it opened by user.

Same for me I was using bootstrap tab so I aded a *ngIf clause to render my component with the pdf-viewer to make it work and remove the infinite loading spinner.

[maxime1992]

All the above didn't work for me and I think it might be related to #364

[avssolutions]

Any good fix for this issues, thanks?

[alex88]

I had the same issue on our page only when viewed in 4k, fixed with the position relative parent

[VadimDez]

Fixed in 6.0.0 See https://github.com/VadimDez/ng2-pdf-viewer/blob/master/CHANGELOG.md#600

[gouravagarwal]

Having a similar issue, when the pdf src is similar for two consecutive requests, the onloadComplete and onError methods are not fired and hence the loader does not stop.

[avssolutions]

How to find the solution, i can not update to new angular, i am stuck on 4

[TreehouseNorris]

If it helps anyone: (I'm on ng2-pdf-viewer 9.0.0, using the "breaking change css height fix")
In my scenario, the user can choose from a list of pdfs and view them one at a time. The first pdf document rendered just fine, then every-other document would not emit page-rendered event. So I changed my code from

goToNextOne() {
    await fileUriToDataUri(chosenOne).then((dataUri) => {
        this.src = dataUri;
    }
}

to be

goToNextOne() {
    this.src = null; // Clear in-between
    await fileUriToDataUri(chosenOne).then((dataUri) => {
        this.src = dataUri;
    }
}

and every document renders now.

[MichaelEvanchik]

wont work for me its on ngOnInit, or nothing for api blobs

  ngOnInit(){
        this.LoadIt();
    }
    LoadIt()
    {
        this.fileResponse = null;
        this.theBlob = null;
        this.pdfSrc = null;
        
        const ai = this.store$.selectSnapshot(ApiState.currentAccount).account;

        this.options = new RtlPifRequest(
        {
            mrsAccountNumber: ai.accountNumber,
            isSpanish: (this.translate.currentLang.toLocaleLowerCase() == "en") ? false : true
        });

         this.api.accountByteLetter(this.options)
        .subscribe((pdf: FileResponse) => {
            this.fileResponse = pdf
            this.theBlob = new Blob([this.fileResponse.data], { type: "blob" });
            const fileReader = new FileReader();
            fileReader.onload = () => {
                this.pdfSrc = new Uint8Array(fileReader.result as ArrayBuffer);

            };
            fileReader.readAsArrayBuffer(this.theBlob);             
        });
    
    }

[Alex25197]

I had the same issue on our page only when viewed in 4k, fixed with the position relative parent

For those who don't know about the above and came for an answer to the same problem, you can fix it with the info in this other issue #219, basically you need to set position relative to the inner pdf viewer component div and set the max width of the pdf-viewer class to something fixed.

I did this solution because I couldn't upgrade the dependency to 6.0.0 because angular version restrictions so in hoping so no more people spend so many hours searching for a solution for this like me without upgrading the widget, here it is.