Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Unplanned
Last Updated: 08 Apr 2025 21:03 by Dustin
Simon
Created on: 11 Jul 2023 12:20
Category: PDFViewer
Type: Bug Report
9
Loading animation of PDF-Viewer freezes

Hallo,

i want to Render PDF Files with the PDF Viewer Component.

The Data of the PDF is already fetched from the API when the PDF-Viewer starts Rendering the Loading animation appears and freezes.

After a few Seconds the PDF will be Rendered.

The size of the PDF File is about 5MB.

=====

TELERIK EDIT: Here is a possible workaround - replace the built-in PDF Viewer LoaderContainer with another one with a different animation Type.

<div class="pdfviewer-wrapper">
    <TelerikPdfViewer Height="600px" />

    @* With a Loading... label *@
    <TelerikLoaderContainer Class="pdf-loader-container"
                            OverlayThemeColor="@ThemeConstants.Loader.ThemeColor.Light"
                            Size="@ThemeConstants.Loader.Size.Large"
                            Visible="true" />

    @* Without a Loading... label *@
    @*<TelerikLoaderContainer Class="pdf-loader-container"
                                OverlayThemeColor="@ThemeConstants.Loader.ThemeColor.Light"
                                Visible="true">
            <Template>
                <TelerikLoader Size="@ThemeConstants.Loader.Size.Large"
                               Type="@LoaderType.Pulsing" />
            </Template>
        </TelerikLoaderContainer>*@
</div>

<style>
    .pdfviewer-wrapper {
        position: relative;
    }

    .pdf-loader-container,
    .k-pdf-viewer .k-loader-container {
        visibility: hidden;
    }

    .k-pdf-viewer:has(.k-loader-container:not([style*="none"])) + .pdf-loader-container {
        visibility: visible;
    }
</style>

@code {
    private byte[]? PdfViewerData { get; set; }
}


9 comments
Dustin
Posted on: 08 Apr 2025 21:03
This worked for me. Thank you!
ADMIN
Dimo
Posted on: 08 Apr 2025 06:12

Hello Dustin,

I added a workaround to the original post.

Regards,
Dimo
Progress Telerik

Enjoyed our products? Share your experience on G2 and receive a $25 Amazon gift card for a limited time!

Dustin
Posted on: 07 Apr 2025 19:41
Is there any update on this? I'm running into the same issue of the spinner stopping when loading a 7MB file. Is there a way I can change the loader type to something else? When the spinner stop it make the user think the program has stopped.
David
Posted on: 29 Apr 2024 17:47

Thank you Dimo! I'll be looking forward to that, this framework has been working great for us!

If anyone runs into this issues before the updated version, I found this method works decently: https://taithienbo.medium.com/displaying-pdfs-in-blazor-ca6b5de2930c  (albeit not very pretty to open the pdf in an iframe)

ADMIN
Dimo
Posted on: 25 Apr 2024 14:20

Hi David,

Thanks for the additional information.

I think these are two separate issues. On one hand, the PDF Viewer animation freezes, but it depends on the animation type. The other animations don't exhibit the same problem with the same large file.

On the other hand, we have a performance issue, which will be fixed in our next release.

Regards,
Dimo
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
David
Posted on: 24 Apr 2024 19:52

Hi Dimo and Nadezhda,

I am running into this issue in 2024, has the fix been added to the code?

My tests seem to show that the issue is not the loader animation, but the code that generates the PDF itself... I tried opening the "telerik.ui.for.blazor.5.1.1.pdf" from the documentation section of the Telerik Product Download page and it took over 160 seconds to finish, during which it freezes the browser due to long running javascript functions. In comparison, the https://github.com/mozilla/pdf.js script opens the same file in about 2 seconds. I'm not sure what the causes this difference or if there is a way to speed up the Telerik PDFViewer component... but just wanted to mention that.

Thank you,

David Green

ADMIN
Nadezhda Tacheva
Posted on: 29 Sep 2023 08:17

Hi Thomas and Simon,

A workaround for the time being would be to not show the loader in the PDFViewer. To do so, set the EnableLoaderContainer property to "false".

I hope this suffices until the fix is available.

Regards,
Nadezhda Tacheva
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Thomas
Posted on: 22 Sep 2023 11:22

Hi Demo

Would there be a workaround for this? We are having issues with this in our production application.

Thank you

ADMIN
Dimo
Posted on: 12 Jul 2023 11:24

Hello Simon,

I am converting your support ticket to a public bug report.

I made some experiments and found the culprit. The problem is caused by the specific CSS animation that we use in the PDF Viewer. Namely, the InfiniteSpinner loader type relies on top and left CSS style changes, while the Pulsing loader type relies on transformations. It seems that browsers stop these type of CSS animations during rendering.

You can verify this on the following REPL test page - just select some larger PDF document.

So, we can either change the loader type in the PDF Viewer, or research ways to change the animation implementation. In the meantime, please excuse us for any trouble. I hope the issue is not a major show-stopper.

Regards,
Dimo
Progress Telerik

As of R2 2023, the default icon type will be SVG instead of Font. See this blogpost for more information.
Create an account Log In
View
Type
Status
Category