Loading State for Images in .NET MAUI

Handling the loading state for images can significantly enhance the user experience in any application. In this post, we will explore how to implement a loading indicator when images are being fetched and displayed in .NET MAUI for iOS, Windows, macOS and Android platforms. Leveraging Control Reference Bindings, we'll ensure that your app feels smooth and responsive even when dealing with heavy image loading tasks.

Special Thanks

A huge shoutout to my friend Gerald Versluis for his insightful video on using Control Reference Bindings. His guidance has been invaluable in making this implementation a reality.

Implementation

You can implement the loading state either on a Single Image, CarouselView, or CollectionView. In the example below, we are going to use a CarouselView:

<CarouselView
    VerticalOptions="Start"
    Loop="False"
    HeightRequest="256"
    IsBounceEnabled="True"
    PeekAreaInsets="30"
    BackgroundColor="Transparent"
    ItemsSource="{Binding Images}">
    <CarouselView.ItemsLayout>
        <LinearItemsLayout
            Orientation="Horizontal"
            ItemSpacing="10"
            SnapPointsType="Mandatory"
            SnapPointsAlignment="Start" />
    </CarouselView.ItemsLayout>
    <CarouselView.ItemTemplate>
        <DataTemplate x:DataType="models:Demo">
            <Grid>
                <Image
                    x:Name="MainImage"
                    Aspect="AspectFill"
                    Source="{Binding ImageUrl}"
                    HeightRequest="180"/>
                <ActivityIndicator
                    HeightRequest="32"
                    WidthRequest="32"
                    VerticalOptions="Center"
                    Margin="0,0,0,0"
                    HorizontalOptions="Center"
                    IsRunning="{Binding IsLoading, Source={x:Reference MainImage}}"
                    IsVisible="{Binding IsLoading, Source={x:Reference MainImage}}"
                    Color="#000000" />
            </Grid>
        </DataTemplate>
    </CarouselView.ItemTemplate>
</CarouselView>

Conclusion

Implementing a loading indicator for images in your .NET MAUI application can greatly enhance the user experience by providing visual feedback during image loading. This tutorial demonstrated how to achieve this using Control Reference Bindings for both all supported platforms. By leveraging the IsLoading property of the Image control, you can ensure that your app remains responsive and user-friendly.

For more detailed information on the IsLoading property, please refer to the official Microsoft documentation.

Happy coding and may your apps load smoothly!

Follow me on Social:

• LinkedIn victorhugogarcia
• GitHub @vhugogarcia
• Threads @ihugo
• X @ivictorhugo