1. Home
  2. Forum
  3. Blazor
  4. Using the Spinner while loading a form

Using the Spinner while loading a form

I am using Blazor Server Side; Is there a way to use the SFSpinner to "spin" while a page is loading? I need some kind of indicator let the user know the page is loading and not frozen

9 Replies 1 reply marked as answer
IS Indrajith Srinivasan Syncfusion Team July 20, 2020 10:03 AM UTC

Hi Jim, 
 
Greetings from Syncfusion support, 
 
We have validated your reported query. Yes, you can show the SfSpinner while the page is loading and can hide when it is loaded. We have also prepared a sample that tries to meet your requirements of showing the spinner till the page data is loaded. 
 
 
Can you please check the above sample and let us know if it meets your requirements? 
 
Regards, 
Indrajith 


JI Jim July 21, 2020 03:09 PM UTC

Unfortunately, your solution does not work in my situation. First of all, I am in an AuthorizeView. I am not sure if that creates an issue. Second. I am loading a SFGrid and I would like the spinner to spin until the Grid is finished loading. 

I got the spinner to show, but when I call HideSpinner, it does not go away.

IS Indrajith Srinivasan Syncfusion Team July 27, 2020 05:59 AM UTC

Hi Jim, 
 
Good day to you, 
 
We have validated your reported queries. 
 
Query 1: “Unfortunately, your solution does not work in my situation. First of all, I am in an AuthorizeView. I am not sure if that creates an issue.” 
 
We are not clear with this requirement. Can you share more details regarding the reported query ? 
  • SfSpinner rendering code blocks.
  • The methods used to Show/Hide spinner.
 
Query 2: “ I am loading a SFGrid and I would like the spinner to spin until the Grid is finished loading. I got the spinner to show, but when I call HideSpinner, it does not go away.” 
 
We have tried to replicate the reported issue with SfSpinner by calling the spinner till SfGrid data is loaded and hiding once data is fetched. Can you please check the below sample and let us know if it meets your requirements? 
 
 
If possible, can you replicate the issue in the above sample and revert back to us. So that we can validate and provide solution at earliest. 
 
Regards, 
Indrajith 


DI Dirk July 31, 2020 08:16 AM UTC

Have a similar problem with a "global" spinner. This works well as long as the current page not contains an SfGrid that calls a spinner itself.

In my case, i have a Blazor MVVM concept, the ViewModel provides refresh and the list as an ObservableCollection<T>, which is bound to the SfGrid as the DataSource.

If the ViewModel is refreshed without SfGrid in the view, the global spinner behaves correctly.

If the ViewModel is refreshed with SfGrid in the view, the global spinner does not behave correctly. It does not appear or disappear even though ShowSpinner ("# root") and HideSpinner ("# root") are called.





IS Indrajith Srinivasan Syncfusion Team August 3, 2020 08:04 AM UTC

Hi Dirk,

Greetings from Syncfusion support, 
 
We have validated your reported query. The SfGrid spinner and SfSpinner conflicts in the page, hence the reported issue occurs. We suggest you to maintain a separate <div> element target for the SfSpinner, to resolve the reported issue. We have also prepared a sample that tries to meet your requirements.  
 
 
<app id=”root”> 
    <div id=”spinTarget”></div> 
</app> 
 
<SfSpinner Target=”#spinTarget”></SfSpinner> 
 
 
 
Can you please check the above sample and let us know if it meets your requirements? 
 
Regards, 
Indrajith 


Marked as answer
DI Dirk August 3, 2020 09:42 AM UTC

Hi Indrajith,

thanks for quick help, it works great now.

Regards,
Dirk

IS Indrajith Srinivasan Syncfusion Team August 3, 2020 01:01 PM UTC

Hi Dirk,

Thanks for the update,

We are glad that the reported issue is resolved. Please let us know if you need any further assistance.

Regards,
Indrajith

MG Miles Gibson October 6, 2021 02:28 AM UTC

This doesn't work in the latest 19.3.0.43 version.  The property Target is no longer available.  What now?


IS Indrajith Srinivasan Syncfusion Team October 6, 2021 01:04 PM UTC

Hi Miles, 
 
Good day to you, 
 
We have introduced breaking changes in the SfSpinner from our package versions 18.3.35 and 18.4.30. Check the below release notes for our breaking changes introduced, 
 
Release notes:  
 
 
Instead of using the Target property of the Spinner, you can render the spinner directly inside your target element which will be considered as spinner target. We have also modified the already shared sample. 
 
MainLayout.razor 
 
 
  <div id="spinTarget"> 
        <SfSpinner @ref="@AppState.GlobalSpinner" CssClass="e-spin-overlay" Size="75" ZIndex="1001" Label="Operation in progress"> 
        </SfSpinner> 
    </div> 
 
 
 
Please let us know if you have any concerns, 
 
Regards, 
Indrajith 


Loader.
Up arrow icon