Using `Image` in a list briefly shows previously seen image due to recycling

[MartinZikmund]

Current behavior

Consider the following template:

<DataTemplate x:DataType="octokit:User">
    <Grid Padding="8" ColumnSpacing="16">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Image Source="{x:Bind AvatarUrl}" Width="64" Height="64" Grid.RowSpan="2" />
        <TextBlock Style="{ThemeResource TitleTextBlockStyle}" Text="{x:Bind Login}" Grid.Column="1" />
        <HyperlinkButton Content="{x:Bind HtmlUrl}" NavigateUri="{x:Bind HtmlUrl}" Grid.Row="1" Grid.Column="1" Padding="0" />
    </Grid>
</DataTemplate>

When data binding a large list, the items get recycled and you can briefly see the new items show images from some previous entries before the actual image loads due to the fact that the template is recycled.

Expected behavior

Should not happen - images should show up as blank by default.

Seen in Skia & WASM, but may happen on other platforms as well

How to reproduce it (as minimally and precisely as possible)

No response

Workaround

Works on UWP/WinUI

Yes

Environment

Uno.UI / Uno.UI.WebAssembly / Uno.UI.Skia, Uno.WinUI / Uno.WinUI.WebAssembly / Uno.WinUI.Skia

NuGet package version(s)

4.2

Affected platforms

WebAssembly, Skia (GTK on Linux/macOS/Windows)

IDE

No response

IDE version

No response

Relevant plugins

No response

Anything else we need to know?

No response

[roxk]

It happens in UWP as well. It can happen if the image source stay intact and only uri source is modified - the BitmapImage doesn't clear it's previous image even when a new uri is supplied.

The convention in all other platforms (android/iOS) is to always set the image to null/show placeholder before load and then load the image.