[Android] Fix: Prevent Duplicate MapSource Invocations on setting Image's Source to Local File Paths

[bhavanesh2001]

Description of Change

This PR addresses an side effect introduced by #24023 where setting the image source to a local file path triggers duplicate calls to the MapSource mapper. This behavior can lead to performance degradation—especially in image-heavy scenarios such as CollectionView or CarouselView.In such cases, multiple calls could potentially compound the load and result in a significant performance hit when images are loaded within ItemsViews.

Problem:
When the platform view attaches to the window, the handler checks if the image drawable is null and then calls UpdateValue(nameof(IImage.Source)) to reload the image. With local file paths, this can happen even if the image is already in the process of loading, causing MapSource to be fired multiple times unnecessarily.

Fix:
To mitigate this, introduced an IsLoading flag in the ImageSourceServiceResultManager. The flag is set to true when a load begins (via BeginLoad()) and reset to false upon load completion (via CompleteLoad()). In OnPlatformViewAttachedToWindow, we now check this flag before triggering a reload:

[jsuarezruiz]

/azp run

[azure-pipelines]

Azure Pipelines successfully started running 3 pipeline(s).

[jsuarezruiz]

Could you include a test? Like tap a Button to load the image source, use the Image PropertyChanged event to check the source property and increase a counter. In that way, verify that MapSource is only invoked once.

 int sourceChangedCounter = 0;
 image.PropertyChanged += (sender, args) =>
 {
      if (args.PropertyName == nameof(Image.Source))
      {
          sourceChangedCounter++;
      }
 };

[bhavanesh2001]

Thank you for the suggestion, @jsuarezruiz.

I could write a test similar to what you described, but I believe it wouldn’t accurately represent the issue I’m trying to address.

The line below invokes the MapSource method directly without raising a PropertyChanged event for the Source property:

maui/src/Core/src/Handlers/Image/ImageHandler.Android.cs

Line 106 in c59607a

imageHandler.UpdateValue(nameof(IImage.Source));

Since MapSource is triggered as part of the handler setup, and not through a change to Image.Source, subscribing to PropertyChanged and checking for Image.Source won’t capture that UpdateValue() call.

[bhavanesh2001]

To replicate the issue in the Sandbox app, follow the steps below:

1. Add Image to Resources

Add shopping_cart.png to the Resources/Raw folder.

---

2. Define UI in MainPage.xaml

<VerticalStackLayout Margin="20" x:Name="stack">
    <Button AutomationId="MauiImage" Text="To Local Storage" Clicked="Button_Clicked"/>
    <Button AutomationId="MauiImage1" Text="Load Images" Clicked="Button_Clicked1"/>
    
    <CollectionView x:Name="cauroselView">
        <CollectionView.ItemsLayout>
            <LinearItemsLayout Orientation="Horizontal" />
        </CollectionView.ItemsLayout>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Image WidthRequest="300" Source="{Binding .}" />
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</VerticalStackLayout>

3. Add Code-Behind in MainPage.xaml.cs

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
        Images = new List<string>();
    }

    public List<string> Images { get; set; }

    private async void Button_Clicked(object sender, EventArgs e)
    {
        for (int i = 0; i < 25; i++)
        {
            var resourceStream = await FileSystem.OpenAppPackageFileAsync("shopping_cart.png");
            var path = Path.Combine(FileSystem.AppDataDirectory, $"temp{i}.png");

            if (File.Exists(path))
                File.Delete(path);

            using (var fileStream = File.Create(path))
            {
                await resourceStream.CopyToAsync(fileStream);
                Images.Add(path);
            }
        }
    }

    private void Button_Clicked1(object sender, EventArgs e)
    {
        cauroselView.ItemsSource = Images;
    }
}

4. Set Breakpoint

Place a breakpoint at the following line in ImageHandler.Android.cs:

maui/src/Core/src/Handlers/Image/ImageHandler.Android.cs

Line 106 in c59607a

imageHandler.UpdateValue(nameof(IImage.Source));

---

5. Test the Behavior

• Run the app.
• Click "To Local Storage" to generate and save image files locally.
• Click "Load Images" to bind the list of image paths to the CollectionView.
• Scroll through the CollectionView.

Without the PR changes:

• The UpdateValue() method will be invoked multiple times while scrolling.
• This is unintended and incorrect behavior.

With the PR changes:

• The UpdateValue() method will not be invoked during scrolling.

[sairam-the-dev]

Images inside a CollectionView or CarouselView are causing lot of issues for us. Laggy scroll, poor performance... This seems like it will help improve on that. @rmarinho @PureWeen Could you take a look at this?

[bcaceiro]

This can also explain my degradating performance in my CV's with local images

[mattleibow]

Maybe use another field for the value and also is this testable?