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

<style>
    .no-open .k-blank-page {
        display: none;
    }

    /* Use these selectors if you want to separately target the upload or the dropzone */
    /* .no-open .k-external-dropzone,
    .no-open .k-upload{
        display: none;
    } */
</style>

<TelerikPdfViewer Data="@PdfSource"
                  OnOpen="@OnPdfOpen"
                  Height="600px"
                  Class="no-open">
    <PdfViewerToolBar>
        <PdfViewerToolBarDownloadTool />
        <PdfViewerToolBarPrintTool />

        <PdfViewerToolBarSpacer />

        <PdfViewerToolBarPagerTool />

        <PdfViewerToolBarSpacer />

        <PdfViewerToolBarZoomTool />
        <PdfViewerToolBarSelectionTool />
        <PdfViewerToolBarSearchTool />
        <PdfViewerToolBarAnnotationsTool />
    </PdfViewerToolBar>
</TelerikPdfViewer>

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

    private bool LoaderVisible { get; set; }

    private async Task OnPdfOpen(PdfViewerOpenEventArgs args)
    {
        // Cancel the event for additional precaution in case someone bypasses the CSS and forces the page to show the button and the dropzone.
        args.IsCancelled = true;
    }
}

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