CachedImage shows previous image for a split second when scrolling

[dmm-l-mediehus]

Description

When I scroll a CollectionView where it contains many CachedImages, and the images are from websites.

I tried searching for thi sissue and found:
luberda-molinet/FFImageLoading#216 - which is from original ImageLoading github.

https://github.com/luberda-molinet/FFImageLoading/wiki/Xamarin.Forms-Advanced#usage-in-listview-with-a-lot-of-elements-and-listviewcachingstrategyrecycleelement-enabled-default

but it is for ListView not CollectionView, and not sure how to go about that.

Steps to Reproduce

1. Make a CollectionView
2. Add enough CachedImage elements, with their Source set as Url to image
3. Scroll down and notice the previous images show up a split second (adding LoadingPlaceholder does not fix this issue)

Expected Behavior

It should wait to show any images (white or empty), or when LoadingPlaceholder is set then use that.

Actual Behavior

It shows previous image as it loads the image for a split second.

Basic Information

• Version with issue: 1.2.7
• Last known good version: None
• Platform: Android (untested on iOS)

Screenshots

Reproduction Link / Code

<CollectionView ItemsSource="{Binding MainPageItems}" ItemSizingStrategy="MeasureAllItems" IsVisible="{Binding IsLoading, Converter={StaticResource InvertBooleanConverter}}">
    <CollectionView.ItemsLayout>
        <GridItemsLayout Orientation="Vertical" SnapPointsType="None" />
    </CollectionView.ItemsLayout>

    <CollectionView.ItemTemplate>
       <DataTemplate>
          <Border StrokeThickness="0" Stroke="{StaticResource Primary}" StrokeShape="RoundRectangle 10" Margin="10" Padding="0" BackgroundColor="White">
              <Border.GestureRecognizers>
                  <TapGestureRecognizer Command="{Binding Source={x:Reference mainPage}, Path=BindingContext.DocumentClickedCommand}" CommandParameter="{Binding Document}" />
              </Border.GestureRecognizers>
          
              <Grid RowDefinitions="*, Auto" BackgroundColor="White">
                  <ffimage:CachedImage Grid.Row="0" Source="{Binding Document.ImageLink}" WidthRequest="{Binding Source={x:Reference mainPage}, Path=Width}" HeightRequest="{Binding Source={x:Reference mainPage}, Path=Width, Converter={StaticResource AspectRatioConverter}}" Aspect="AspectFill" LoadingPlaceholder="spin.gif" DownsampleToViewSize="True" FadeAnimationForCachedImages="False" />
          
                  <StackLayout Grid.Row="2" Padding="10" Spacing="5">
                      <HorizontalStackLayout>
                          <Label Text="{Binding Document.SectionName, Converter={StaticResource ToUppercaseConverter}}" FontSize="{OnIdiom Tablet=16, Default=12}" FontAttributes="Bold" TextColor="{StaticResource Primary}" LineHeight="0" />
                          <Label Text=" | FOR ABONNENTER" IsVisible="{Binding Document.SubscriberLabelIsVisible}" FontSize="{OnIdiom Tablet=16, Default=12}" TextColor="{StaticResource Gray600}" LineHeight="0" />
                      </HorizontalStackLayout>
          
                      <Label Text="{Binding Document.HeadLineText}" FontFamily="MerriweatherRegular" FontSize="{OnIdiom Tablet=25, Default=18}" FontAttributes="Bold" />
                  </StackLayout>
              </Grid>
          </Border>
      </DataTemplate>
    </CollectionView.ItemTemplate>
</CollectionView>