React-pdf Loading Issue: Endless Loading of a PDF-file

I’m working on a React project where I use a PdfArea component to display PDF files. I receive a link on a PDF-file from server and then use react-pdf to show it. It works fine most of the time but sometimes when I load a PDF file, it doesn’t display and I encounter an endless "Loading page…" text even though the file i pass to the Document component is valid. This is how i receive a file:

const fetchTemplate = async () => {
        const { pdf } = await templateApi.getOne(id as string);
        const url = pdf.download_url;

        const response = await fetch(url);
        const blob = await response.blob();
        const file = new File([blob], 'uploadedFile', { type: blob.type });

        setUploadedFile(file);
};

This is how i render the PDF.

import { pdfjs, Document, Page } from 'react-pdf';

pdfjs.GlobalWorkerOptions.workerSrc = new URL(
    'pdfjs-dist/build/pdf.worker.min.mjs',
    import.meta.url,
).toString()

export const DroppableArea = (uploadedFile) => {

    return (
        <div className="h-full relative">
                <Document loading={<Spinner loading={true} color="#ff4c04" override={spinnerStyleOverride} />} file={uploadedFile} onLoadSuccess={handleLoadSuccess}>
                    <Page pageNumber={1} renderAnnotationLayer={false} renderTextLayer={false} />
                </Document>
                {children}
        </div>
    );
}

I thought there might be the problem with the worker but i don’t have a clue of how to debug it because there is no any errors. Are there any ways i can encounter the problem?

You need to sign in to view this answers

Related Post