How to load ListView Data with .NET MAUI BusyIndicator loading?

This guide explains how to load .NET MAUI ListView data with a .NET MAUI Busy Indicator to indicate loading status.

Step 1: Create a ListView within your .NET MAUI application and configure the ItemTemplate to populate each list item with the corresponding book name and description.

XAML

    <Grid>
        <listview:SfListView x:Name="listView" 
	                             ItemsSource="{Binding BookInfo}" 
	                             ItemSize="100">
            <listview:SfListView.ItemTemplate>
                <DataTemplate>
                    <Grid Padding="10">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="0.4*" />
                            <RowDefinition Height="0.6*" />
                        </Grid.RowDefinitions>
                        <Label Text="{Binding BookName}" FontAttributes="Bold" TextColor="Teal" FontSize="21" />
                        <Label Grid.Row="1" Text="{Binding BookDescription}" TextColor="Teal" FontSize="15"/>
                    </Grid>
                </DataTemplate>
            </listview:SfListView.ItemTemplate>
        </listview:SfListView>
    </Grid>

Step 2: Add a Busy indicator control that will display while the ListView items are loading. It can be structured within a Grid layout.

XAML

<listview:SfListView x:Name="listView" 
                  ItemsSource="{Binding BookInfo}" 
                  ItemSize="100">
 <listview:SfListView.ItemTemplate>
 . . . 
<busyIndicator:SfBusyIndicator x:Name="busyIndicator" 
                            AnimationType="CircularMaterial" 
                            DurationFactor="0.4"/>
 

Step 3: Show the Busy indicator while loading the ListView data by defining the ListView loaded event. In the loaded event handler method, enable and disable the Busy indicator by setting the IsRunning property.

C#

public partial class MainPage : ContentPage
{
   public MainPage()
   {
       InitializeComponent();
       listView.Loaded += ListView_Loaded;
   }

   private async void ListView_Loaded(object sender, ListViewLoadedEventArgs e)
   {
       listView.IsVisible = false;
       busyIndicator.IsVisible = true;
       busyIndicator.IsRunning = true;
       await Task.Delay(2500);
       busyIndicator.IsRunning = false;
       listView.IsVisible = true;
   }

}

Output

Conclusion
I hope you enjoyed learning how to load ListView data with .NET MAUI Busy Indicator (SfBusyIndicator) loading.

Refer to our .NET MAUI Busy Indicator’s feature tour page for other groundbreaking feature representations. You can explore our .NET MAUI Busy Indicator 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!