<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; }
}

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            PdfViewerData = await System.IO.File.ReadAllBytesAsync(......);
            await Task.Delay(1);
            StateHasChanged();
        }

        await base.OnAfterRenderAsync(firstRender);
    }

<h1>PDF Viewer Tests</h1>

<h2>Load Initially</h2>

<TelerikPdfViewer Data="@FileData1"
                  EnableLoaderContainer="true"
                  Height="30vh"
                  Zoom="0.75m">
</TelerikPdfViewer>

<h2>Load On Demand</h2>

<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Primary"
               OnClick="@( async () => await LoadPdf(2) )">Load PDF</TelerikButton>

<TelerikPdfViewer Data="@FileData2"
                  EnableLoaderContainer="true"
                  Height="30vh"
                  Zoom="0.75m">
</TelerikPdfViewer>

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

    protected async override Task OnInitializedAsync()
    {
        await LoadPdf(1);
    }

    public async Task LoadPdf(int id)
    {
        await Task.Delay(1000);

        if (id == 2)
        {
            FileData2 = Convert.FromBase64String(PdfBase64);
        }
        else
        {
            FileData1 = Convert.FromBase64String(PdfBase64);
        }

        StateHasChanged();

        await Task.Delay(300);
    }

    private const string PdfBase64 = "JVBERi0xLjEKMSAwIG9iajw8L1R5cGUvQ2F0YWxvZy9QYWdlcyAyIDAgUj4+ZW5kb2JqCjIgMCBvYmo8PC9UeXBlL1BhZ2VzL0tpZHNbMyAwIFJdL0NvdW50IDEvTWVkaWFCb3ggWy00MCAtNjQgMjYwIDgwXSA+PmVuZG9iagozIDAgb2JqPDwvVHlwZS9QYWdlL1BhcmVudCAyIDAgUi9SZXNvdXJjZXM8PC9Gb250PDwvRjE8PC9UeXBlL0ZvbnQvU3VidHlwZS9UeXBlMS9CYXNlRm9udC9BcmlhbD4+ID4+ID4+L0NvbnRlbnRzIDQgMCBSPj5lbmRvYmoKNCAwIG9iajw8L0xlbmd0aCA1OT4+CnN0cmVhbQpCVAovRjEgMTggVGYKMCAwIFRkCihUZWxlcmlrIFBkZlZpZXdlciBmb3IgQmxhem9yKSBUagpFVAplbmRzdHJlYW0KZW5kb2JqCnhyZWYKMCA1CjAwMDAwMDAwMDAgNjU1MzUgZgowMDAwMDAwMDIxIDAwMDAwIG4KMDAwMDAwMDA4NiAwMDAwMCBuCjAwMDAwMDAxOTUgMDAwMDAgbgowMDAwMDAwNDkwIDAwMDAwIG4KdHJhaWxlciA8PCAgL1Jvb3QgMSAwIFIgL1NpemUgNSA+PgpzdGFydHhyZWYKNjA5CiUlRU9G";
}

@inject IJSRuntime js

<TelerikPdfViewer Data="@PdfSource"
                  Height="600px"
                  OnOpen="@OnPdfViewerOpen"
                  Class="@PdfViewerClass">
</TelerikPdfViewer>

<script suppress-error="BL9992">
    function scrollPdfToTop(selector) {
        var pdfCanvas = document.querySelector(selector);
        if (pdfCanvas) {
            pdfCanvas.scrollTop = 0;
        }
    }
</script>

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

    private string PdfViewerClass { get; set; } = "scrollable-pdf-viewer";

    private async Task OnPdfViewerOpen()
    {
        await js.InvokeVoidAsync("scrollPdfToTop", $".{PdfViewerClass} .k-pdf-viewer-canvas");
    }
}

if(_util.isNodeJS){const worker=eval("require")(this.workerSrc);return worker.WorkerMessageHandler}