CollectionView is Very Laggy

[ShariatPanah]

Description

I'm using a vertical linear collectionview, the problem is scrolling through CollectionView is very laggy, and also navigating from a page to another is extremely slow, for example when i tap on an item in the collectionview it takes 4-5 seconds to show the requested page, Please just see the video:

https://github.com/dotnet/maui/assets/32509267/e4336a60-841f-4925-800d-3040c04a31c5

the interesting part is that this is really a very basic design and it's not complicated at all, why is this so laggy?

this video is recorded on Huawei Mate 10 Lite With Android 8.0

I tested on an Emulator With Api Level 31 (Android 12.0), the scrolling through CollectionView is smooth, but opening a page is taking something between 2-3 seconds

also tested on windows, scrolling is not laggy at all

so what is the problem?

Steps to Reproduce

No response

Link to public reproduction project repository

No response

Version with bug

8.0.6

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

No response

Did you find any workaround?

No response

Relevant log output

No response

[Totalq09]

Hard to tell just by looking at the video. Provide reproduction repository or at least post the XAML of that particular view.

[drasticactions]

Could you please create a small reproduction project of how you're using this view? Just looking at a video doesn't give much for what types of controls you're using and how you're using them.

[ghost]

Hi @ShariatPanah. We have added the "s/needs-repro" label to this issue, which indicates that we require steps and sample code to reproduce the issue before we can take further action. Please try to create a minimal sample project/solution or code samples which reproduce the issue, ideally as a GitHub repo that we can clone. See more details about creating repros here: https://github.com/dotnet/maui/blob/main/.github/repro.md

This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.

[ShariatPanah]

@jsuarezruiz @samhouts @Eilon @drasticactions can i send the whole project to one of you in private to test it on your side?

[ghost]

Thanks for the issue report @ShariatPanah! This issue appears to be a problem with Visual Studio, so we ask that you use the VS feedback tool to report the issue. That way it will get to the routed to the team that owns this experience in VS.

If you encounter a problem with Visual Studio, we want to know about it so that we can diagnose and fix it. By using the Report a Problem tool, you can collect detailed information about the problem, and send it to Microsoft with just a few button clicks.

1. Go to the Visual Studio for Windows feedback tool or Visual Studio for Mac feedback tool to report the issue
2. Close this bug, and consider adding a link to the VS Feedback issue so that others can follow its activity there.

[PureWeen]

@ShariatPanah you can use vs feedback to attach a project that's not publicly visible

[ShariatPanah]

here is the xaml code im using:

<RefreshView
    x:Name="refreshView"
    Grid.Row="3"
    Margin="{Binding IsFilteringOn, Converter={StaticResource IsFilteringOnForCollectionViewMargin}}"
    Command="{Binding RefreshCommand}"
    IsRefreshing="{Binding IsRefreshing}"
    RefreshColor="#8ABA56">
    <CollectionView
        x:Name="projectsCollectionView"
        ItemTemplate="{StaticResource projectsDataTemplate}"
        ItemsSource="{Binding Projects}"
        RemainingItemsThreshold="1"
        RemainingItemsThresholdReachedCommand="{Binding LoadMoreProjectsCommand}"
        SelectionMode="None">
        <CollectionView.ItemsLayout>
            <LinearItemsLayout ItemSpacing="15" Orientation="Vertical" />
        </CollectionView.ItemsLayout>

    <CollectionView.ItemTemplate>
<DataTemplate x:Key="projectsDataTemplate">
    <Border
        BackgroundColor="#8ABA56"
        HeightRequest="250"
        StrokeThickness="0">
        <Border.StrokeShape>
            <RoundRectangle CornerRadius="{StaticResource CornerRadius}" />
        </Border.StrokeShape>
        <Border.GestureRecognizers>
            <TapGestureRecognizer Command="{Binding Path=BindingContext.ShowProjectDetailsCommand, Source={Reference projectsCollectionView}}" CommandParameter="{Binding Id}" />
        </Border.GestureRecognizers>
        <Grid>
            <Image Aspect="AspectFill" Source="{Binding Image}" />
            <BoxView
                BackgroundColor="Transparent"
                CornerRadius="{StaticResource CornerRadius}"
                HeightRequest="60"
                Opacity="0.85"
                VerticalOptions="End"
                Color="White" />

            <Border
                HeightRequest="60"
                StrokeThickness="0"
                VerticalOptions="End">
                <Grid
                    Padding="15,5"
                    ColumnDefinitions="30,*"
                    RowDefinitions="25,20"
                    RowSpacing="5">
                    <Image
                        Grid.RowSpan="2"
                        Grid.Column="0"
                        HeightRequest="30"
                        IsVisible="{Binding IsDone}"
                        VerticalOptions="Center"
                        WidthRequest="30">
                        <Image.Source>
                            <icons:IconSource Icon="BadgeCheck" Color="White" />
                        </Image.Source>
                    </Image>

                    <Label
                        Grid.Row="0"
                        Grid.Column="1"
                        FontFamily="IranSansBold"
                        FontSize="15"
                        HorizontalOptions="End"
                        Text="{Binding Name}"
                        TextColor="White" />

                    <Label
                        Grid.Row="1"
                        Grid.Column="1"
                        FontFamily="IranSans"
                        FontSize="10"
                        HorizontalOptions="End"
                        Text="{Binding Owner}"
                        TextColor="White" />
                </Grid>
            </Border>
        </Grid>
    </Border>
</DataTemplate>
    </CollectionView.ItemTemplate>
    </CollectionView>
</RefreshView>

the interesting part is when i comment this line: <Image Aspect="AspectFill" Source="{Binding Image}" />

the lag would gone and i can scroll through the collection view not perfectly but more smoother. so it has something to do with images in ItemTemplate. i tested on Release Mode on a real Android device and it wont make much difference

[mjsb212]

@ShariatPanah - see 18877 & https://github.com/dotnet/maui/issues/18881 - There are several open issues with CollectionView on Android loading images with certain layouts...try removing the grid and border and test in Release mode and see if the layout is causing the issue. I'm having similar problems and when I remove the images and/or the Grid everything is fine as long as my images are not to large.

[QianaJiao]

Can repro this issue at Android platform at the latest 17.10 Preview 5 (8.0.7&8.0.21).

[jsuarezruiz]

Can repro this issue at Android platform at the latest 17.10 Preview 5 (8.0.7&8.0.21).

Could you attach the reproduction sample?

[ShariatPanah]

i provided the xaml code i'm using, i dont think it would be too hard to copy and paste the code to your project

[matt-goldman]

I encountered this issue today after extensive debugging and found the root cause to be specifying ItemsLayout, specifically LinearItemsLayout (potentially others too but this seems to be the common thread). Here’s the snipped from your code causing the issue:

<CollectionView.ItemsLayout>
            <LinearItemsLayout ItemSpacing="15" Orientation="Vertical" />
</CollectionView.ItemsLayout>

From my investigation, I believe the following issues are related:

• 18877

• 18367

• 18395

• 17127

• 19383

• 8422

Can you confirm whether removing this resolves your issue? (Even if you need it for your layout, confirming this can help pinpoint the problem).

cc: @jsuarezruiz @drasticactions @PureWeen @jonathanpeppers - sorry for the tag spam, I can see that @ZeBrody identified the cause in #17127 (see: https://github.com/dotnet/maui/issues/17127#issuecomment-1740565116) but not sure whether this connection has been made.

Edit: I just found out my colleague @AntPolkanov already figured this out a year ago, see #13946

[ShariatPanah]

@matt-goldman thanks for your response, i tested without setting CollectionView.ItemsLayout and honestly i don't see any difference in terms of lagging, but about ItemSpacing i can confirm that without setting it the Continuous-related bug would gone.

[matt-goldman]

@matt-goldman thanks for your response, i tested without setting CollectionView.ItemsLayout and honestly i don't see any difference in terms of lagging, but about ItemSpacing i can confirm that without setting it the Continuous-related bug would gone.

Yep definitely appears to be related to the spacing, not the layout