Open Dialog with component after dialog busy

Radzen Studio Blazor Server
1

Greetings, it is possible to first open a dialog busy, while waiting for the loading of a dialog with a component. The component takes a long time to load because it loads a large amount of data at the beginning and does not display anything until it loads the information.

2

Check this demo for reference on how to open busy dialog:

image
image1920×1080 193 KB

3

Thanks for the prompt reply, yes I checked but I am trying something like the attached code. Could you guide me how to make the call to the 2 dialogs.

@inject DialogService DialogService

<div class="rz-p-12 rz-text-align-center">
    <RadzenButton Text=@($"Order {orderID} details") ButtonStyle="ButtonStyle.Secondary" Click=@OpenOrder />
</div>

@code {
    int orderID = 10248;

    public async Task OpenOrder()
    {
        
            InvokeAsync(async () =>
            {
                // Simulate background task
                await DialogService.OpenAsync<DialogCardPage>($"Order {orderID}",
                new Dictionary<string, object>() { { "OrderID", orderID } },
                new DialogOptions() { Width = "700px", Height = "512px", Resizable = true, Draggable = true });

                // Close the dialog
                DialogService.Close();
            });

            await BusyDialog();
        
    }

    // Busy dialog from markup
    async Task BusyDialog()
    {
        await DialogService.OpenAsync("", ds =>
    @<RadzenStack AlignItems="AlignItems.Center" Gap="2rem" Class="rz-p-12">
        <RadzenImage Path="images/community.svg" Style="width: 200px;" AlternateText="community" />
        <RadzenText TextStyle="TextStyle.H6">Loading, please wait...</RadzenText>
    </RadzenStack>, new DialogOptions() { ShowTitle = false, Style = "min-height:auto;min-width:auto;width:auto", CloseDialogOnEsc = false });
    }
}

But I get this.

Dialog
Dialog1004×617 50.3 KB

4

Reading other asynchronous loading problems on the forum, I saw that await Task.Delay has to be there for it to work.

@inject DialogService DialogService

<div class="rz-p-12 rz-text-align-center">
    <RadzenButton Text=@($"Order {orderID} details") ButtonStyle="ButtonStyle.Secondary" Click=@OpenOrder />
</div>

@code {
    int orderID = 10248;

    public async Task OpenOrder()
    {
        InvokeAsync(async () =>
        {
            // Simulate background task
            await Task.Delay(500);    
            await DialogService.OpenAsync<DialogCardPage>($"Order {orderID}",
                new Dictionary<string, object>() { { "OrderID", orderID } },
                new DialogOptions() { Width = "700px", Height = "512px", Resizable = true, Draggable = true });
                // Close the dialog
            DialogService.Close();
        });

        await BusyDialog("Busy ...");
    }

    // Busy dialog from string
    async Task BusyDialog(string message)
    {
        await DialogService.OpenAsync("", ds =>
        {
            RenderFragment content = b =>
            {
                b.OpenElement(0, "RadzenRow");

                b.OpenElement(1, "RadzenColumn");
                b.AddAttribute(2, "Size", "12");

                b.AddContent(3, message);

                b.CloseElement();
                b.CloseElement();
            };
            return content;
        }, new DialogOptions() { ShowTitle = false, Style = "min-height:auto;min-width:auto;width:auto", CloseDialogOnEsc = false });
    }
}