Spinner not visible

[Baba Goud]

Hi team,

I have a spinner control which needs to be shown programmatically when a operation takes longer time to process. I have the below code in Razor

<div>

    <SfSpinner @bind-Visible="SpinnerVisible" Type="@SpinnerType.Bootstrap4" Size="50" Label="@SpinnerLabel" />

    @if (ProductionLogList == null)    {    }

    else

    {

        <SfGrid DataSource="@ProductionLogList" @ref="productionLogsGrid" AllowPdfExport="true" PrintMode=PrintMode.CurrentPage>

 </SfGrid>

 </div>

}

The code behind is as below.

public bool SpinnerVisible { get; set; }

 public string SpinnerLabel { get; set; }

method1()

{

 SpinnerVisible = true;

 SpinnerLabel = "Generating PDF...";

//long operation

SpinnerVisible = false;

 SpinnerLabel = "";

}

The spinner does not show up for some reason.      

Thanks

Baba        

[Buvana Sathasivam]

Hi Baba, 

Greetings from Syncfusion support. 

You have dynamically changed the Visible property continuously without showing any time delay. So, the Blazor SfSpinner component is not shown. The time delay specifies how long the spinner is displayed. We suggest adding a time delay for showing the SfSpinner component using the Visible property. In the below sample, we have shown the SfSpinner component with some time delay when you click the button. Please see below the code and sample. 

<SfButton Content="Open Spinner" OnClick="method1"/> 

<div> 

 

    <SfSpinner @bind-Visible="SpinnerVisible" Type="@SpinnerType.Bootstrap4" Size="50" Label="@SpinnerLabel" /> 

 

 </div> 

 @code { 

    public bool SpinnerVisible { get; set; } 

 

    public string SpinnerLabel { get; set; } 

 

    private async Task method1() 

 

    { 

         

        SpinnerVisible = true; 

 

        SpinnerLabel = "Generating PDF..."; 

 

        //long operation 

        await Task.Delay(1000);   

        SpinnerVisible = false; 

 

 SpinnerLabel = ""; 

 

} 

 } 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Spinner-1569388089 

Demo sample: https://blazor.syncfusion.com/demos/spinner/overview?theme=bootstrap5 

Documentation link: https://blazor.syncfusion.com/documentation/spinner/getting-started  

Please let us know if you have any concerns. 

Regards, 

Buvana S 

[Paolo]

Hi Baba,

following your code, as well as the documentation link, I get a compilation error:

In code section I declared the variable:

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

What is wrong?

I'm using v20.1.0.50 Syncfusion Blazor components.

Best regards

Paolo

 

[Buvana Sathasivam]

Hi Paolo,

We were unable to reproduce your reported problem. Please find the below video for your reference.

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/V_592022_163225-1654109236

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Net6Server948314230

Could you please share your full page code to reproduce your issue?

Regards,

Buvana S

[Paolo]

Hi Buvana,

I fixed the issue. I miss @using for spinner component in _import file

Thank you

Paolo

[Buvana Sathasivam]

Hi Paolo,

Welcome. We are glad that your reported issues are resolved. Please get back to us if you need any further assistance.

Regards,

Buvana S