What is the proper way to use a Spinner (or other controls) at page load?

[Karoly]

Hi guys!

I'm playing with Spinner control and I'd like to use it while page is loading.

@page "/counter"
@using Syncfusion.Blazor.Spinner

<div>
    <div id="container" />
    <SfSpinner @ref="SpinnerObj" Target="@Target" Label="Loading . . . " Width="75px" />
    <button @onclick=LoadData>Load Data</button>
</div>

@code{

    SfSpinner SpinnerObj;

    private string Target { get; set; } = "#container";

    protected async Task LoadData()
    {
        SpinnerObj.ShowSpinner(Target);
        await Task.Delay(5000);
        SpinnerObj.HideSpinner(Target);
    }

    protected override async Task OnInitializedAsync()
    {

        // I get Null reference exception if I don't put this line, but Spinner still not appearing 

        //SpinnerObj = new SfSpinner();

        await LoadData();
    }
}

if I trigger LoadData method with button click, Spinner works fine but I can't make it work at page loading.

Can you help me please?

[Indrajith Srinivasan]

Hi Karoly,  

  

Greetings from Syncfusion support,  

  

We have validated your reported query. In order to achieve your requirement, we suggest you to call the ShowSpinner() method after a minimal delay in the OnAfterRenderAsync lifecycle, so that the SfSpinner is created and it will be shown. The Blazor lifecycle method OnAfterRenderAsync will be called only once after the page is rendered, and later DOM elements are added for the corresponding razor page. 

    

Blazor Documentation: https://docs.microsoft.com/en-us/aspnet/core/blazor/lifecycle?view=aspnetcore-3.1#after-component-render    

  

  

protected override async Task OnAfterRenderAsync(bool firstRender)    

    {    

        if (firstRender)    

        {    

            await Task.Delay(600);   

            SpinnerObj.ShowSpinner(Target);
            await Task.Delay(5000);
           SpinnerObj.HideSpinner(Target); 

         }    

    }    

    

 

Please let us know if the solution helps, 

 

Regards, 

Indrajith

[Karoly]

Hi Indrajith, thanks for your reply.

Your code works fine, thank you.

I tried it in OnAfterRenderAsync too but I didn't set any delay before I call ShowSpinner().

I found out that SfSpinner has an IsRendered property. I would try to avoid any unnecessary delay.

What do you think about this little modification?

protected override async Task OnAfterRenderAsync(bool firstRender)
{
        if (firstRender)
        {
            while (SpinnerObj.IsRendered == false)
            {
                await Task.Delay(100);
            }
            SpinnerObj.ShowSpinner(Target);
        }
}

I can't see this property in the doc, but I assume that once IsRendered is true I can call ShowSpinner, right?

Thanks,

Karoly

[Indrajith Srinivasan]

Hi Karoly,

Good day to you, 

 

We have validated your reported query. The usage of IsRendered is not a recommended way, instead can you upgrade your package to the latest Volume 3 release version 18.3.35, so that you can call the Spinner show without any delay. We have improved the Blazor Spinner component with our latest release. 

 

We would like you to review the breaking changes and the release notes regarding the changes we have included in this release from the below location before you upgrade.

 

Release Notes: https://blazor.syncfusion.com/documentation/release-notes/18.3.35/?type=all#spinner  

   

   

protected override async Task OnAfterRenderAsync(bool firstRender)     

    {     

        if (firstRender)     

        {    

            //No Delay required  

            //await Task.Delay(600);    

            SpinnerObj.ShowSpinner(Target);
            await Task.Delay(5000);
           SpinnerObj.HideSpinner(Target);  

         }     

    }     

     

  

Can you please upgrade your package to latest version and try the already provided solution without any delay? 

 

Regards, 

Indrajith 

[Karoly]

Hi Indrajith, thanks for your reply.

I tried the latest 18.3.35 version and SfSpinner works fine with Firefox but it does not appear at all with Microsoft Edge (Microsoft Edge 44.18362.449.0). I didn't try it with Chrome or Safari.

I debugged my code and SfSpinner Visible property says it is visible but it is not visible with Microsoft Edge

Thanks,

Karoly

[Revanth Krishnan]

Hi Karoly, 

 

 

Good day to you. 

 

 

We have validated the query “SfSpinner works fine with Firefox but it does not appear at all with Microsoft Edge (Microsoft Edge 44.18362.449.0)”.  

 

We are able to reproduce the reported issue and the issue occurs from Microsoft Edge’s old version. Please find the reference for more details. 

ASP .Net Announcement  - https://github.com/aspnet/Announcements/issues/441 

Can you please upgrade to the latest Edge version (https://www.microsoft.com/en-us/edge) to resolve the issue irrespective of the dot net version. 

 

Also, please check the changes in the Spinner component with the latest version. 

Release Notes: https://blazor.syncfusion.com/documentation/release-notes/18.3.35/?type=all#spinner 

 

Could you please check the above solution and let us know if it resolves your issue? 

 

Regards, 

Revanth 

 

[Karoly]

Hi Revanth, thanks for your reply.

Yes, I can confirm that now SfSpinner works on Firefox and Chromium based Edge browsers.

Thanks for your help!

Best,

Karoly

[Indrajith Srinivasan]

Hi Karoly, 

 

Thanks for the update,

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

 

Regards, 

Indrajith