DialogService prevent spinner to hide

[Devis Giacopuzzi]

Hi,

I am developing a Blazor Web App.

When I invoke a method where I want to hide the Spinner after the "workload part", the Spinner doesn't hide if I use a DialogService afterwards.

But if I use a SfDialog component, everything works fine.

Is it possible to hide the Spinner and  use a Dialog Service?

Here you can find part of code:

<div id="spinner">

 <SfSpinner @bind-Visible="@VisibleSpinner" CssClass="e-spin-overlay" Label=@LabelSpinner  ZIndex="100000" />

</div>

<style>

    #spinner {position: relative;height: 550px;    }

   .e-spinner-pane.e-spin-overlay {position: fixed;}

</style>

@code{

private bool VisibleSpinner { get; set; } = false;

private string LabelSpinner { get; set; } = string.Empty;

private async Task DoSomethingAsync()

{

try

{

    this.LabelSpinner = "In progress...";

    this.VisibleSpinner = true;

    await Task.Delay(600);

 

    await DoSomething();

 

    headerMessage = "Done";

    dialogMessage = "Done";

}

catch (Exception ex)

{

    Logger.LogError(ex, ex.Message);

    headerMessage = "Warning!";

    dialogMessage = "Error!";

}

finally

{

    this.VisibleSpinner = false;

    await DialogService.AlertAsync(dialogMessage, headerMessage);

}

}

Thank you,

Devis Giacopuzzi

 

[Priyanka Karthikeyan]

Hi Devis Giacopuzzi,

To hide the spinner, please call the StateHasChanged method after setting the VisibleSpinner property to false. This will ensure that the UI updates properly. Here's the updated code snippet for your reference:

    private async Task AlertBtn()
    {
        try
        {
            LabelSpinner = "In progress...";
            VisibleSpinner = true;
            await Task.Delay(600); // Simulating a process

            // After the delay, hide the spinner and show the alert dialog
            VisibleSpinner = false;
            StateHasChanged();
            await DialogService.AlertAsync("10% of battery remaining", "Low Battery");
            DialogStatus = "The user closed the Alert dialog";
        }
        catch (Exception ex)
        {
            // Handle any exceptions here
        }
    }
}

 

Regards,

Priyanka K

Attachment: Dialog_Spinner_2459fca4.zip