Very laggy scroll when using GlideX in combination with FlexLayout and Bindable.ItemSource

[mikescandy]

I'm using the new Bindable.ItemSource from Xamarin.Forms 4

  <FlexLayout Margin="0,20,0,0" BindableLayout.ItemsSource="{Binding Artist.Songs}"  Direction="Row" Wrap="Wrap" JustifyContent="SpaceEvenly">
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <templates:AlternateAlbumTemplate/>
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</FlexLayout>

and the datatemplate like

<Frame 
    xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:views="clr-namespace:Pollux.Views"
    x:Class="Pollux.Templates.AlternateAlbumTemplate"
    Margin="5" Padding="0" CornerRadius="8" HasShadow="True" HeightRequest="150" WidthRequest="150">
 
    <Grid HeightRequest="150" WidthRequest="150">
        <Grid.GestureRecognizers>
            <TapGestureRecognizer Command="{Binding OpenAlbumCommand}" />
        </Grid.GestureRecognizers>
        <Image x:Name="CachedImage" HeightRequest="150" WidthRequest="150"  Aspect="AspectFill" />
        <views:SKGradientCanvasView HeightRequest="150" WidthRequest="150" VerticalOptions="Start"  />
        <Label Margin="10,0,10,10"  Text="{Binding Title}"  FontSize="12" FontFamily="Montserrat-Bold.ttf#Montserrat-Bold" TextColor="White" VerticalOptions="End" LineBreakMode="WordWrap"  />
    </Grid>
</Frame>

I'm setting the image source in the OnBindingContextChanged method in the template codebehind.

The FlexLayout is wrapped in a scrollview. When images are loaded, the scroll is very laggy. It works fine with the regulare imageview.

I found a few issues around Glide causing scrolls to lag, but most issues are around recyclerview. Maybe I'm missing something obvious?

[mikescandy]

And obviosuly, after trying to isolate the problem, the combination of flexlayout, bindable itemsource and glide is not enough to trigger the issue. Do you mind to keep this open until I can reproduce this in isolation?

[jonathanpeppers]

Sure, if you can narrow down the problem it will be a bit easier to fix, thanks!

[mikescandy]

I'm trying to narrow down the issue. What I found so far is that if I load the page straight away everything is fine (low overdraw, gpu profiler looks ok-ish) but when loading from the main page it lags. Check out my branch https://github.com/mikescandy/glidex/tree/laggy . If you select the flexlayout button from the mainpage it should lag. If you change app.xaml.cs and set the mainpage as flexlayoutpage it should be a lot smoother (although i think that gpu profiling is still not optimal).