How to Implement a Centralized all Views in .NET MAUI BusyIndicator?

This article explains how to implement a centralized .NET MAUI BusyIndicator allowing you to show and hide the indicator from the BusyIndicatorService without replicating code in every XAML file. This approach utilizes the BusyIndicatorService, dynamically adding the indicator to the current page’s layout to efficiently manage app-wide loading states.

Create the BusyIndicator Service

The BusyIndicatorService class manages the logic for showing and hiding the indicator.

using Syncfusion.Maui.Core;
public partial class BusyIndicatorService
{
    private SfBusyIndicator? _busyIndicator;
    private Layout? _mainLayout;

    public BusyIndicatorService()
    {
        InitializeBusyIndicator();
    }

    private void InitializeBusyIndicator()
    {
        _busyIndicator = new SfBusyIndicator
        {
            AnimationType = AnimationType.DoubleCircle,
            OverlayFill = Color.FromRgba(211, 211, 211, 155),
            IsVisible = false,
        };
    }

    public void ShowBusyIndicator()
    {
        if (_busyIndicator == null) return;

        var application = Application.Current;
        if (application?.Windows.FirstOrDefault()?.Page is not Shell shell) return;

        var currentPage = shell.CurrentPage;
        if (currentPage is not ContentPage contentPage) return;

        var layout = contentPage.Content as Layout;
        if (layout == null) return;

        // Store reference to current layout
        _mainLayout = layout;

        // Remove from previous layout if exists
        if (_busyIndicator.Parent != null)
        {
            (_busyIndicator.Parent as Layout)?.Children.Remove(_busyIndicator);
        }

        // Add to new layout
        if (!layout.Children.Contains(_busyIndicator))
        {
            layout.Children.Add(_busyIndicator);
        }

        layout.InputTransparent = true;
        _busyIndicator.IsVisible = true;
        _busyIndicator.IsRunning = true;
    }

    public void HideBusyIndicator()
    {
        if (_busyIndicator == null || _mainLayout == null) return;

        if (_busyIndicator.Parent != null)
        {
            (_busyIndicator.Parent as Layout)?.Children.Remove(_busyIndicator);
        }

        _mainLayout.InputTransparent = false;
        _busyIndicator.IsRunning = false;
        _busyIndicator.IsVisible = false;
    }
}

XAML

Bind the BusyIndicatorService to the ViewModel, and call the ShowBusyIndicator() and HideBusyIndicator() methods as needed (e.g., during page load or async operations).

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="BusyIndicator.MainPage"
             xmlns:local="clr-namespace:BusyIndicator">

    <ContentPage.BindingContext>
        <local:BusyIndicatorService x:Name="viewModel"/>
    </ContentPage.BindingContext>
    
    <Grid>
        <Button Text="Mail Login" 
                Clicked="OnNavigate"
                HorizontalOptions="Center" VerticalOptions="Center" />
    </Grid>

</ContentPage>

C#

Invoke ShowBusyIndicator() and HideBusyIndicator() from your ViewModel to control the BusyIndicator state.

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

    private async void OnNavigate(object sender, EventArgs e)
    {
        await Navigation.PushAsync(new LoginPage());
    }

    protected override async void OnAppearing()
    {
        base.OnAppearing();
        if (viewModel != null)
        {
            viewModel.ShowBusyIndicator();
            await Task.Delay(1500);
            viewModel.HideBusyIndicator();
        }
    }
}

• The BusyIndicator is globally available for all views and controlled directly from the ViewModel.

• This approach simplifies managing the busy indicator throughout the app without duplicating UI logic across views.

Output

Download the complete sample from GitHub

Conclusion

I hope you enjoyed learning how to Implement a Centralized all Views in .NET MAUI BusyIndicator.

You can refer to our .NET MAUI BusyIndicator’s feature tour page for other groundbreaking feature representations. Explore our .NET MAUI BusyIndicator documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI components from the License and Downloads page.

If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Busy Indicator and other .NET MAUI components.

Please let us know in the following comments section if you have any queries or require clarifications. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!