Changing image source on Android causes flicker between images

Description

I have an Image control and I periodically set the source to a new Uri image. This worked perfectly (on Android…don’t get me started on Windows) in Preview 14. It was completely broken by RC1 and then partially sort of fixed by #6394 and then more fixed in #6543. However, the image still flickers, i.e., goes black for a short time, maybe a quarter second or so, when the image source is set to a new Uri.

I just noticed in a test app that when the images are cached, i.e., have already been loaded and displayed once, there is no flicker. Unfortunately, my app is fetching a series of hundreds and sometimes thousands of images so the images will literally never be cached.

Again, in Preview 14 there was no flickering at all.

Steps to Reproduce

MainPage.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ImageTest2.MainPage">
			 
    <ScrollView>
        <VerticalStackLayout 
            Spacing="25" 
            Padding="30,0" 
            VerticalOptions="Center">

            <Image
                x:Name="Image"
                Source="dotnet_bot.png"
                SemanticProperties.Description="Cute dot net bot waving hi to you!"
                HeightRequest="200"
                HorizontalOptions="Center" />
                
            <Label 
                Text="Hello, World!"
                SemanticProperties.HeadingLevel="Level1"
                FontSize="32"
                HorizontalOptions="Center" />
            
            <Label 
                Text="Welcome to .NET Multi-platform App UI"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to dot net Multi platform App U I"
                FontSize="18"
                HorizontalOptions="Center" />

        </VerticalStackLayout>
    </ScrollView>
 
</ContentPage>

MainPage.xaml.cs:

namespace ImageTest2;

public partial class MainPage : ContentPage
{
	int count = 0;

	public MainPage()
	{
		InitializeComponent();

		imageTimer = new(Timer_Tick, null, 1000, 1000);
	}

	private void Timer_Tick(object _)
    {
		Application.Current.Dispatcher.Dispatch(() => Image.Source = new Uri(images[imageNo]));
		imageNo = (imageNo + 1) % images.Length;
    }

	readonly string[] images = new string[]
	{
        "https://64.media.tumblr.com/14cb5aa197e5d9ca6479d955f68344f0/cb28a32e384437f2-07/s540x810/005508be5849eff8fda5b0ebda23f9fcbede164e.jpg",
        "https://64.media.tumblr.com/d66b1709639c23315d26c0a4e977c399/1fb3e31c5e63625d-81/s540x810/2e9a893ec8c1f65a4b9fb8f1264b4fb76914ced8.jpg",
        "https://64.media.tumblr.com/e7db300b8248c0a7f4c66884032c9414/8f89498ebe784d1c-4e/s540x810/90835c041547bf2936ee249c5c5e1b4eddd589a3.jpg",
        "https://64.media.tumblr.com/fd901060692d2c9ca6f05ddc58e28e5d/2db73c9c5730d87c-e2/s500x750/092c9dc3cff5150acf24bf22a9e61b9719d9ccd6.jpg",
        "https://64.media.tumblr.com/c011aa547a45ac6fe47c46beeb290596/eafc76ded66f16f9-dc/s500x750/5ed923ed086296a2bd41cab3106079eb7addc2d0.jpg",
    };
	int imageNo = 0;
	readonly Timer imageTimer;
}

Version with bug

Release Candidate 3

Last version that worked well

Preview 14

Affected platforms

Android

Affected platform versions

Seeing it on Android 11

Did you find any workaround?

No workaround was found. I tried performing ImageSource.LoadImage and setting the image source in the callback (which is what I was doing in Preview 14) but that didn’t appear to help.

Relevant log output

n/a

[dharber]

Unfortunately, the nature of the app I’m working on pretty much guarantees the images will never be cached. I just used the tumblr images to demonstrate the flickering. In reality, the app fetches images from a very large pool so it’s very likely they’d have been dumped from the cache long before they ever came up again.

[mattleibow]

Thanks for the persistence.