1. Home
  2. Forum
  3. Blazor
  4. Is there a way to have one global spinner for application

Is there a way to have one global spinner for application

Hi,

We are working with version 18.3.42.
We would like to have Spinner on main layout to be visible depending on property defined on body.
Is it possible?
If it is please give us an example.

Best regards,
Igor Surla

4 Replies 1 reply marked as answer
RK Revanth Krishnan Syncfusion Team November 3, 2020 12:10 PM UTC

Hi Igor, 


Greetings from Syncfusion support. 


We have validated your query “To have Spinner on main layout and to be visible depending on property defined on body”. 

This can be achieved by using the `Visible` API which is a two-way binding property. We have prepared a sample for your reference, 

Code Snippet: 
MainLayout.razor: 

<CascadingValue Value="@this"> 
    <div class="sidebar"> 
        <NavMenu /> 
    </div> 

    <div class="main"> 
        <div class="top-row px-4"> 
            <a rel='nofollow' href="https://docs.microsoft.com/aspnet/" target="_blank">About</a> 
        </div> 
        <div class="content px-4"> 
            @Body 
        </div> 
        <SfSpinner @bind-Visible="@SpinnerVisible" CssClass="e-spin-overlay"> 
        </SfSpinner> 
    </div> 
</CascadingValue> 

@code{ 
    public bool SpinnerVisible { get; set; } = false; 

    public async Task ClickHandler() 
    { 
        this.SpinnerVisible = true; 
        StateHasChanged(); 
        await Task.Delay(2000); 
        this.SpinnerVisible = false; 
        StateHasChanged(); 
    } 
} 

Index.razor 
[CascadingParameter] 
public MainLayout mainLayoutObj { get; set; } 
private async Task ClickHandler() 
{ 
      await mainLayoutObj.ClickHandler(); 
} 

This ClickHandler method can be called anywhere from the page depends on the usage, 

Note: Use `CascadingValue` in the MainLayout to access the main layout anywhere in the body. 


Please check the above code snippet and the sample and let us know if it satisfy your requirement. 

Regards, 
Revanth 


Marked as answer
SS Sherri Sanderson November 21, 2024 07:40 PM UTC

How would I attach that to something like this on my page:

                <a rel='nofollow' href="CP/Locations" class="btn btn-cpDashLocations"></a>

to show the spinner until the navigation to the page completes.  I do not want to delay the page navigation just to see a spinner.  The spinner should only show when navigating to the next page is not instantaneous.



SS Sherri Sanderson November 21, 2024 07:42 PM UTC

And, for buttons click handlers, where would I put this?  At the top of the method or at the bottom?

await mainLayoutObj.ClickHandler(); 


UD UdhayaKumar Duraisamy Syncfusion Team November 27, 2024 06:22 AM UTC

To achieve your requirement of showing a spinner during page navigation, you can integrate the Spinner component with the Blazor Router to detect and display the spinner while navigating to a new page. The spinner will automatically disappear once the navigation is complete.

Here's an example implementation:
@using Syncfusion.Blazor.Spinner
@using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(Program).Assembly" OnNavigateAsync="@OnNavigateAsync">
    <Found Context="routeData">
        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
        <FocusOnNavigate RouteData="routeData" Selector="h1" />
    </Found>
    <Navigating>
        <div id="spinner-container">
            <SfSpinner @bind-Visible="@IsNavigating" CssClass="e-spin-overlay" />
        </div>
    </Navigating>
</Router>

@code {
    private bool IsNavigating { get; set; } = false;

    [Inject]
    private NavigationManager NavigationManager { get; set; }

    protected override async Task OnInitializedAsync()
    {
        NavigationManager.LocationChanged += HandleLocationChanged;
    }

    private void HandleLocationChanged(object sender, LocationChangedEventArgs args)
    {
        IsNavigating = true;
    }

    private async Task OnNavigateAsync(NavigationContext args)
    {
        await Task.Delay(500); // Simulate a delay for demonstration purposes. You can remove it in your application.
       
        IsNavigating = false; // Once navigation is complete, hide the spinner
    }

    public void Dispose()
    {
        NavigationManager.LocationChanged -= HandleLocationChanged;
    }
}

<style>
    #spinner-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(255, 255, 255, 0.8);
        z-index: 1000;
    }
</style>

Spinner Integration: The Spinner component is displayed when the IsNavigating property is true. The spinner is styled using the e-spin-overlay class for better visibility.

Page Navigation Handling:
  • The NavigationManager.LocationChanged event is used to detect when navigation starts, setting IsNavigating to true.
  • The OnNavigateAsync method ensures the spinner is visible during navigation and hides it after navigation completes. The delay (Task.Delay(500)) is added for demonstration and can be removed in your production application.
Router Integration: The <Router> component handles navigation and manages the spinner display seamlessly.

Dispose Pattern: The Dispose method ensures the event handler is unregistered to prevent memory leaks.
By integrating this code into your Blazor application, the spinner will automatically show whenever a navigation takes longer than expected, improving the user experience without delaying page navigation.




Loader.
Up arrow icon